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.
• Experimenting A New Syntax To Write SVG
  Article by Yuan Chuan, 2022. The idea behind @svg: writing SVG with CSS syntax.
• 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.
• 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().

Who uses css-doodle

• Tabbied: generated patterns for prints and wallpapers

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