Top 10 CodePens of the Week #4

Chris Sevilleja

Hereโ€™s our list of top 10 Codepens of the week. Weโ€™re showcasing the coolest and best things creative people have created. If you donโ€™t already have a

Codepen account, signup for for free account or even a paid PRO account and tweet us your front-end invention.

Sparkles by samuelhorn Cool hover animation that gets the imagination going. You could use this effect for quite a few things.

See the Pen Sparkles by samuelhorn (@samuelhorn) on CodePen.

Drawn Hamburger Transition by Jesse Couch Clean implementation of a hamburger transition.

See the Pen Drawn Hamburger Transition by Jesse Couch (@designcouch) on CodePen.

Playing with CSS Filters by Sam Jarvis Just awesome. CSS filters haven't been used to their full potential. This moves us in the right direction.

Press RERUN to see the animation.

See the Pen Playing with CSS Filters. by Sam Jarvis (@samthejarvis) on CodePen.

Sublime Text Loader by Nicolas Escoffier Gotta love anything Sublime Text.

Press RERUN to see the animation.

See the Pen Loader (Sublime Text Style) by Nicolas Escoffier (@OxyDesign) on CodePen.

Orbit by Gabriel Great use of SVG. The loader is also responsive if you grow or shrink its container.

See the Pen Orbit by Gabriel (@guerreiro) on CodePen.

Pure CSS3 UISwitch by Christian Petersen Nice transitions when turning a switch on or off.

See the Pen Sweet & Pure CSS3 UISwitch by Christian Petersen (@cbp) on CodePen.

Different by Rob Smittenaar SVG and CSS keyframes come together to make a unique text effect.

Press RERUN to see the animation.

See the Pen Different by Rob Smittenaar (@robsmittenaar) on CodePen.

SVG Foursquare Loading Spinner by Thies Brake Very cool SVG loader. Looks like ripples in a pond.

Press RERUN to see the animation.

See the Pen SVG "Foursquare-Inspired" Loading Spinner by Thies Brake (@thiesbrake) on CodePen.

Prototype by lukasz Neat SVG tracing effect.

Press RERUN to see the animation.

See the Pen Prototype by ลukasz (@lukasz) on CodePen.

SVG Loading Icons by Aurer

This week has shown off a lot of great SVG CodePens, including this one.

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.