Waves, Ripples, and Wiggles

This week, the CodePen community's creative output had a distinctly calming vibe. Ride the waves, drift in a rippling pool, and float along in space with us.

Plus, check out the newest editor font option, new job opportunities from the Jobs board, and upcoming Meetups around the world!

How I Started Drawing CSS Images

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.
FiraCode

FiraCode

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.
Learning Shaders

Learning Shaders

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.
Jase Smith

Jase Smith

@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!
Irregular Shape Creator

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.
Astronaut CSS Illustration

Astronaut CSS Illustration

Paul McBride's very chill astronaut drifts on a field of randomly-placed stars.
Image Masking

Image Masking

A canvas-based image masking demo by Paul Mealy, in which a background image is revealed through painterly splotchy openings.
React Carousel

React Carousel

A Pen by Andy Pags in which he builds a carousel in React using CSSTransitionGroup.
Blending Motions

Blending Motions

Some lovely vector lines by Fabio Ottaviani form not only a wave, but a clipping path above text.
SVG Text Animation Using Stroke Offset

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.
Wiggle World (a GSAP CustomWiggle Demo)

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!
Pool Ripple

Pool Ripple

"Playing with filters to get ripples in water", from Sarah Drasner.

Jobs!

A couple of selections from our Job Board:

Have a job opening at your company? Post it!

Meetups!

Coming soon, to a city near you:

Wanna host one? You can!
You're receiving this email because you are a member of CodePen.
You can opt out of this type of email any time. Or manage your notification settings here.