css-doodle

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.

Example

<css-doodle>@grid: 5 / 200px;
background:@p(#000,#fff);
margin:1px;
</css-doodle>

Docs

https://css-doodle.com

Design tools

• Tabbied -- Doodle with generated patterns
• Shapes -- Discover new CSS polygon shapes
• SVG playground -- Generate SVG code with new syntax

CLI Tools

• cssd -- Preview and generate images/videos

Resources

• 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

Build

make

Support

Thank you for your support! 🙏