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
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
makeSupport
Thank you for your support! 🙏
