Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nachtfunke/basic-pattern-repository

Simple patterns for <use>. Just SVG - for your delight!
https://github.com/nachtfunke/basic-pattern-repository

eleventy svg svg-patterns vanilla-javascript

Last synced: 7 days ago
JSON representation

Simple patterns for <use>. Just SVG - for your delight!

Awesome Lists containing this project

README 

        
# Basic Pattern Repository



[![Netlify Status](https://api.netlify.com/api/v1/badges/02599c8e-cb6a-4689-bea4-2c3f678ba92a/deploy-status)](https://app.netlify.com/sites/basic-pattern-repository/deploys)

[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)



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.



## what is this



This thing is a collection of hand-made `` 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.



### Copy & Paste ``'s



This is what came out of this. A collection of simple, tileable SVG ``. Their main use is to be pasted into a `` Element to then be used as a `fill` property or `stroke` property. But, because its super simple in eleventy, there is also output as 



### Download SVG File(s)



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 `` element to allow accessing a single pattern with a URL Fragment Identifier.



### Get from API



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.



#### Patterns



To get a JSON response containing all available data:



```

https://patterns.helloyes.dev/api/patterns.json

```



This contains all patterns as entries.



#### Single Pattern



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 `` 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!



## How to Contribute



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



1. add a new entry in `src/content/patterns`, check previous file names for the current naming convention.

2. 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.

3. Provide the SVG Code. Make sure to set `patternUnits="userSpaceOnUse"` and `stroke="currentcolor" style="stroke: var(--pattern-channel-1, currentcolor)"` (or `fill`, respectively).

4. And that's it.



### If you need to get this project running locally



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](https://github.com/5t3ph/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`.