Drawing CSS Patterns Without Actually Writing Much CSS

You've probably spent an afternoon nudging nth-child selectors around just to get a repeating background to line up. Or maybe you've wanted a generative pattern for a hero section and ended up with a wall of hand-written rules. css-doodle takes a different approach: you describe the pattern, and it handles the repetition.

What It Does

css-doodle is a web component built around the idea of exploring CSS's creative potential in a simple, expressive way. You drop a <css-doodle> element into your page, give it a small set of instructions, and it generates the markup and styles for you. The README frames its purpose broadly: graphic patterns, visual backgrounds, handcrafted icons, and random decorations.

The example from the README is about as compact as it gets:

<css-doodle>
  @grid: 5 / 200px;
  background: @p(#000, #fff);
  margin: 1px;
</css-doodle>

That's a five-by-five grid at 200 pixels, each cell filled with black or white picked at random, separated by a one-pixel margin. No loops. No list of child selectors. No build step required to see it work—it's a web component, so it runs in the browser.

The syntax uses @-prefixed functions like @grid and @p (pick), which is where the "almost no CSS" in the tagline comes from. You're still writing CSS properties, just not the scaffolding around them.

Why It's Cool

• The abstraction is aimed at the right thing. Most CSS tooling helps you manage complexity you already have. css-doodle instead removes the boilerplate that stands between an idea and a rendered pattern. If you've ever wanted to try twelve variations of a background before lunch, that gap matters.

• Randomness is a first-class citizen. The @p() function picks from a set of values, which turns a static grid into something generative. That's a meaningfully different mode of working than writing deterministic CSS and hoping it looks interesting.

• It's a web component, not a framework. There's no React wrapper to install, no bundler config to negotiate. You can paste the element into an HTML file and see it render. For a tool aimed at visual experimentation, that low friction is the whole point.

• The ecosystem around it is small but purposeful. The README points to design tools like Tabbied for generated patterns, a Shapes tool for discovering CSS polygon shapes, and an SVG playground for generating SVG code with the new syntax. There's also a CLI called cssd for previewing and generating images or videos—useful if you want to turn a doodle into a static asset or a recording rather than shipping the component itself.

• The documentation is a site, not a README. The full docs live at css-doodle.com, which suggests the author treats this as a real tool with a learning curve rather than a one-off experiment. For a syntax this dense with @-functions, that's the right call.

• There are learning resources from other people. The README links an introduction by Yuan Chuan, a Spanish-language talk on generative art with CSS by Sonia Ruiz, and a Tuts+ tutorial by Adi Purdila. When a project's community writes its own onboarding material, that's usually a sign the tool has legs beyond the author's own use.

How to Try It

1. Head to the repository: github.com/css-doodle/css-doodle
2. If you want to build it locally, the README lists a single command:

make

1. For actual usage, start with the docs at css-doodle.com. The README's example is a good first test—drop it into an HTML file and open it in a browser.

2. If you want to explore without writing anything yet, try Tabbied to generate patterns, or the SVG playground to see the syntax in action.

3. For generating images or videos from your doodles, look at the CLI: github.com/css-doodle/cli

The project is MIT-licensed and supported through Open Collective, so if it earns a place in your workflow, there's a clear path to give back.

Final Thoughts

css-doodle isn't trying to replace your CSS workflow—it's a tool for a specific kind of work: generative visuals, decorative backgrounds, and anything where you'd rather describe a pattern than enumerate it. If your day-to-day is application UI, you probably won't reach for it often. If you do creative front-end work, make generative art, or just want a faster way to prototype backgrounds, it's worth an afternoon. The syntax takes some getting used to, but the README's example shows how little you need to write before something appears on screen—and that's usually the best way to learn a tool like this.

Follow @githubprojects for more developer tools and open source projects.