css-doodle
css-doodle 介绍
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>
GitHub:https://github.com/css-doodle/css-doodle
网站描述:一个制作Web图案的组件