"Whirling" by @yuanchuan featured on CodePen

https://fosstodon.org/@codepen/115695933051841872

#cssdoodle #codepen #css

10 Cool CodePen Demos from November 2025: Cards, whimsical components, shaders, directional aware icons, CSS art, prototypes and experiments with new web features... and more!
https://alvaromontoro.com/10-cool-codepen-demos/2025/11/

#javascript #css #html #gsap #svg #webdev #codepen

Anchor Positioning Demo (of my)
#css #codepen
https://codepen.io/iamdtms/pen/raeGeRy

Anchor Positioning Demo #codepen
https://codepen.io/iamdtms/pen/raeGeRy

💪 Creare un clone di Codepen minimale
Un semplice snippet HTML che include CSS e Javascript in grado di riprodurre in minima parte le funzionalità di Codepen...

👉 https://www.selectallfromdual.com/blog/1684

#codepen #css #html #javascript #snippet

I had many times the problem that grid gaps appear double when a inner container is missing. I played a bit with has() and not() and found a solution without JS. The selector checks if a child is there and sets the layout clean. It also works with media queries.
Here is the small Codepen to show it in action.

If you can even simplify them let me know.

https://codepen.io/polent/pen/emZRdaz

#CSS #Grid #Codepen #Gap

Right-angled triangle - tan() #css #codepen
https://codepen.io/monknow/pen/yyeogJy

Single HTML element toggle switch: Lock

Demo on @codepen: https://codepen.io/alvaromontoro/pen/myVjpyb

#css #html #component #codepen

CSS "Shimmery" play button, inspired by sunlight projected onto my wall through shifting tree branches. The preview may be confusing because it is animated and may, depending on your mastodon client, have a real play button on top of my animated one.

UPDATE: I added a second design option to the CodePen that I call “Swimming Pool”. Check it out using the selector below the demo.

https://codepen.io/wonkeythemonkey/pen/ByjrZjz

#css #webdesign #webdev #codepen #cssanimation

Got bored. Made this. https://codepen.io/cheeaun/pen/OPMvRJO

Seems to work best on Firefox. Weird bottom margin on Chrome. Laggy on Safari. #CSS #Marquee #Codepen

Game done in 17 moves. https://codepen.io/H-L-the-lessful/pen/XJmbJdg?editors=1010
No idea if this is a good score...
#codepen #arcade #hanoitower

Today's #mathober - Monotonic

#mathart #codepen #mathober2025 #spiral

https://codepen.io/fractalkitty/pen/pvgrWxY

Today - I played with Hermite Polynomials on Radial Graph paper:

https://codepen.io/fractalkitty/pen/KwVvppe

#mathart #mathober #mathober2025 #codepen #p5js #creativeCoding

Today's #mathober

Stellations

https://codepen.io/fractalkitty/pen/vELZQXr?editors=0110

#mathober2025 #mathart #codepen #creativeCoding #proceduralArt

Deviation coded sketch for #mathober

https://codepen.io/fractalkitty/pen/YPwpyYW?editors=0010

#mathober2025 #proceduralart #geodesicDeviation #mathart #codepen #creativeCoding

Mathober Day1 - Link

It's also somewhat transparently drawn in a lot of places - so I'm counting it for weird web October as well.

https://codepen.io/fractalkitty/live/gbPwGwY

stream of consciousness code - so it's a mess

#mathober #mathober2025 #codepen #p5js #creativeCoding #proceduralArt #weirdwebOctober

Did you know you could get the number of `auto-fit` columns of a grid by dividing the grid width (known to the grid's children/ pseudos as `100cqw` if we make the grid a container) to the unit column width `--u`?

See the live demo on @codepen https://codepen.io/thebabydino/pen/zxGyRZX

No Firefox yet... and the bug 🪲 looks like it's dormant 😿 https://bugzilla.mozilla.org/show_bug.cgi?id=1827404

#CSS #layout #cssLayout #cssMaths #grid #cssGrid #code #coding #frontend #calc #web #dev #webDev #webDevelopment #CodePen #FirefoxBug #bug

I’m going to make an effort to post a new CodePen every day through October.

I haven’t been doing nearly enough creative coding as of late, so it’ll be nice to have an outlet.

Here is day one: https://codepen.io/OuterVale/pen/ZYQOmog

#CodePen #CreativeCoding