January 16th: Most Hearted of 2016! Plus Castles, Calculations, and SVG Fun
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.