css-doodle是一个用来绘制CSS图案的WEB组件， 其基于Shadow dom V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。

 该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。 

Build

# build css-doodle.js
npm run build

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

# or just use make
make

一个例子

下面是来自官网的一个例子，在html中引入以下代码：

<css-doodle>
  :doodle {
    @grid: 7 / 100vmax;
    background: #0a0c27;
  }

  @shape: clover 5;
  background: hsla(
    calc(360 - @index() * 4),
    70%, 68%, @rand(.8)
  );
  transform:
    scale(@rand(.2, 1.5))
    translate(
      @rand(-50%, 50%), @rand(-50%, 50%)
    );
</css-doodle>

链接: https://www.fly63.com/nav/2017