This week: Waves, Ripples, and Wiggles
How I Started Drawing CSS Images
Sasha Tran recounts her journey of creating art in code. She started poking around Dribble, then did Codevember, then Daily CSS Images Challenge, and moved on from there. Now she's teaching via her YouTube channel.
An canvas-based image masking demo by Paul Mealy, in which a background image is revealed through painterly splotchy openings.
By very popular request, we've added the FiraCode Medium typeface to our editor font options! FiraCode is a "monospaced font with programming ligatures" designed to help you read and understand code faster.
A Pen by Andy Pagès in which he builds a carousel in React using CSSTransitionGroup.
A lovely Pen by "not important" (based on another by Darryl Huffman) and inspired by The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe.
Some lovely vector lines by Fabio Ottaviani form not only a wave, but a clipping path above text.
@jasesmith is a great follow on CodePen. Above is an image of Pen he made that explores the visual representation of fractions in geometry, inspired by a TED talk he saw. We also saw Jase at the recent CodePen Meetup Denver where he helped his daughter do a code presentation of her own!
SVG Text Animation Using Stroke Offset
Mack Ayache recreated a text effect found on Wokine.com. It's a pure CSS animation with very hand-tweaked `stroke-dashoffset` movement.
Irregular Shape Creator
Alessandro's Pen generates CSS for a uniquely-shaped element. Play with the sliders until you turn this irregular egg into the shape you want.
Wiggle World (a GSAP CustomWiggle Demo)
Craig Roblewsky's demo of GreenSock's new "CustomWiggle" lets you play with the controls on 4 different demos. Check out the nicely commented JS!
Astronaut CSS Illustration
Paul McBride's very chill astronaut drifts on a field of randomly-placed stars.
"Playing with filters to get ripples in water", from Sarah Drasner.