Meet the new web component – < css-doodle /> for drawing patterns with CSS! It generates a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself.
<css-doodle /> is based on Shadow DOM v1 and Custom Elements v1. You can use it on latest Chrome and Safari right now without polyfills. The syntax of <css-doodle /> is based on CSS and provided several extra utility functions and shorthand properties for:
- JS API
Check how awesome it is on the < css-doodle /> official site.
Read also our article about CSS Blocks.