March 19th: Cities, Captains, and Cats
CodePenChallenge: Dead Poets Society Roundup
We are amazed by the inspiring work you created with the Dead Poets Society theme for the #CodePenChallenge! Here's a selection of some of our favorite Pens from Week Two.Sponsored:
Check out monday.com - the visual project management tool
Oversee your team's entire workflow while organizing your design layouts, coding tasks and assets. Plan your timeline visually and communicate all in one place.
"Colorful, mouse following, SVG squiggles. Written with Typescript, GSAP and rxjs" by Steve Gardner.
From Design to Code: Creating and Animating Images with CSS
José Rosário shares his process for creating an animated CSS image, from inspiration through design and animation, in this tutorial post.
Geometric cover replication with CSS Grid, clip-path, & writing-mode
Melissa Em uses "CSS Grid, clip-path, and writing modes to replicate a vintage geometric book cover" in this striking Pen.
Sleeping Cat CSS drawing/animation
Anastasia Goodwin takes inspiration from a Dribbble shot by Linn Fritz to create an adorably snoozing CSS cat.
"Sometimes I wonder how I got here, in the red zone". A strangely ominous infinite pattern from Dave Kwiatkowski.
CreateJS: Don't touch S.A.M
Handle with care! This demo from the CreateJS team "shows off the speed/effects that can be created using CreateJS' StageGL class".
"An exploration of expressive, performant typography" by the Microsoft Edge team. Pop open the CodePen demos throughout to get a closer look at the code behind the designs.
Say Hello to Houdini and the CSS Paint API
From Will Boyd: "Houdini is an ambitious project to give developers more power over CSS than we’ve ever had before. The first piece of this project to emerge is the CSS Paint API. This article will explain why Houdini is so exciting, then show you how to get started with the Paint API."
WAAPI: Take a Ride in My Spaceship
"Part of a set of demos that tell the tale of Sleeping Beauty... in Space! This one uses the Web Animations API for a parallax effect, tying the scroll event to the animation's currentTime property", By Rachel Nabors.