This week: Suits, Shields, and Star Wars
Free webinar: Slack and Atlassian
See how Slack integrates with Atlassian products to boost deployment transparency and topple communication silos that slow down development.
Cheap AI Chess!
Jake Albaugh carves out a playable chess game with a beginner-friendly AI. "A wonderful opportunity to beat a computer at chess! Play against a friend, a totally random AI, or wager money as it plays against itself. I'm sure there are still bugs in here but hey, happy new year."
Pass Strength Shield
In this form field animation from Alex Lerida, the shield gradually gets more secure with swords and a crown as your password strength increases.
Time to Drink Coffee Animation
It's coffee o'clock somewhere! Ayana pours you a cup of hot GSAP-infused joe.
CodePen Radio #298: The Top Hearted Pens of 2020 by the Numbers
Chris and Marie are on to talk stats and strategies from 2020's Most Hearted Pens.Sponsored:
Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.
For the second week of the States of Matter challenge, our host Kristopher Van Sant had us experimenting with liquids. Check out the Collection of Pens from week 2, including Joshua van Boxtel's interactive "Flood the Valley".
Pug King Bumi
"This animation is in honor of my new pug puppy King Bumi." An animated SVG illustration of a pup with a lotta personality from Christina Gorton.
Faction Toggle: Star Wars Ep. IV–VI
Pick a side in the original Star Wars with Jon Kantner's animated toggle switch.
Customer Management UI
Aysenur Turk translates a Dribbble shot by Shuvo Cold to HTML& CSS, with a little dash of JS.
Man Wearing a Suit
Alvaro Montoro continues a series of CSS illustrations with this low-profile fella. "You can uncomment the nose and mouth."
Flying lanters and a Koi fish (instancing + DataTexture)
An orange koi swims through an infinite sea of floating lanterns in this hypnotic Pen from prisoner849.
CSS Image reveal with filter & clip-path
Jhey Tompkins demonstrates CSS filter and clip-path properties with this gallery of animated image reveals.
(mysterious jazz music starts playing) "Giving an image a wavy animation with some JS and CSS." From Jarrod Thibodeau.