Sara Soueidan’s Favorite CodePen Demos
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
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.
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.
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.
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.
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:
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"!
8. Loading Icon Using CSS
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.
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!
10. GIF + CSS Blend Modes
Combine an animated GIF with CSS blend modes and you get this beautiful effect by Yoksel.
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.
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