February 13, 2026
Doodle drama, anyone?
CSS-Doodle
The web toy turning code into art — and igniting a CSS vs JS showdown
TLDR: CSS‑Doodle lets people make pattern art with CSS in any modern browser, no add‑ons needed. The comments split between awe at the visual magic and a heated “why not JavaScript?” debate, with a demo and the author’s blog helping explain what’s going on and why it matters.
The internet just found its new creative crush: CSS‑Doodle, a tiny web toy that lets you “draw” wild, animated patterns using only CSS (the styling language that makes websites pretty). It works in modern browsers without extra plugins, and the project boldly claims: “the limit is the limit of CSS.” Cue the gasps. One dazzled commenter summed up the mood with “This is very cool,” then immediately asked how the sorcery works, guessing it’s all “box shadow” trickery — and pointing to this hypnotic demo for proof.
But beneath the oohs and aahs, a classic nerd-fight broke out: should you do this in CSS at all? One voice lobbed the spicy question, “why is CSS preferred over JS,” igniting the age-old “use JavaScript for everything” crowd versus the “let CSS be art” team. Fans argue CSS‑Doodle feels like digital origami — grids, random seeds to “freeze” a look, and simple snippets that bloom into patterns. Skeptics worry it’s cute, but is it practical?
To cool the flames, another commenter brought receipts: the author’s behind‑the‑scenes blog post, explaining the how and why. Meanwhile, the memes wrote themselves: “CSS is a programming language now,” “Shadow DOM sorcery,” and “I came for the doodles, stayed for the drama.” Internet, never change.
Key Points
- •css-doodle v0.50.2 is a web component for generating CSS-driven patterns using grid-based layouts.
- •It is built on Shadow DOM v1 and Custom Elements v1 and works in major browsers without polyfills.
- •Integration options include CDN via esm.sh, ES Modules import, and npm installation.
- •The grid can be defined via the grid attribute (1–64; up to 4096 in one dimension) or via the @grid property, with multiple input formats supported.
- •The use attribute imports rules from CSS custom properties (recommended for production), and a seed attribute ensures deterministic randomness with a retrievable default seed.