css-doodle/css-doodle

A web component for visual art and creative coding

Summary

css-doodle is a JavaScript web component that turns a CSS-like syntax into a grid of cells, letting you draw generative patterns, backgrounds, and icons by mixing grid rules, math, and randomness. It is released under the MIT license and ships with browser-based tools, an SVG mode, and a separate command-line tool called cssd for export.

What it is useful for

The component is built for visual art and creative coding on the web. You define a grid with directives like @grid and @size, then style each cell with regular CSS plus helper functions such as @r() for random values, @pn() for picking from a list, and @doodle2000() for nesting one doodle inside another. The README's hero example combines an SVG filter, oklab colors, random clip-paths, and a keyframe animation to generate a wall of pastel shapes that blink. According to the README, Tabbied uses it to produce generated patterns for prints and wallpapers. It also suits prototyping decorative backgrounds, hero illustrations, or repeatable icon sets without hand-placing every element.

How engineers can use it

The README points to the "Getting started" guide at css-doodle.com/getting-started for end-user setup, but the documented development workflow is:

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

make runs both. The README's example shows the runtime shape: a <css-doodle> element whose body holds the rules, e.g.

<css-doodle>
  @grid: 4 / 480px / blue +.75;
  border-radius: @pn(100% 0, 0 100%, 50%);
  background: #fff;
</css-doodle>

For iteration, the Playground at css-doodle.com/new/ lets you edit and share doodles in the browser, and the Shapes and SVG playground pages help with polygon and SVG code. A separate cssd CLI at github.com/css-doodle/cli is listed under Tools for previewing and exporting to image or video.

Documented limitations: it is a single-purpose art component rather than a general UI library, and the custom at-rule syntax adds a learning curve on top of standard CSS, so you will likely want the reference page at css-doodle.com/reference/ open while authoring. No browser support matrix is provided in the README, so you should verify compatibility for your target environment yourself.