cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv headernumbered-list123split-screen

The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

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.

Image Masking

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

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.

React Carousel

A Pen by Andy Pag├Ęs in which he builds a carousel in React using CSSTransitionGroup.

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.

Blending Motions

Some lovely vector lines by Fabio Ottaviani form not only a wave, but a clipping path above text.

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!

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.

Pool Ripple

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