# css-doodle

![license](https://img.shields.io/github/license/mashape/apistatus.svg)


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.


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

## Example

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

## Docs
[https://css-doodle.com](http://css-doodle.com)


## Design tools

* [Tabbied](https://tabbied.com) -- Doodle with generated patterns
* [Shapes](https://css-doodle.com/shapes) -- Discover new CSS polygon shapes
* [SVG playground](https://css-doodle.com/svg) -- Generate SVG code with new syntax


## CLI Tools

* [cssd](https://github.com/css-doodle/cli) -- Preview and generate images/videos


## Resources

* [An Introduction to css-doodle](https://yuanchuan.dev/an-introduction-to-css-doodle), by Yuan Chuan
* [Arte generativo con CSS](https://www.youtube.com/watch?v=KKg6Uo1pVLU), by Sonia Ruiz
* [How to Draw Patterns with CSS Using CSS Doodle](https://webdesign.tutsplus.com/tutorials/how-to-draw-patterns-with-css-using-css-doodle--cms-33110), by Adi Purdila


## Build

```bash
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>