https://github.com/css-doodle/css-doodle

🎨 A web component for drawing patterns with CSS.
https://github.com/css-doodle/css-doodle

creative-coding css css-doodle generative generative-art patterns web-component

Last synced: 4 days ago
JSON representation

🎨 A web component for drawing patterns with CSS.

• Host: GitHub
• URL: https://github.com/css-doodle/css-doodle
• Owner: css-doodle
• License: mit
• Created: 2017-02-14T02:26:31.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2024-12-08T02:21:31.000Z (5 days ago)
• Last Synced: 2024-12-09T04:32:58.266Z (4 days ago)
• Topics: creative-coding, css, css-doodle, generative, generative-art, patterns, web-component
• Language: JavaScript
• Homepage: https://css-doodle.com
• Size: 2.78 MB
• Stars: 5,666
• Watchers: 52
• Forks: 209
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome - css-doodle/css-doodle - 🎨 A web component for drawing patterns with CSS. (JavaScript)
• awesome-starred - css-doodle/css-doodle - 🎨 A web component for drawing patterns with CSS. (css)
• awesome-list - css-doodle - doodle | 3736 | (JavaScript)
• awesome-web-components - `<css-doodle>` - Web component for drawing patterns with CSS. (Real World / Components)
• awesome - css-doodle/css-doodle - 🎨 A web component for drawing patterns with CSS. (JavaScript)
• awesome - css-doodle/css-doodle - 🎨 A web component for drawing patterns with CSS. (JavaScript)

README

        
# <css-doodle />

![Build Status](https://github.com/css-doodle/css-doodle/actions/workflows/ci.yml/badge.svg)

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

A web component for drawing patterns with CSS.



  



## Example

```css

  @grid: 5 / 200px;

  background: @p(#000, #fff);

  margin: 1px;

```

## 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

## Resources

* [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

* [Arte generativo con CSS](https://www.youtube.com/watch?v=KKg6Uo1pVLU), by Sonia Ruiz

## Build

```bash

make

```

## Support

Thank you for your support! 🙏