RT Chris Gannon
Claymorphic SVG button @CodePen
https://codepen.io/chrisgannon/pen/rNGqLmK
RT Louis Hoebregts
New week, new #CodePenChallenge! 🐶
For this demo, I exported a 3D model made of particles in an #SVG with 5000
<circle>
elements ✨
Each circle's colour and delay are defined with a simplex #noise algorithm (updated on each repeat) 🔁 @greensock
https://codepen.io/Mamboleoo/pen/mdBGydM
</circle>
https://twitter.com/Mamboleoo/status/1480965363902914560
RT Shaw
Fun @CodePen Trick: Turn syntax-highlighted code examples (even server-side rendered) into a dynamic CodePen embed on demand! Perfect for making documentation interactive without having dozens of embeds loading automatically.
RT Jon Kantner
Created a concept of a neumorphic Fitbit UI
https://codepen.io/jkantner/pen/poWxOVY
RT Yannick
Just finished refining my pen for last week's #CodePenChallenge: random generative art 🎨.
It applies a random style to a chosen image using TensorFlow JS and TFLite. Props to the @Tensorflow team, it was super easy to get started 🚀🙌.
https://codepen.io/Coderesting/pen/YzrOOzp
RT Jhey 🔨🐻✨
OK. I definitely had too much fun putting this together for 10 minutes 😂 This is what it's all about 🙌
It has evolved slightly but I need to go to the gym 😅
Celine Dion is the "perfect" addition for adding this whimsical touch ✨
👉
Jhey 🔨🐻✨: 📢 JavaScript/Whimsy Tip! ✨
Do you know about the PageVisibility API? 🧐
Lean into browser APIs like this to give your sites and apps a little character 😎
This code would play audio when a user navigates away from your page 🚀 What else could we do?
Demo link below 🔗
RT CSS Challenges
🏆 CSS Challenge
This week #CodePenChallenge is about noise so here is a CSS-only noise effect!
Give your image an old-style looking with a few lines of code.
Demo:
#CSS
https://codepen.io/t_afif/pen/GRMYjYx
https://twitter.com/ChallengesCss/status/1480629718533746693
RT George Francis
Holy s*** there's some cool generative art floating around @CodePen at the moment! Here's a small handful of my favorites✨
"Summery Tiles" by @natszafraniec
"Vaporwave Sketchbook" by @cassiecodes
"Generative Gooey Flow Fields" by @cobra_winfrey
🔥 🔥 🔥
https://twitter.com/georgedoescode/status/1480556516491026433
RT Álvaro Montoro
A burning match in CSS and a single HTML element.
https://codepen.io/alvaromontoro/full/RwLYzeR
https://twitter.com/alvaro_montoro/status/1480520092979011592
RT Chris Gannon
Camera Icon 🎥 @CodePen
https://codepen.io/chrisgannon/pen/NWaLVzG
The generative art #CodePenChallenge continues 🎨
This week, let's make some noise! 📣
https://codepen.io/challenges/2022/january/2
RT Johan Karlsson
Something that really is one single curve: Drawing Machine on @CodePen
(I made it several weeks ago)
Click to generate a new random image!
Two spinning wheels controls the motion of an arm that holds the pen, the paper spins too.
#genuary #genuary2022
https://codepen.io/DonKarlssonSan/pen/dyVOxGQ
https://twitter.com/DonKarlssonSan/status/1479802129904721921
RT Cassie Evans
✍️ 'lil generative vaporwave sketch for this week's @CodePen challenge.
Making heavy use of some fun SVG textures and @greensock's handy random utility function.
https://codepen.io/cassie-codes/pen/vYerjmr
RT Jhey 🔨🐻✨
3D CSS Parallax Headshot! 😮
- Powered by custom properties 💪
- Built into a configurable @reactjs component 🧱
- Integrated with @tailwindcss layers
A sprinkle of
👉
http://jhey.af/
http://niall.af/
http://codepen.io/jh3y/pen/wvrxOPr
RT Ana Tudor 🐯
See me code a little thing for this week's #CodePenChallenge: uniform distribution of dots on a disc
Can you figure out how to do it properly, avoiding middle clustering before watching?
Live on @CodePen:
&
https://youtu.be/AvpbYzGS0dM
https://codepen.io/thebabydino/pen/NWazdyL
https://codepen.io/thebabydino/pen/ExwRZQj
RT Johan Karlsson
#genuary 7 on @CodePen:
Sol LeWitt
Wall Drawing 118
I cheated and made the transparency proportional to the length of the line. 😇
#genuary2022 #creativecoding #generative ❤️
https://codepen.io/DonKarlssonSan/pen/abLjqYj
https://twitter.com/DonKarlssonSan/status/1479439504750616579
RT Louis Hoebregts
How much hair with your fox, 50k - 100k - 200k?
@threejs @CodePen #webgl
https://codepen.io/Mamboleoo/pen/qBPyqKg
RT ilithya
S02 E03 #curiouslyminded ✨
Last year @iamelizasj and I said goodbye to 2021 with our last guest by having the crazy talented @mattdesl joining us. I enjoyed this session so much! (might be biased, as a designer)…
https://codepen.io/ilithya/pen/zYEqbPa
https://twitter.com/ilithya_rocks/status/1479220634702032897
RT CSS Challenges
🏆 CSS Challenge
A new entry for the #CodePenChallenge. Another CSS-only generative art.
Demo:
#CSS
https://codepen.io/t_afif/pen/jOGprqz
https://twitter.com/ChallengesCss/status/1479199091875848193
RT Trapti Rahangdale
#codepenchallenge Image gallery with SVG, FLIP and GSAP.
https://codepen.io/tripti1410/full/WNZyWmv
Build, test, and discover front-end code 👩🏽💻