A web component designed to explore the creative potential of CSS in a simple and expressive manner. It facilitates the creation of graphic patterns, visual backgrounds, handcrafted icons, and random decorations.
Website · Getting started · Reference · Playground · Discover
<css-doodle>
@grid: 4 / 480px / blue +.75;
border-radius: @pn(100% 0, 0 100%, 50%);
background: #fff;
</css-doodle>
- 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
- Tabbied: generated patterns for prints and wallpapers
- An Introduction to css-doodle, by Yuan Chuan
- Arte generativo con CSS, by Sonia Ruiz
- How to Draw Patterns with CSS Using CSS Doodle, by Adi Purdila
npm install
npm test # unit tests
npm run build # css-doodle.min.jsmake runs both.
css-doodle is free and MIT licensed. If it has been useful to you, consider backing it on Open Collective. Thank you! 🙏
