Basic Pattern Repository

Basic Pattern Repository is a free, open-source library of hand-made, tileable SVG patterns built with Eleventy, offering multiple ways to use each pattern: copy-paste <pattern> elements, standalone SVG files, a sprite with URL fragments, and a JSON API.

What is Basic Pattern Repository?

Basic Pattern Repository is a static website and collection of simple SVG <pattern> elements created as a side project by a developer (name not disclosed). It runs on Eleventy (11ty) and is deployed on Netlify. The repository accepts contributions of new patterns via pull request, following a documented naming and code convention. The project is licensed under GPL v3, and its source code includes SCSS for styling and a small vanilla JavaScript footprint. The GitHub repository has 270 stars and describes itself as Simple patterns for <use>. Just SVG - for your delight!.

Key Features

Basic Pattern Repository offers multiple distribution formats and development niceties.

• Copy-paste SVG patterns — Each pattern is provided as an inline SVG <pattern> element that you can drop into a <defs> block and use as a fill or stroke property without importing any external file.
• Standalone SVG downloads — Every pattern can be downloaded as its own .svg file, suitable for use as a background-image in CSS, since CSS cannot directly reference patterns from inline SVG.
• Sprite with view-based URLs — The repository outputs a sprite that uses <view> elements, letting you reference a single pattern via a URL fragment identifier, so one file can serve many patterns.
• JSON API endpoints — A complementary JSON endpoint at https://patterns.helloyes.dev/api/patterns.json returns all patterns as entries; a per-pattern endpoint returns metadata including a link to a fully working SVG file that uses the pattern.
• Recolorable via CSS variables — Patterns are written with stroke="currentcolor" style="stroke: var(--pattern-channel-1, currentcolor)" (or fill), so colors can be overridden by users or themes.
• Eleventy-based static generation — The site uses only Eleventy's built-in build tools plus a Sass watch task; npm run start serves the site, while a full build also generates social images via the eleventy-plugin-social-images plugin and requires Puppeteer.
• Clear contribution workflow — Contributors add a new file under src/content/patterns, provide an SVG with patternUnits="userSpaceOnUse", and optionally attribute themselves with a canonical URL (e.g., a personal site, CodePen, or Tweet).

Who should use Basic Pattern Repository?

It's aimed at developers and designers who need reusable, themeable SVG patterns without rebuilding them.

• Web developers who want to add subtle, scalable background patterns to their projects without hand-authoring SVG shapes — they can copy a pattern directly into inline SVG.
• Designers building themeable sites who need patterns that respect user-selected colors via CSS custom properties, since the patterns are designed to accept overrides.
• Eleventy users looking for a compact, open-source example of a multi-format statically generated site (SVG, sprite, JSON) with a Netlify deploy and social image generation.

What can you do with Basic Pattern Repository?

You can use the patterns in three main ways: inline in SVG, as CSS background images, or via the JSON API.

• Front-end developers: paste a <pattern> snippet into your HTML's <defs> and reference it as a fill or stroke on any SVG shape, keeping the pattern inline and fully themeable.
• CSS-focused developers: download a pattern as a .svg file and use it as a background-image, which works in any browser without requiring inline SVG at all.
• API consumers: fetch https://patterns.helloyes.dev/api/patterns.json to get programmatic access to the pattern list, or query a per-pattern endpoint to retrieve a link to a working SVG file.

How does Basic Pattern Repository work?

The project is built with Eleventy from content files stored in src/content/patterns. Each entry follows a naming convention and contributes to multiple output formats: a copy-paste snippet, a standalone SVG file, a sprite with view URLs, and JSON data. To run locally, use npm run start (serves the site and watches Sass), and build with npm run build after installing Puppeteer for social image generation (or use run-s -l clean eleventy:build sass:build to skip images).