RT Jhey 🔨🐻✨
CAPTCHA built with HTML Drag and Drop API 😅
Because you can learn a lot from building fun things ✨
🛠 HTML Drag and Drop, CSS Grid, CSS Houdini, JavaScript Audio
✨ feat. @philhawksworth as the Moon 🌝
🎁 presented at @heypresents
👉
http://codepen.io/jh3y/pen/BarjgLO
RT Jane Ori 💜 CSS Contortionist
A little late for the #CodePenChallenge last week but here's Checkers implemented in 100% CSS - NO JS!
Been sitting on this SMEAR idea for almost a year, and there's more to it than I used here, buuuut it makes infinite generation CSS games possible.
https://codepen.io/propjockey/pen/JjLKqGa?editors=1100
RT David Fitzgibbon
Made this codepen trying to recreate the amazing work @basementstudio did for @vercel
https://cdpn.io/pen/full/RwMRyEd/a3e6ee2d85606a33e0fd441810bf5ecc
RT Shaw
Fun @CodePen demo using CSS Variables and conic-gradients.
https://codepen.io/shshaw/pen/VwreGGg
The July #CodePenChallenge continues!
This week, we're playing with dominoes & dice 🁫⚁
Thanks @sourcegraph for sponsoring!
https://codepen.io/challenges/2022/July/2
RT Chris Gannon
Knot Loader @CodePen
@LottieFiles
https://codepen.io/chrisgannon/pen/jOzqZwY
https://lottiefiles.com/112215-knot-loader
RT Stef Walter
#SVGFilter
This is really fun (be careful if you use it though it makes the text unreadable pretty fast): a turbulence SVG filter by @simoncoudeville
➡️
https://codepen.io/simoncoudeville/pen/zYRygaV?utm_source=stephaniewalter.design&utm_medium=weeklylinks
https://twitter.com/WalterStephanie/status/1544924362603732995
RT Louis Hoebregts
Animating 200 input range on every frame because... why not? 😄
Check the demo and try changing some of the #noise values 👩🔬 @CodePen
https://codepen.io/Mamboleoo/pen/YzaqPpd
RT Jon Kantner
Animated Vertical Alignment Buttons
https://codepen.io/jkantner/pen/xxWZeLz
RT Nik Lever
#ThreeJS Tip 7:
If a loaded model is not visible it may be a scale problem. Get its minimum and maximum axis-aligned position using the Box3 class.
const bounds = new THREE.Box3();
bounds.setFromObject(object);
Line 56 in CodePen example.
https://codepen.io/nik-lever/pen/RwMraGG
RT Hyperplexed
Fancy staggered grid effect with a gradient background.
Link:
Tutorial:
#codepen #codepenchallenge
https://cdpn.io/zYWvXMM
https://youtu.be/bAwEj_mSzOs
RT Dr Abstract
Yay! @CodePen has a #CodePenChallenge for games this month starting with Checkers/Chess. We did a sort of crazy automatic game - not following the rules but like two kids having fun!
#Canvas #JavaScript
#ZIMjs
https://codepen.io/zimjs/pen/xxWZPrq
RT T. Afif @ CSS Challenges
🎮 CSS Game!
A CSS-only Music Game? 🎵🎶 Yes it's possible!
✅ 0 JS
✅ 0 image
✅ 0 <input>
⚠️ Chromium only
⚠️ Very addictive 😬
Demo:
Sounds On 🔊 and Click the Circles! 🟣 🟠
Can you make it with 0 miss? 😼
/Inspired by @osugame
#CSS
http://codepen.io/t_afif/full/NWYxbwM
https://twitter.com/ChallengesCss/status/1544642232350916608
RT Yoav Kadosh
I made an interactive & responsive SVG graph (no external libraries used).
It's a fully configurable React component, that you can use in your apps.
See it on @CodePen :
https://codepen.io/ykadosh/pen/GRxoWMR?editors=0110
RT Matan Sanbira
doing a thingy for the #CodePenChallenge 😋
https://codepen.io/MSanbira/pen/eYMpqvy
https://twitter.com/StudioSanbira/status/1544610341757272064
RT Jhey 🔨🐻✨
Re If you want to animate a multi-color gradient on a boxy shape, things are easier ✨
You could do it all via one pseudoelement and apply your "blur" and "brightness" through the "filter" property 🤘
👉
http://codepen.io/jh3y/pen/ZExQJmx
RT Jamie Coulter
Hey friends👋. Sorry it's been so long since I did anything. I intend to be a little more active over the coming months. As a start, here's a little sneak preview of an upcoming game I'll be releasing on @CodePen in the next few days. 🎮
https://twitter.com/jamiecoulter89/status/1544431967005032450
RT Abdullah Türkmen
Css is Art
https://codepen.io/abdullahturkmen/full/ExEVeNp
https://twitter.com/muhendizolcam/status/1544646500420124672
"Noisy ghost (WebGL shader)" by Ksenia Kondrashova
https://codepen.io/ksenia-k/pen/QWmjgWX
Build, test, and discover front-end code 👩🏽💻