CodePen.IO 
@CodePen@hello.2heng.xin
Bot
Build, test, and discover front-end code 
Joined Dec 2020
RT jhey ▲
Bunny or Frog? CSS toggle 
Jus' stumbled upon this ole demo && gave it a tiny update 
Build random things because you never know when you might find them useful 
(SVG filter for "wigglyness")
GIF
RT T. Afif @ CSS Challenges
We can easily get more variation using the same code structure
Demo: https://codepen.io/t_afif/full/BaMOozG via @CodePen
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 
CSS Tip!
Create a ribbon shape with a fancy reveal effect
Only one element
No fixed size (it fits your text content)
Optimized with CSS Variables
Demo: https://codepen.io/t_afif/full/poGZGZY via @CodePen
#CSS
</div>
https://twitter.com/ChallengesCss/status/1729585668307710106
GIF
RT Ricardo Oliva Alonso
Little Bakery made with Blender & ThreeJS ...
#3d #3droom #b3d #blender #isometric #threejs #Bakery #3Danimation
Live @CodePen : https://codepen.io/ricardoolivaalonso/pen/KKJBBRd
Wish you had AI-powered code autocomplete on CodePen? It's literally free, unlimited, and easy via @codeiumdev's browser extension. Oh, and pretty darn good! Check me take it for a spin.
RT grim
Today I learned that you can just type "http://pen.new" into your browser to create a new @CodePen instance...
!!!
A look at Dilum Sanjaya's lovely Pen "Timed Cards Opening"
https://codepen.io/dilums/pen/NWodZMd
RT Mads Stoumann
So, my entry for this week's #CodePenChallenge came out as a Gradient Accident 
... but I decided to keep it! https://codepen.io/stoumann/pen/abXjqVO via @CodePen
It's the final week of the November #CodePenChallenge!
This week, let's get into a gradient glow 
https://codepen.io/challenges/2023/november/4
RT AdirCode 
NEW CODEPEN!
Pure CSS Pagination, with its own little "scroll" animation on its indicators.
Here's the @CodePen:
https://codepen.io/Adir-SL/pen/vYbrKoB
GIF
RT Nicolas Jesenberger
I kept seeing Teenage Engineering buttons on here, so I made them in CSS 
Hosted on @CodePen: http://cdpn.io/gOqzJed
GIF
Here's a way to THINK about CSS Custom Property (variable) usage: when state changes, don't re-declare entire chunks of CSS, just change the data. The original declaration updates with the new data. Not only more DRY but better reflects your intention.
https://codepen.io/chriscoyier/pen/yLZKJWq
"Space Travel" by Shunya Koide
https://buff.ly/46nRfFd
The November #CodePenChallenge continues!
This week, we dig into Y2K style 
https://codepen.io/challenges/2023/november/3
RT Kenny Krosky
Still one of my favorite @CodePen
https://codepen.io/ispykenny/pen/BaaYqYZ
GIF
RT Amit Sheen
Seven Boxes 
Just a little Friday afternoon playfulness, and a nice little exercise in synchronizing animations.
Live demo and full code on @CodePen: https://codepen.io/amit_sheen/full/jOXbLqj
GIF
RT Nicolas Jesenberger
Gooey effect made using SVG filters 
<div class="rsshub-quote">
Nicolas Jesenberger: Gooey Toggle Switch 
@CodePen: http://cdpn.io/xxmbvxL
</div> https://twitter.com/njesenberger/status/1695085833978544214
GIF
RT Adam Argyle
premade *springy* easing #CSS variables,
courtesy of Open Props and linear() 
transition:
transform 1s var(--ease-spring-5),
box-shadow 1s var(--ease-spring-5)
peep the pen 
https://codepen.io/argyleink/full/abPvZJo
GIF
RT Nicolas Jesenberger
Gooey Toggle Switch
@CodePen: http://cdpn.io/xxmbvxL
GIF
RT Kevin Powell
I've just put out a new video! Power-up position absolute with this simple technique https://youtu.be/JdNG_PtuJXM
"Rainbowluminescence" by Steve Gardner
https://codepen.io/ste-vg/pen/qBQVGEG
Bot
Build, test, and discover front-end code
Joined Dec 2020
