Welcome to my weird little side project. Yes, I have finally done it. I have made something on the side. But considering the fact that I am currently looking for a new job... WELL.
This thing is a collection of hand-made <patterns> intended to be used in inline svg. It's a result of a bit of a design journey, in where I used a set of super simple shape-illustrations on my website but I wanted them to be able to reflect whatever color users were able to override in the settings. I used patterns from a figma library I created, based on someones pictures that they published before figma community libraries where a thing. But I had troubles exporting them as SVG, so I had to recreate them and had a horrible time doing it. So I thought it might be a good reason to learn some hand-coding SVG.
This is what came out of this. A collection of simple, tileable SVG <patterns>. Their main use is to be pasted into a <defs> Element to then be used as a fill property or stroke property. But, because its super simple in eleventy, there is also output as
You can also download each pattern as a standalone .svg file. This makes it easily usable as a background-image in CSS. We can't reference patterns as background images from inline SVG in CSS (yet). But there is also the option to use a sprite, that utlizes the <view> element to allow accessing a single pattern with a URL Fragment Identifier.
I made a simple complementary JSON output, that maybe someone can use? I wasn't sure but because I was using eleventy, doing that is super trivial. So why not.
To get a JSON response containing all available data:
https://patterns.helloyes.dev/api/patterns.json
This contains all patterns as entries.
To get a JSON response for a specific pattern:
https://patterns.helloyes.dev/api/pattern/{{ number }}.json
This doesn't contain any SVG Code. But it contains a field with a link to where the SVG code for a given pattern lives in svg. This points not to the <pattern> alone but instead to a fully working svg file that uses said pattern. Pls let me know if you would like this to work differently!
If you want to contribute to this, you are free to do so. Mainly I believe this would mean adding patterns. If you are already familiar with eleventy and how it works, then all you have to do is
- add a new entry in
src/content/patterns, check previous file names for the current naming convention. - You can add yourself as the source, but be aware that this will require you to provide an URL. Can be a codepen, a Tweet but preferrably a link from your own site, as this link will be set as a canonical URL in the single view.
- Provide the SVG Code. Make sure to set
patternUnits="userSpaceOnUse"andstroke="currentcolor" style="stroke: var(--pattern-channel-1, currentcolor)"(orfill, respectively). - And that's it.
It's rather straightfoward. It uses no external build tools but the ones provided by eleventy itself. You can utilize netlify dev to run it or just use npm run start in your terminal, which will start eleventy's serve mode and a watch task for sass too.
Should you need to build the site with npm run build, you are gonna need to install pupeteer on your system. I am using Stephanie Eckles eleventy-plugin-social-images to generate social images and if this is not installed, the build will fail.
You can also build the site without also building the social images: run-s -l clean eleventy:build sass:build.