Every AgnosticUI component now has a live CodePen 2.0 Pen.
One click gets you an editable React playground importing straight from the NPM package. No install, no setup.
55+ Pens. Two bugs found and squashed along the way.
Built on brand new CodePen 2.0.
#AgnosticUI #React #CodePen #OpenSource
#Development #Explainers
The CodePen Compiler · The CodePen 2.0 editor has a whole new brain ilo.im/16bcg0 by CodePen
_____
#CodePen #CodeEditor #Compiler #Builder #Website #WebDev #Frontend #HTML #CSS #JavaScript
🎛️ New CodePen Challenge entry
Interactive card builder using:
HTML min/max
CSS clamp() + minmax()
JS Math.min() / Math.max()
Pick a preset, tweak the card, launch the style, and copy the CSS.
#CodePen #CodePenChallenge #HTML #CSS #JavaScript #UI
codepen.io/Janina-Merge...
Today's doodle (another coded poem)
I started playing with the negative space left by the min/max of the curves, and then let my stream of conscious coding flow and poetry form through iteration line-by-line.
Love codepen's 2.0 editor.
codepen.io/editor/fract...
#codepen #p5js #proceduralArt
#Development #Releases
CodePen 2.0 Beta · Real-time collaboration, folders/files, blocks, and more ilo.im/16a4mu by CodePen
_____
#CodePen #CodeEditor #Collaboration #IDE #Cloud #WebDev #Frontend #HTML #CSS #JavaScript
#Development #Reviews
Trying the new CodePen 2.0 · “A bit confusing at first, but it’s really powerful.” ilo.im/16azr0 by Cassidy Williams
_____
#CodePen #CodeEditor #CodeSnippets #WebDev #Frontend #HTML #CSS #JavaScript
10 Cool Codepen Demos: February 2026
alvaromontoro.com/10-cool-code...
3D animations, particles with Three.js, shaders, color pickers, games, impressive graphs with CSS... and more!
#webdev #javascript #html #css #codepen
Over the last few weeks, We've been working on a 3D holographic ticket that uses CSS only to fake the effect. It came out so much better than I expected!
It'll be on the website soon: sotoh.openhomefoundation.org
See how it's made: codepen.io/openhomefoun...
#CSS #3D #Holographic #Codepen #Web
10 Cool CodePen Demos – January 2026
alvaromontoro.com/10-cool-code...
Generative Art for Genuary, corner-shape, border-shape, polls about the future of CSS, sticky figures... and more!
#webDev #javaScript #css #html #threeJs #p5js #codepen
My entry for this week's #Codepen challenge — using progress(), sibling-count(), sibling-index() and more. Resize the browser to spread the fan: codepen.io/stoumann/pen...
Un exemple avec le paramètre sticky en #css - Ici une galerie avec un bloc qui devient fixe à une certaine valeur. Idéal pour les pages produits par exemple... #code #html #codepen #webdesign
Built this repeating background pattern with css-doodle.
Check it out on @codepen.io 👇
codepen.io/armanb/pen/V...
#css #cssdoodle #codepen #creativecoding #webdev
A bouncing ball using CSS anchor-positioning and a simple rotate and resize animation on the anchor.
See the demo on #codepen codepen.io/cbolson/pen/...
https://codepen.io/alsorew/pen/dPXWmed
Hover or tap inside the blue line to discover the secret.
(You can make the animation smoother, but it would require a lot more work. Nah.)
#SteamDeck #VoidLinux #CSS #PureCSS #CSSAnimation
Just gave my CodePen profile a makeover via custom CSS.
Gosh, I love frontend development.💟
codepen.io/kolonatalie
#CodePen #Frontend #CSS3 #Glassmorphism #JuniorDeveloper
Another animation-timeline descrambling pen.
See the demo on #codepen (link in first comment)
A bit of #FridayFun #SVG for you, now out on #CodePen:
Parallax Astroid Morphs
codepen.io/StartAutomat...
From vNext of #Turtle 🐢
Draw a bunch of overlapping right triangles.
Then morph all of them but the edges to smaller triangles.
Then 🤯
Enjoy!
Still impressed I could upload a whole #PechaKucha on #SVG to #CodePen....
codepen.io/StartAutomat...
Should I make more #PechaKucha with #PowerShell?
Another day, another #CodePen with #SVG made from #Turtle in #PowerShell
StarFlower Morphs look sweet!
codepen.io/StartAutomat...
psturtle.com/Commands/Get...
Ok #CodePen, I'm actually kinda impressed. 👏
Just uploaded my 2025 #PechaKucha on #SVG (in #SVG) to CodePen
codepen.io/StartAutomat...
2422 lines
665kb
20 "slides"
20 seconds a slide
6:40 of animations about why SVG is awesome.
🙏 check it out and learn about #Graphics
Another day, another #CodePen example of #CSS gradients and #SVG built with #Turtle 🐢
codepen.io/StartAutomat...
Turtle examples:
psturtle.com/Commands/Get...
Gradient examples:
mrpowershell.com/CSS/Gradients
Moment of truth... does my #PowerShell > #JavaScript / #HTML / #CSS Digital Clock #CodePen render a preview image of the current time on #AtProto / #BlueSky?
codepen.io/StartAutomat...
Sadly, no 🫤. Pen works fine.
Put out another #CSS gradient onto #CodePen
This is the same interference pattern animation, just with a bit more color:
codepen.io/StartAutomat...
The #WebDev trick - make properties for -rx and -ry, and then animate them to morph the ellipse
Put a cool example of the #CSS gradients I've been making up onto #CodePen. Just sharing the #MathArt/ #WebDev / #WebDesign fun.
This is a slow moving gradient pattern in pure CSS
codepen.io/StartAutomat...
Should I do more CodePens?
Is there an #AtProto alternative yet?
Watch at: youtu.be/nTXJ4lejb7A
Play at: codepen.io/PImaginator/...
#youtube #youtuber #youtubechannel #codepen #html #css #frontend #interactive #square #circle #shapes #colorful #program #programming #code #coding #creative #creativecoding #creativecodingart #nerd #geek #computer #cool #color
