Petite Patterns

Petite Patterns

Generative patterns and textures in SVG under 560 bytes

5 followers

A collection of procedural/generative patterns, textures and scenes made purely in SVG with as little code as possible. Made with Perlin noise and SVG filters.
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Petite Patterns gallery image
Free
Launch tags:ArtDigital ArtIllustration
Launch Team
Anima - OnBrand Vibe Coding
Design-aware AI for modern product teams.
Promoted

What do you think? …

Bence Szabó
Hey Producthunters! 👋 I'm Bence aka finnhvman, maker of Petite Patterns. It all started two years ago when I realized that SVG has a Perlin noise generator. I was looking for fill techniques more interesting than mere gradients in CSS. SVG filters is a pretty nice step up from that, although a bit of a downside is that they are executed on the CPU. It makes sense to generally limit the number of filters you apply. At first I figured I'll make patterns that fit in a tweet, but soon I realized I can only make a handful of those. Then I doubled the size limit to 560 bytes, and have been going ever since. My goal is to get to a 100 patterns, right now I'm at 75. Want to join for the rest of the journey? 🙂