RT Jhey 🔨🐻✨
Number Range Slider 🧮
A @reactjs component with @greensock ✨
New series where I build things from Instagram Reels that are designed in Figma 🚀
This one according to the comments would be easier to code. Spoiler alert: It wasn't 😅
👉
http://codepen.io/jh3y/pen/XWzmGad
RT Adam Fuhrer
"Negative space." — #Genuary2022 / Day 31
#Genuary #Generative
https://codepen.io/adamfuhrer/pen/MWOKgpq
RT Smashing Magazine
“How I make CSS art”. A wonderful deep-dive by @yosracodes.
CodePen
Article
https://codepen.io/yosracodes/pen/YzQLYOX
https://yosracodes.hashnode.dev/how-i-make-css-art
RT AdirCode
Here are two animations, both written with @SassCSS and both have 140 divs animating simultaneously
One is ID based meaning all CSS selectors target a specific element, the other is using nth-of-type() instead
The ID one is much smoother, here’s the code:
https://codepen.io/Adir-SL/pen/dyZYqdr
RT Takane Ichinose 市瀬峻峰
Infinite Cars | Car Race Game
I made similar to this game many times, bit this is my first ever #game using a game engine @phaser_
I enjoyed developing this thing. I think I learned many things.
#gamedev #gamedeveloper #webdev #javascript
https://codepen.io/takaneichinose/project/editor/AMQxen
RT Álvaro Montoro
CSS comic strip: problems at the barbershop.
Source code @CodePen:
I doubted if the first panel should read "border-radius: 100%? 0%?" But having the barber speak English and get an answer in CSS made it better for the surprised face... maybe.
https://codepen.io/alvaromontoro/full/yLPYWBv
https://twitter.com/alvaro_montoro/status/1487849694088904708
RT Chris Gannon
Claymorphic Toggle @CodePen
https://codepen.io/chrisgannon/pen/BawvjdR
RT Adam Kuhn
went and animated some svg noise. you can click to regenerate color patterns & shuffle around turbulence values if that's a thing you're into
https://codepen.io/cobra_winfrey/full/MWOWEdb
https://twitter.com/cobra_winfrey/status/1487063895420424195
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a cool rounded frame to your image with a few lines of code.
✅ No extra element and No pseudo element
✅ Only the <img> tag
✅ Easy to adjust using CSS variables
Demo:
#CSS
https://codepen.io/t_afif/pen/GROJrNw
https://twitter.com/ChallengesCss/status/1487033317283274754
RT Sophia Wood
Codepen challenge was to create art in the style of another artist that inspires you. I think you can all guess who:
click to change, press "s" to save.
#codepenchallenge #cpcartinspired
https://codepen.io/fractalkitty/live/VwrLzPJ
RT chris sev
Find and share your first @CodePen
May 2013: JavaScript Pomodoro
https://codepen.io/chris__sev/pen/zbnhm
RT Jon Kantner
Acrobatic Preloader
https://codepen.io/jkantner/pen/VwrYggy
RT Kaz
Since I saw the generative tiles by @trostcodes @natszafraniec @yuanchuan23 @chrisnager @jjcollinsworth I wanted to try my own. So here are mine, inspired by them
It's a great beginner generative art & gradients project. Tutorial coming soon
https://codepen.io/Sanja_kaz/pen/zYPxvmj
RT Louis Hoebregts
Feeling stressed today? Enjoy this soothing animation of growing plants 🌱🌺🦋
All plants are #SVG paths generated in JavaScript and animated using @greensock 🪄
Watch it live @CodePen
https://codepen.io/Mamboleoo/pen/mdqybaG
RT Elad Shechter
🤓 The difference between the #CSS values of the 'vertical-align' property, such as 'top' and 'text-top', can be confusing.
Once and for all! Here is a visual example.
@CodePen:
https://codepen.io/elad2412/pen/rNYNREr
RT Sébastien Menard
Wall Drawing 684A Cube animation ! @CodePen #CodePenChallenge
https://codepen.io/MenSeb/pen/qBVWvQG
RT Ana Tudor 🐯
One of the coolest pure CSS things I've ever made on @CodePen:
Faces don't just move/ scale, they also get distorted into different shapes - see the crimson squares that split into 2 right triangles, which then morph into equilateral ones.
https://codepen.io/thebabydino/pen/KKXYarP
RT Johan Karlsson
#genuary 25 - Perspective on @CodePen:
Click to generate a new random pattern!
Position, overlapping, size and shadow
#genuary2022 #creativecoding #generative
https://codepen.io/DonKarlssonSan/pen/WNXNNjo?editors=0010
https://twitter.com/DonKarlssonSan/status/1486029766717489152
Build, test, and discover front-end code 👩🏽💻