今天不写代码，就看看人家是如何写代码的。
什么是css-doodle
<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。
当你看到Custom Elements、Shadow DOM和CSS Grid的时候，一定很担忧兼容问题。事实上你的担忧是正常的，因为该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。
简单点说：
该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。