Sparkbox 2017 CodePen Roundup

We're fans of CodePen, using it for everything from side projects to teaching code classes. Catherine shares some of our Sparkboxers' favorites of 2017.

It’s no secret we love Codepen (and not just because we had a hand in making it work). For everything from creating Foundry examples to teaching code classes, CodePen is an online frontend editor we don’t want to go without. Here are some of our favorite Pens, created by the Sparkbox Team.

Built something cool on Codepen? Tweet us your Pens, @hearsparkbox!

Brody the Pug Soundboard by Anastasia Lanz

This animated soundboard features Anastasia’s own pooch, Brody.

See the Pen Brody the Pug Soundboard by Anastasia Lanz (@anastasialanz) on CodePen.

Multiple Shadows by Andrew Spencer

Andrew shares a couple of CSS drop shadow effects.

See the Pen Multiple Shadows by Andrew Spencer (@iam_aspencer) on CodePen.

Teaching: Retrofitting a Table by Ben Callahan

Ben brings responsive web design to an old staple: the table.

See the Pen Teaching: Retrofitting a Table by Ben Callahan (@bencallahan) on CodePen.

Animated Gradient Logo by Bryan Braun

A fun light animation made from Bryan’s personal brand.

See the Pen Animated Gradient Logo by Bryan Braun (@bryanbraun) on CodePen.

Accordion Nav by Catherine Meade

Catherine’s take on an animated accordion navigation.

See the Pen Accordion Nav by Catherine Meade (@catheraaine) on CodePen.

Jelly~ (scroll-based spring) by Ethan Muller

This fun, springy scroll animation built by Ethan is good enough to eat!

See the Pen Jelly~ (scroll-based spring) by Ethan Muller (@ethanmuller) on CodePen.

Vinyl by Jon Oliver

Jon combines work with “play” in this musical animation.

See the Pen vinyl by Jon Oliver (@jonoliver) on CodePen.

Bar Graph from a Table by Kasey Bonifacio

Combining data, science and design, this tool from Kasey follows both form and function.

See the Pen Bar Graph from a Table by Kasey Bonifacio (@kaseybon) on CodePen.

CSS Parallax by Nate Jacobs

Nate brings the “wow” in this parallax-y scroll animation.

See the Pen CSS Parallax by iAmNathanJ (@iAmNathanJ) on CodePen.

Barbell Calculator by Patrick Simpson

Proving that great Pens don’t always need CSS, this JavaScript barbell calculator will seriously impress.

See the Pen barbell-calculator by Patrick (@patricksimpson) on CodePen.

Oscillating Fan by Philip Zastrow

Our own Sassmaster is at it again with this “cool” fan animation.

See the Pen Oscillating Fan by Philip Zastrow (@zastrow) on CodePen.