#codepenchallenge — Public Fediverse posts

Hey, I made a thing for this week's complementaries challenge on @codepen: https://codepen.io/thebabydino/details/myeQXjo

(if you're a Ko-fi/Patreon supporter, you may have already seen the pre-prettified version)

The description has a detailed "behind the demo" explanation.

Enjoy!

#SVG #filter #CodePenChallenge #CSS #cssMask #svgFilter #JS #JavaScript
#code #coding #frontend #controls #web #dev #webDev #webDevelopment

Win three CodePen Pro Starter accounts for 12 months each in #js13k 2025!

https://js13kgames.com/2025/prizes#codepen

#gamedev #gamedevjs #CSS #CodePen #Pro #Starter #CodePenChallenge #playground #sandbox

Codepen asked for spirals -

did I miss any? (no I didn't do ulam - should I?).

https://codepen.io/fractalkitty/live/MYwzROr/5517a9002126749dc03b84e2eceef51c

#codepen #spirals #codepenchallenge #cpc-spirals #math #spirals #mtbos

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

#clipPath #cssClipPath #code #coding #web #dev #webDev #webDevelopment #frontend #cssPattern #cssPatterns #cssGradient

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with 🖤 for this week's #CodePenChallenge.

cc @bramus

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

hue: light, medium, dark (rock,paper,scissors) roller with automata

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

#codepenchallenge #rockpaperscissors #gol

Selective saturation with a bit of #SVG filter magic! 🪄

You may have seen this effect - all is black & white in the image save for something in a vibrant colour. We can do it directly in the browser!

Interactive demo on @CodePen https://codepen.io/thebabydino/full/GRedmQg

#CodePenChallenge #svgFilter #filter #CodePen #code #coding #frontend #webDev #web #dev #webDevelopment #selective #saturation

RT simey
the @CodePen #CodepenChallenge entry this week;
https://codepen.io/simeydotme/pen/bGQVypm
THE IRON TRIANGLE. ⚡️💵🌟
#sliders #html #inputs
#webdev #frontend #js #css #range #input

:sys_twitter: https://twitter.com/simeydotme/status/1668918624877432832