css-doodle

<css-doodle />

A web component for drawing patterns with CSS.

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
• Creating Code Art with CSS-Doodle, by Diane Cipollo
• Arte generativo con CSS, by Sonia Ruiz

Build

# build css-doodle.js
npm run build

# generate css-doodle.min.js
npm run minify

# or just use make
make

Support

Thank you for your support! 🙏

Changelog

0.35.1

• Support nested css-doodle element via @content: @doodle().

  @grid: 2 / 400px;
  @content: @doodle(
    @grid: 2 / 100%;
    background: @p(red, blue);
  );
  

• Add path animation with property draw in nomral SVG element.

  @conent: @svg(
    path {
      d: '..';
      draw: 5s;
    }
  )
  

• Change property animate to draw inside @svg-polygon.

• Change default @svg-polygon stroke color to currentColor.

• Fix sequence generator index.

• Fix negative calculation in generator functions.