12 Incredible CodePen.IO Demos
few hours while on CodePen, and after I picked my jaw up from the floor, I put together a collection of my favorite CodePen.IO demos. Enjoy!
Draw Worm is an eye-catching, canvas-based animation that creates branches; better yet, the animation follows the mouse, creating more branches.
Trail is another cavas-based masterpiece which creates different color rays that follow the user's mouse at an accelerated rate. Even color is that you can see grey lines stay in the background, representing vapor trails.
This single-element demo composes the Google Chrome logo using
:after, as well as a number of CSS gradients. Hover over the logo and it shrinks and rotates too!
Yet another awesome CSS-only animation; this demo uses 30
DIV elements and yet only 4 real CSS declarations. What's more impressive is that it's not just a spinning set of elements -- the elements warp into different shape patterns too.
Linjer starts out as a pulsating set of colored lines, until you click around the lines! The animations intensify near the clicks and the rippling becomes more meaningful.
CSS 3D Test presents a rotated 3D image which animates to a presentable position when hovered. You'd be surprised at how little CSS is used to accomplish this task.
Canvas Fireworks is a neat and responsive demo, shooting fireworks to the position at which you click. There's even a control panel to all you to customize speed, color, and accuracy of the firework.
The guys on Breaking Bad sell one hell of a drug, and Tim Pietrusky must have also beed on one when he created this excellent SVG-powered tribute to the shows opening credits. Take note of how realistic the chemical smoke looks behind the logo!
The sketch.js demo is an awesome bubbling effect that follows your mouse, creating circles of all sizes and colors. Even cooler is that the circles shrink and move in random motions as they get further away from the mouse!