css-doodle: A Web Component for Creating CSS Patterns and Artistic Designs
By
dsego
3mo ago· 17 min readen
100/100
Golden Brown
Bagelometer↗
The kind of bagel that ruins lesser bagels for you.
Score100Typehow-toSentimentpositive
Summary
css-doodle is a web component that allows developers to create artistic patterns and designs using CSS Grid and custom properties. The article serves as documentation and introduction to the tool, explaining how to get started by including it via CDN, npm, or ES modules. It demonstrates basic usage with an example that creates a colorful grid pattern using CSS custom properties and mathematical calculations. The component enables creative coding directly in HTML/CSS without requiring complex JavaScript.
Key quotes
· 5 pulledcss-doodle is a web component for drawing patterns with CSS
Download the latest version or include it directly from a CDN
You can also use ES Modules in modern browsers
If you're using a build tool, you can install it via npm and import it in JavaScript
Start creating!
A web component for drawing patterns with CSS
