{"id":15016464,"url":"https://github.com/nachtfunke/basic-pattern-repository","last_synced_at":"2025-07-26T01:13:23.552Z","repository":{"id":44372444,"uuid":"398666208","full_name":"nachtfunke/basic-pattern-repository","owner":"nachtfunke","description":"Simple patterns for \u003cuse\u003e. Just SVG - for your delight!","archived":false,"fork":false,"pushed_at":"2021-10-05T12:35:47.000Z","size":753,"stargazers_count":266,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T19:44:11.423Z","etag":null,"topics":["eleventy","svg","svg-patterns","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://patterns.helloyes.dev","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nachtfunke.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-21T22:18:02.000Z","updated_at":"2025-03-12T10:44:17.000Z","dependencies_parsed_at":"2022-07-12T18:19:54.355Z","dependency_job_id":null,"html_url":"https://github.com/nachtfunke/basic-pattern-repository","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachtfunke%2Fbasic-pattern-repository","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachtfunke%2Fbasic-pattern-repository/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachtfunke%2Fbasic-pattern-repository/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachtfunke%2Fbasic-pattern-repository/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nachtfunke","download_url":"https://codeload.github.com/nachtfunke/basic-pattern-repository/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253167353,"owners_count":21864631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eleventy","svg","svg-patterns","vanilla-javascript"],"created_at":"2024-09-24T19:48:55.813Z","updated_at":"2025-05-09T00:21:24.250Z","avatar_url":"https://github.com/nachtfunke.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Basic Pattern Repository\n\n[![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)\n[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)\n\nWelcome 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.\n\n## what is this\n\nThis thing is a collection of hand-made `\u003cpatterns\u003e` 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.\n\n### Copy \u0026 Paste `\u003cpattern\u003e`'s\n\nThis is what came out of this. A collection of simple, tileable SVG `\u003cpatterns\u003e`. Their main use is to be pasted into a `\u003cdefs\u003e` Element to then be used as a `fill` property or `stroke` property. But, because its super simple in eleventy, there is also output as \n\n### Download SVG File(s)\n\nYou 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 `\u003cview\u003e` element to allow accessing a single pattern with a URL Fragment Identifier.\n\n### Get from API\n\nI 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.\n\n#### Patterns\n\nTo get a JSON response containing all available data:\n\n```\nhttps://patterns.helloyes.dev/api/patterns.json\n```\n\nThis contains all patterns as entries.\n\n#### Single Pattern\n\nTo get a JSON response for a specific pattern:\n\n```\nhttps://patterns.helloyes.dev/api/pattern/{{ number }}.json\n```\n\n***\n\nThis 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 `\u003cpattern\u003e` 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!\n\n## How to Contribute\n\nIf 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\n\n1. add a new entry in `src/content/patterns`, check previous file names for the current naming convention.\n2. 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.\n3. Provide the SVG Code. Make sure to set `patternUnits=\"userSpaceOnUse\"` and `stroke=\"currentcolor\" style=\"stroke: var(--pattern-channel-1, currentcolor)\"` (or `fill`, respectively).\n4. And that's it.\n\n### If you need to get this project running locally\n\nIt'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.\n\nShould 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.\n\nYou can also build the site without also building the social images: `run-s -l clean eleventy:build sass:build`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnachtfunke%2Fbasic-pattern-repository","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnachtfunke%2Fbasic-pattern-repository","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnachtfunke%2Fbasic-pattern-repository/lists"}