October 23rd: Hexagons, Waves, and Metaballs
Sea Debris Concept
Adam Kuhn's animated shark does its best to swim through a sea of debris in this thought-provoking animated Pen.Sponsored:
The complete project management platform for agile teams.
Post About Your Pen
Our very own Rach Smith put out a community challenge: "After you code a Pen or a Project, pick one part of the code you can explain and write a post about it". Rach is gathering up responses to the challenge on a new website (built in CodePen Projects!).
"Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs." Varun Vachhar gets into the practical math behind building these delicious morsels.
CodePen Radio #147: Charlotte Dann
On our latest podcast episode, Rach and Marie talk to front-end developer and jewelry designer Charlotte Dann about Hexatope, her project for designing jewelry with hexagonal generative art.
Example.js | 1 - Basics
"[A] small guide intended to aid you in learning JS by quickly scrolling through incrementally complex examples, that subtly introduces new concepts over time." from Matei Copot.
CSS3 Perspective Playground
Get a little perspective on your CSS with this perspective visualizer by Mehmet Burak Erman.
Seamless Loop SVG stroke Animations
Craig Roblewsky shows you how to draw a stroke and loop it around your SVG element infinitely with GreenSock's TweenMax and DrawSVG plugins.
Breakdown of a calc() for a Square Grid
Lasse Diercks demonstrates how to use calc() along with CSS grid to create an HTML component that "turns every child into a square".
SVG Waves with feDisplacementMap
CodePen community superstar Gabi gives us an in-depth look at how to create hypnotic waves in SVG, with both static and animated examples.
VMIN for Canvas
"If the canvas was a div or any other kind of HTML element we could just set it's width and height css properties to be 80vmin and call it a day, but that's not how canvas works." Derek Morash shares how he created a vmin-like function in JS.
Full-Screen Unsplash Slideshow
Brian Haferkamp explains how he built a beautiful full-screen photo slideshow with the Unsplash API.