January 21st: Filters, Factories, and Floss
Bob Ross Doing the Floss, Like a Boss (Pure CSS)
Bob takes a break from painting to do some happy little dancing in this charming animated Pen from Steve Gardner.Sponsored:
Georgetown Master's in Design Management
Our part-time and online master's degree prepares you with the business skills and creative thinking strategies you need to maximize impact.
Crank out your own custom emoji at Olivia Ng's emoji factory! "About halfway through, I realized how much easier this will be with SVGs instead of CSS, yes. But I was in too deep..."
#CodePenChallenge: Primary Colors 🍎
We went back to basics for week two of the color palettes challenge! Check out the Pens from the primary colors prompt, including halvves' "Random Bauhaus".
Introducing Prefill Embeds!
We just launched a new way to create CodePen embeds on your website. Now you can manage your embeds directly in your site's code!Sponsored:
The simple, secure, send in seconds eSign
HelloSign is the #1 rated eSignature tool. It's the easiest way to sign docs, forms or agreements online. Try it free today!
Harry Potter Puppet Pals: Bother
Christina Gorton "used SVG and GreenSock to create a version of the Harry Potter Puppet Pals episode Bother."
CodePen Radio #206: Prototyping with Dave and Trent
Dave Rupert and Trent Walton crossover from ShopTalk Show to talk about how they use CodePen PRO to build better websites for their clients at Paravel, Inc.
Simplify a Bar Wave Animation
Ana Tudor demonstrates a way to simplify the CSS for a bar wave animation in this live coding video on YouTube.
React’s Hooks in 5 Minutes!
Jhey Tompkins helps you "leave classes behind and grasp this API" in this tutorial post with lots of helpful embedded demos.
New Slack Logo Collection
Hey, did you hear that Slack changed their logo? The CodePen community got right to work and created CSS versions of the new logo, and paid tribute to the old.
Recurrent Neural Network - Rock, Paper, Scissors
"The network learns your pattern of play and tries to guess your next move. I also use a feed-foward network to decide how the computer feels about how the game is going" from Andrew Worcester.
Day 5: Scalable 3D Range Sliders
Gradient Map Filters on Video
Yoksel demonstrates how SVG gradients can work as video filters in this eye-catching fishtank Pen.