The Most Hearted of 2016!

It's that time of year again! Take a look back at the Pens, Posts, and Collections that got the most love in 2016.

Daily SVG Shape

"A Doodle a Day keeps Doctor away. Playing with SVG and Color Schemes" - by Michael Gehrmann

Castle Face

There's a lot going on in Adam Kuhn's wacky castle of perpetual motion

Vue Wine Label Maker

by Sarah Drasner "A silly demo to show how to make a wine label maker in Vue.js"

Path Length Calculator

Gabrielle Wee created this elegant tool, "useful when calculating stroke-dashoffset for animation"

Bouquet Animation

This bloomin' beauty from Jesse Crow started out as a design for a greeting card

#CodePenPGH This Week!

CodePen Pittsburgh kicks off for 2017 at Truefit on Thursday, January 19th starting at 6:30 PM. Be sure to RSVP!

Isometric Japanese Castle

Jon Kantner's stunning CSS illustration "...may look 3D, but every visible part is on a 2D isometric plane. I drew the sides of blocks by skewing rectangles -45° on the Y axis for the left and the X axis for the right. Then I did the windows in a similar fashion."

Example Motion Design Docs

Sarah Drasner shows off what documentation for motion/animation might be like. The docs are beautifully designed themselves, but more importantly, show off how you can convey this kind of information. Do's and dont's, explanations, and example code.

All-CSS Switch from #OrlandoCodePen

Marcus Burnette speedcodes a fancy iOS inspired toggle switch. It's amazing what you can do with a simple <input> and <label> with the :checked selector. Marcus was inspired by the recent meetup in Orlando!

Progress Nav

It's so satisfying to watch Hakim El Hattab's active navigation bar snake it's way down the page, showing you exactly what content is in view. SVG!

Li´l Vikings

A cute "li'l" moving puppet show. Lots of little detail here to enjoy, like the shadows, gradations on the moon, and pulsing stars.