Latest posts tagged with #CodePen on Bluesky
Tension — my take on this week’s CodePen Challenge prompt.. String.
A string under tension.. A word held in place.. Pull a colored segment to loosen its matching letter..
#CodePen #CodePenChallenge #CreativeCoding #InteractionDesign #Typography
codepen.io/Janina-Merge...
Fluid simulation on normal HTML elements, using VFX-JS.
You can try it on Codepen (link below)
#WebGL #VFXJS #Codepen
You code a shiny new CodePen 2.0 demo, go share it on @dev.to... and it doesn't embed correctly! Oh no! 😱
Good news! There's a quick workaround you can use right now. 😀
No hacks. No waiting. Just a simple trick to get your demo embeds working again: dev.to/alvaromontor...
#CodePen #DEVCommunity
10 Cool CodePen Demos from March
alvaromontoro.com/10-cool-code...
Really impressive CSS Art, even more impressive custom selectors, new feature showcases, electronic "dash battles", scroll-driven animations... and more!
#css #html #javascript #webdev #codepen
CodePen in Gamedev.js Jam 2026
Win THREE CodePen Pro Starter accounts for 12 months each in #GamedevJS Jam 2026!
gamedevjs.com/jam/2026/#co...
#gamedev #gamedevjs #CSS #CodePen #Pro #Starter #CodePenChallenge #playground #sandbox
I spent a lot of time over the weekend trying to figure out the right workflow for using the new #codepen editor to write #Vue using Vue Router, Web Awesome, and Font Awesome. Once I figure it out, I think that I might need to write a blog post about it.
Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how […]
I noticed that @codepen lists the starter plan at $228 on https://codepen.io/pricing instead of the $96 I've been paying. The 2.0 update is nice, but that's a big bump.
#CodePen
Pylon Terrain, a noise-displaced cylinder field built with Three.js WebGPU + TSL. Animated and/or interactive, GTAO + bloom.
#threejs #codepen
RE: https://fosstodon.org/@codepen/116256265649058801
This is huge! CodePen 2.0 Deploy reminds me of the Glitch platform @glitchdotcom that shut down last year, but... with a proven business model and owner control via domain. Also an alternative to Netlify or GitHub Pages.
I love it! […]
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
Now with editable CodePen 💜
codepen.io/HejChristian...
#CodePen
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
