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

• An Introduction to css-doodle
  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.
• How to Draw Patterns with CSS Using CSS Doodle
  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().
• Arte generativo con CSS
  Talk by Sonia Ruiz, 2020, in Spanish (31 min). An introduction to generative art, where algorithms produce the work, made with CSS.

Development

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

make 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! 🙏