css-doodle
A web component for visual art and creative coding with CSS. Write CSS rules for a grid of cells, mix in randomness and math, and draw generative patterns, backgrounds, icons and decorations.
Website · Getting started · Reference · Playground · Discover
Example
Tools
- Playground: write and share doodles in the browser
- Shapes: discover new CSS polygon shapes
- SVG playground: generate SVG code with the same syntax
- cssd: command-line preview and image/video export
Articles and talks
Article by Yuan Chuan, 2024. How the project started, from recreating a Dribbble pattern with a grid of elements to a tool for generative art. Written up from a Groove meetup talk; the slides are on GitHub. Article by Yuan Chuan, 2022. The idea behind@svg: writing SVG with CSS syntax.
Talk by Sonia Ruiz, 2020, in Spanish (31 min). An introduction to generative
art, where algorithms produce the work, made with CSS.
Tutorial by Adi Purdila on Envato Tuts+, 2019. Installs css-doodle, then builds
four demos step by step with @grid, @size and random values from @r().
Who uses css-doodle
- Tabbied: generated patterns for prints and wallpapers
Development
npm install
npm test # unit tests
npm run build # css-doodle.min.jsmake runs both.
Support
css-doodle is free and MIT licensed. If it has been useful to you, consider backing it on Open Collective. Thank you! 🙏
