css-doodle: generative art written in CSS

A Dribbble pattern that outgrew its grid

css-doodle began, according to the author's own 2024 introduction article, as an attempt to recreate a Dribbble pattern using a grid of elements, and grew into a tool for generative art. The product shape follows that origin: it is a web component in which you write CSS rules for a grid of cells, mix in randomness and math, and the result is generative patterns, backgrounds, icons and decorations, all rendered by the browser's own layout engine rather than a canvas API. The audience is the person who already thinks in CSS, designers and front-end developers, who get randomness and repetition without leaving the stylesheet. The project is MIT licensed, authored by yuanchuan, and lives at css-doodle.com with getting started, reference and discover sections alongside a hosted playground.

The @ functions that turn CSS into a generator

The component's syntax extends CSS with functions that all start with @, and the README's own demo composition shows the working set. @grid sizes the cell grid, and @seed pins the random number generator so a composition can be reproduced exactly. @r() and @rn() produce random values, @p() and @pn() pick from lists, and math like @sin over per-cell values such as @dx drives motion. Colors can be composed in oklab(), clip-path values can be picked from a list, and @random() applies a rule block to a random subset of cells rather than all of them, which is how sparse details like blinking dots appear in an otherwise regular grid. @svg-filter brings SVG filters into the pipeline, and @doodle nests an entire doodle as the background of another, enabling recursion of pattern on pattern. None of this is a new language; it is CSS with a generator attached.

Playground, Shapes, an SVG mode and a CLI

Four tools surround the component. The Playground at css-doodle.com/new is where doodles are written and shared in the browser, and sharing works by encoding the whole composition into the URL, which is exactly how the README's own example links carry their code. Shapes is a dedicated explorer for discovering CSS polygon shapes. The SVG playground generates SVG code with the same syntax, so a composition can leave the browser as vector markup. And cssd, the command-line tool in a separate css-doodle/cli repository, adds preview plus image and video export, the piece that turns browser sketches into assets for elsewhere. Together they cover the loop: experiment in the playground, refine the syntax, then export through the CLI when the artwork needs to live outside a web page.

npm install, npm test, npm run build

Development on the project itself is three commands:

npm install
npm test         # unit tests
npm run build    # css-doodle.min.js

The README adds that make runs both test and build, and the Makefile confirms it with an all target over test and build, plus a rule that runs npm install when node_modules is absent. The build output is a single css-doodle.min.js, which is also the package's main export. Notably absent are runtime dependencies: the devDependencies list holds only build tooling, @swc/core, acorn and esbuild, so the shipped artifact carries no supply chain beyond the project's own code. That restraint matters for a component people paste into personal sites and demos.

Parser, generator, component: an architecture you can import

The exports map in package.json tells you the library is layered, not monolithic: besides the root, it exposes ./component, ./generator, ./parser and ./meta as separate entry points, meaning another tool can use the css-doodle parser or generator without the web component. The test directory mirrors that structure with suites for core, parser, generator, component and lib, plus a fuzz directory, and the test command runs them all through Node's built-in test runner with a dot reporter. Fuzzing a CSS dialect is a telling choice: the input is human-written generative rules, and the parser is exactly the component most likely to meet malformed creativity. acorn in the devDependencies suggests JavaScript expression parsing inside the syntax, while swc and esbuild handle the bundling side.

Three releases in four days, at version 0.54

Release cadence at time of writing is brisk: v0.53.0 arrived on 2026-09-25, v0.53.1 on 2026-09-27 and v0.54.0 on 2026-09-28, with the last repository push on 2026-09-25 and package.json already carrying 0.54.0. A changelog directory tracks the history release by release. Funding is voluntary through Open Collective, with backer and sponsor sections linked from the README, and the project ships a code of conduct alongside its MIT license. For adopters, the practical reading is that the syntax surface is still moving at the minor-version level, so pinning the exact version in a page that must keep rendering the same artwork is the safe default, and the @seed pin inside a composition complements that by fixing the randomness within a version.

Learning material in three languages

The README curates its own reading list, and it spans languages and years. An Introduction to css-doodle, by Yuan Chuan in 2024, recounts how the project started and was written up from a Groove meetup talk, with the slides on GitHub. How to Draw Patterns with CSS Using CSS Doodle, by Adi Purdila on Envato Tuts+ in 2019, is a step-by-step tutorial that installs the component and builds four demos using @grid, @size and random values from @r(). Arte generativo con CSS, a 2020 talk by Sonia Ruiz in Spanish running thirty-one minutes, approaches the same subject as an introduction to generative art made with CSS. Against the obvious alternative, a canvas-and-JavaScript creative coding library like p5.js, the difference is medium: css-doodle keeps the composition in the stylesheet where the browser's layout engine does the drawing.

Editorial conclusion

Use css-doodle when the artwork you want is pattern-like and belongs on the web platform: backgrounds, decorations and generative icons expressed as CSS a designer can read and tweak. Choose a canvas-and-JavaScript library such as p5.js when you need freeform drawing rather than grid-based layout. Verify first that your target browsers support the web component and modern CSS color and clip features the syntax leans on, and keep a noted seed so a composition you like can be reproduced exactly.

Frequently asked questions

Official sources

1. css-doodle/css-doodle on GitHub
2. License: MIT
3. Project website
4. README
5. Releases