Sara Soueidan’s Favorite CodePen Demos

By  on  

One of the awesome developers I recently caught on to is Sara Soueidan. Her tutorials about SVG have been top class and she's taught me a lot about the excellence that is SVG. Since she's one of my SVG heroes, I thought it would be awesome to have her pick out some of her favorite CodePen demos. Enjoy!

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.

Sara Soueidan

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.

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!