Awesome

<css-doodle />

license

A web component for drawing patterns with CSS.

<a href="https://css-doodle.com/"> <img alt="screenshot" src="https://assets.codepen.io/52982/doodle.png" /> </a>

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

Resources

How to Draw Patterns with CSS Using CSS Doodle, by Adi Purdila
Arte generativo con CSS, by Sonia Ruiz

Build

make

Support

Thank you for your support! 🙏

<a href="https://opencollective.com/css-doodle#backers" target="_blank"><img src="https://opencollective.com/css-doodle/backers.svg?width=890"></a> <a href="https://opencollective.com/css-doodle#sponsors" target="_blank"><img src="https://opencollective.com/css-doodle/sponsors.svg?width=890"></a>