CSS-Doodle (opens in new tab)

(css-doodle.com)

202 pointsdsego1mo ago18 comments

https://yuanchuan.dev/an-introduction-to-css-doodle

18 comments

Author also has a blog post describing why he created this project and a high overview of what's happening behind the scenes

https://yuanchuan.dev/an-introduction-to-css-doodle

dang1mo ago

Thanks! I've added that link to the top text. There was also a past thread:

An Introduction to CSS-Doodle - https://news.ycombinator.com/item?id=40688055 - June 2024 (29 comments)

AxiomLab1mo ago

Always happy to see more tools for web-native generative art.

While I rely on Python/Cairo for heavier algorithmic brand assets, the immediacy of CSS for interactive patterns is hard to beat. The grid capabilities here look very robust for quick prototyping.

gandreani1mo ago

This is very cool. I have no idea how this one work. I'm guessing most of the magic is in the box shadow?

https://codepen.io/yuanchuan/pen/OJRqGvz

lelandfe1mo ago

Don't be fooled by the paucity of lines, that Codepen is of course pulling in an entire JS file: https://unpkg.com/css-doodle@0.34.7/css-doodle.min.js

If you inspect what's getting rendered, there's a sprite map expressed as a data URI that's doing most of the heavy lifting.

wiether1mo ago

Same

I don't understand how so few lines can produce so much different things.

And clicking on the background will just create a new random (?) background!

It seems that the aliases are doing a lot of work

gandreani1mo ago

The aliases we're tripping me up! I almost understand it now. Not sure what the @lp is doing

smusamashah1mo ago

As an aside but still relevant question, why is CSS preferred over JS when these days it can do lots of things like JavaScript and probably uses similar resources.

Minor49er1mo ago

CSS and JavaScript specialize in two very different areas and are commonly used in tandem

soperj1mo ago

You can do layouts with javascript?

Couldn't imagine ever wanting skip grid and flexbox for whatever has been concocted up for JS.

tracker11mo ago

multi-window interfaces in the browser... simulating a desktop, or other user navigable environment such as in a game or simulation, where a user my want to customize their environment beyond a grid snap.

1 more reply

k33n1mo ago

1. This isn’t CSS. It’s a declarative JS drawing framework with CSS flavor to the syntax

2. Without actual CSS JavaScript wouldn’t be of much use for drawing much of anything unless you were just going to use canvasses and forego the DOM entirely

sublinear1mo ago

I agree. This seems like it would make more sense as a canvas library unless there's a use case I'm not understanding.

Waterluvian1mo ago

If I understand this, it’s all vector space. So it avoids one of the most irritating issues with working with canvas. I love not having to think about scale or resolution or aliasing.

jtokoph1mo ago

I think there is value in making it a declarative model

webXL1mo ago

Man, CSS looks absolutely nothing like it did when I started out. lol

j / k navigate · click thread line to collapse

18 comments

binarygit1mo ago

Author also has a blog post describing why he created this project and a high overview of what's happening behind the scenes

https://yuanchuan.dev/an-introduction-to-css-doodle

dang1mo ago

Thanks! I've added that link to the top text. There was also a past thread:

An Introduction to CSS-Doodle - https://news.ycombinator.com/item?id=40688055 - June 2024 (29 comments)

AxiomLab1mo ago

Always happy to see more tools for web-native generative art.

While I rely on Python/Cairo for heavier algorithmic brand assets, the immediacy of CSS for interactive patterns is hard to beat. The grid capabilities here look very robust for quick prototyping.

gandreani1mo ago

This is very cool. I have no idea how this one work. I'm guessing most of the magic is in the box shadow?

https://codepen.io/yuanchuan/pen/OJRqGvz

lelandfe1mo ago

Don't be fooled by the paucity of lines, that Codepen is of course pulling in an entire JS file: https://unpkg.com/css-doodle@0.34.7/css-doodle.min.js

If you inspect what's getting rendered, there's a sprite map expressed as a data URI that's doing most of the heavy lifting.

wiether1mo ago

Same

I don't understand how so few lines can produce so much different things.

And clicking on the background will just create a new random (?) background!

It seems that the aliases are doing a lot of work

gandreani1mo ago

The aliases we're tripping me up! I almost understand it now. Not sure what the @lp is doing

smusamashah1mo ago

As an aside but still relevant question, why is CSS preferred over JS when these days it can do lots of things like JavaScript and probably uses similar resources.

Minor49er1mo ago

CSS and JavaScript specialize in two very different areas and are commonly used in tandem

soperj1mo ago

You can do layouts with javascript?

Couldn't imagine ever wanting skip grid and flexbox for whatever has been concocted up for JS.

tracker11mo ago

1 more reply

k33n1mo ago

1. This isn’t CSS. It’s a declarative JS drawing framework with CSS flavor to the syntax

2. Without actual CSS JavaScript wouldn’t be of much use for drawing much of anything unless you were just going to use canvasses and forego the DOM entirely

sublinear1mo ago

I agree. This seems like it would make more sense as a canvas library unless there's a use case I'm not understanding.

Waterluvian1mo ago

If I understand this, it’s all vector space. So it avoids one of the most irritating issues with working with canvas. I love not having to think about scale or resolution or aliasing.

jtokoph1mo ago

I think there is value in making it a declarative model

webXL1mo ago

Man, CSS looks absolutely nothing like it did when I started out. lol

j / k navigate · click thread line to collapse