@"Grainy & Gradients text" by LukyVJ
https://codepen.io/LukyVj/pen/poOjqBv
RT Carl 💥 Creative Coding Club
99.95% of Websites do NOT need a Ferris Wheel.
I use lessons like this to show the power of combining GSAP w/ JavaScript basics like using functions to
💥generate a dynamic number elements
💥dynamically resize, position and rotate them
Demos and story of the Ferris Wheel below
"Randomized Circle Groups With Background Lines" (like Zelda!) by Paul Hebert
Demo: https://codepen.io/phebert/details/xxQrPqJ
Writeup: https://cloudfour.com/thinks/coding-randomized-zelda-patterns/
RT Ana Tudor 🐯🖤🌻
Two pure #CSS loading animations.
Check them out on @CodePen:
One https://codepen.io/thebabydino/pen/vYJQzbo
Two https://codepen.io/thebabydino/pen/mdMapbj
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy reveal animation to your image on hover
✅ No extra element (only the <img> tag)
✅ Powered by Trigonometric functions and @property
✅ Optimized with CSS variables
Demo: http://codepen.io/t_afif/full/YzRdWXQ via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1685955625254088704
RT jhey 🔨🐻✨
CSS Tip! ✨
Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥
CSS only, no JS! 🤯
.b:has(+ .b:hover),
.b:hover + .b {
flex: calc(0.2 + (sin(30deg) * 1.5));
translate: 0 calc(sin(30deg) * -75%);
}
@CodePen link below! 👇
RT Mads Stoumann
Oxygen. Rutherford Model https://codepen.io/stoumann/pen/RwqqWEE via @CodePen
RT Dr Abstract
Oooo! A @CodePen #CodePenChallenge for physics particles. Here we use the ZIM Emitter with an interactive sink that attracts the particles!
Try it out and fork it at https://codepen.io/zimjs/pen/poQxMLd - we love CodePen!
#JavaScript #Canvas #Particles #Emitter
#ZIMjs
RT Adam Argyle
I can't stop seeing #CSS View Transitions!
here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲
try it https://codepen.io/argyleink/pen/jOQKdeW
RT Jon Kantner
A toggle switch with some neon lighting
https://codepen.io/jkantner/pen/MWzqMrp @CodePen #CSS #SVG
RT Ksenia Kondrashova
Minimal wave animation on HTML5 Canvas - only 2kb (!) of vanilla JS code
All we have here is a linear interpolation from one random sine wave to the next one. Check out the code and feel free to ask questions!
Live demo & source code: https://codepen.io/ksenia-k/pen/PoxdXMJ
Hosted on @CodePen
RT Wakana Y.K.
Tonight, the bunny is in the spotlight on stage, responding to the cheers of the crowd🐰🪩✨
Particle Spotlight
Demo:https://codepen.io/wakana-k/pen/eYQjReV
@CodePen #codepen #threejs
RT Bence
Inspiration comes from Jupiter of course 🙂
Gas Giant 🪐 (560 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/jOQvYaz
RT Nicolas Jesenberger
Scratch card made with canvas and SVG filter 🎁
Demo on @CodePen: https://codepen.io/nicolasjesenberger/full/jOQGgVB
It's the final week of the Particles challenge!
This week, let's experiment with particle physics ⚛️
https://codepen.io/challenges/2023/july/4
RT T. Afif @ CSS Challenges
🎨 CSS Pattern!
Demo: http://codepen.io/t_afif/full/poQZPJM via @CodePen
#CSS
https://twitter.com/ChallengesCss/status/1682706981008572416
RT Ceramic Soda
🍁 Falling autumn leaves shader 🍁 https://codepen.io/ceramicSoda/pen/xxQJqVv via @CodePen #codepenchallenge #shader #webgl #threejs
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
Use scroll-driven animations to create an 🍏 style scrolly portfolio ✨
This is all jus' CSS 🚀 Animate numbers, 3D, etc. 🔥
Favorite part is the spinning 3D laptop inspired by a challenge from @brad_frost a while back 😅 (Watch 👀)
@CodePen link below! 👇
RT Tibix
Most of you probably don't know but i do generative art aswell 🖤
Coded in JS using three.js, check out the live version with a settings menu to style your own ✨
https://codepen.io/Tibixx/pen/poxBzYJ https://twitter.com/i/web/status/1682369572706426883 https://t.co/xbBkCvgLG2
RT Ricardo Oliva Alonso
Todos tienen un Nintendo Switch con CSS. no me podía quedar atrás 😁
Live @CodePen : https://codepen.io/ricardoolivaalonso/pen/QWJxYXE
#html #css #javascript #NintendoSwitch #3D #animation #FrontEnd https://t.co/pcjTDouimq
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
