Sara Soueidan’s Favorite CodePen Demos

A few months ago, Chris Coyier shared his favorite CodePen demos right here on David's blog. A while back David asked me to share some of my favorite pens too, so here are some of the demos that have blown my mind in the past few months as well.

The main thing you'll notice about my favorite pens is that most of them are done using SVG. SVG's awesome animation capabilities combined with some really great animation libraries can yield some very impressive effects, as you'll see.

You'll always find amazing pens in Lucas Bebber's profile page. His works is outstanding! So here are a few of his pens that made it to my list of favorites:

1. CSS Raindrops

I saw a "picture through wet glass" effect once created using HTML5 Canvas and lots of JavaScript, but to create this effect using nothing but good old CSS is a whole other thing; and Lucas did just that! The pen also comes with options that allow you to change the focus to be either on the rain drops, the background image, or both.

See the Pen CSS Raindrops on a Window by Lucas Bebber (@lbebber) on CodePen.

2. "The Goo Effect"

I think most of you have seen or maybe heard of this effect lately. The goo effect is probably the most creative effect created using SVG filters that I've yet come across.

See the Pen CSS Gooey Menu (Version 1) by Lucas Bebber (@lbebber) on CodePen.

Lucas has written more about this effect over at CSS-Tricks and has shared many more use cases and examples on Codrops. I totally recommend you check the articles out if you wanna learn how the effect is created.

3. Motion Blur

SVG filters FTW. Again, Lucas uses SVG's built-in filter effects to create an effect that can take our UIs to the next level.

See the Pen Motion Blur Experiment by Lucas Bebber (@lbebber) on CodePen.

4. Squiggly Text

Did you know that SVG offers us a turbulence filter? I didn't, until I saw this code pen by Lucas. My favorite part is that the text is fully editable and that even the blinking cursor is going to squiggle as you edit the text.

See the Pen Squiggly Text Experiment by Lucas Bebber (@lbebber) on CodePen.

You can find many more of Lucas's experiments in his Codepen profile.

5. Curved UI Cut

I've recently given a talk about how everyone should be using SVG more to build better UIs, so anything that leverages SVG's flexibility to do that wins my heart. HORNEBOM created this simple yet beautiful example showing how SVG's paths can be used to break free from the rectangular limitations of the box model in CSS to create more flexible and "bending" UIs. The additional touch of changing the curve of the line as you scroll down is beautiful.

See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.

6. "Motion For The Web"

What happens when you combine incredibly smooth animations (SVG again!) with subtle motion and matching music? You get this beauty:

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.

My favorite part about this pen is the controls that allow you to control the speed of animation so you can slow it down and analyse it as you go. Beautiful work by LegoMushroom.

7. Modal Windows Destroy Concept

LegoMushroom does great job using different animation libraries to create really compelling animation effects like the one we saw in the previous demo. In this demo, you can destroy (literally) the modal window by closing it. The sound effect makes it even more fun to "break"!

See the Pen Modal window destroy concept by LegoMushroom (@sol0mka) on CodePen.

8. Loading Icon Using CSS clip-path

I love this code pen mostly because it uses one of my favorite CSS properties and in a very creative way. The clip-path property allows us to clip elements to specific polygonal shapes using the polygon() function, and this function can be animated using CSS animations and transitions. Bennett Feely did exactly that in this demo, and by changing the background color of the element as the clip-path animates, we get a really nice loading animation.

See the Pen Loading Icon by Bennett Feely (@bennettfeely) on CodePen.

If you're interested in learning more about this property, you can check this article on my blog out.

9. "When You're An Introvert"

Sarah Drasner knows what it's like to be an introvert, and since I am one, this pen spoke right to my heart. Not only does the moral behind it mean a lot to me, but it's also an animated SVG! Two wins!

See the Pen When you're an introvert... by Sarah Drasner (@sdras) on CodePen.

10. GIF + CSS Blend Modes

Combine an animated GIF with CSS blend modes and you get this beautiful effect by Yoksel.

See the Pen LErrRX by yoksel (@yoksel) on CodePen.

The animation is incredibly smooth and the introduction of CSS blend modes turns it into a beautiful effect that shows that the possibilities of what can be done with new CSS features are countless.

If you're interested in CSS blend modes, you can read all about them here.

Final Words

The above pens are some of my favorites, but there are many many more than I could possibly list here that I absolutely love too. You can check some of my favorite pens in my "Loved" tab in my Codepen profile. I hope these demos have been inspirational enough for you to experiment more and share your own creative work on Codepen too.

About Sara Soueidan

Sara Soueidan is a freelance front-end web developer based in Lebanon, focusing on HTML5, SVG, CSS and JavaScript. She is the author of the Codrops CSS Reference and co-author of the Smashing Book #5. She writes articles on tutorials—mostly about CSS and SVG—for various magazines and on her blog. You can find and follow her on Twitter @SaraSoueidan.

sarasoueidan.comsarasoueidanPosts