Top 10 Codepens of the Week #6

Holly Lloyd
💬 comments

It's that time again! We're showcasing the coolest creations we've come across this week.

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.

Infinite Scrolling Form by Scott Marshall

Add some spice to your forms with an infinite scrolling background.

See the Pen INFINITE SCROLLING FORM by Scott Marshall (@ScottMarshall) on CodePen.

CSS Calculator by Nodws

Sexy and functional. Just don't divide by zero ;)

See the Pen CSS Calculator iOS 8 by Nodws (@nodws) on CodePen.

Network by Szenia Zadvornykh

Awesome look at some of the stuff that can be done with Canvas. Click the JS tab to check out the clean and easy to read code that produces this.

See the Pen Network by Szenia Zadvornykh (@zadvorsky) on CodePen.

Crying Chopper by AaronChuo (小狂)

Another fun pure CSS image. A little creepy on the rollover.

See the Pen Chopper by pure CSS, no image, no javascript by AaronChuo (小狂) (@aaronchuo) on CodePen.

SVG Countdown by Felix Hornoiu

Okay I honestly have no idea how this works, but after deleting half the code to find out only for it to continue running, I have to say I'm impressed.

See the Pen SVG Countdown by Felix Hornoiu (@felixhornoiu) on CodePen.

One Page Scroll Navigation by Nikolay Talanov

A nice take on one page app navigation.

See the Pen One page scroll navigation with css transforms by Nikolay Talanov (@suez) on CodePen.

Text-mask Background Moving on MouseMove by Robert

Subtle but creative text background. Ingenious indeed.

See the Pen Text-mask background moving on MouseMove - v2 by Robert (@dghez) on CodePen.

Pure CSS Responsive SVG Icon by Chris

Beautifully detailed SVG lightbulb with CSS animations. It even breaks down nicely on browser resize.

See the Pen Pure CSS Responsive SVG Icon by Chris (@Colouryum) on CodePen.

Space Hack by Xanmia

Fun little retro game built with three.js. The D button doesn't seem to work, but switching currentlyPressedKeys[68] to any other key code works fine. But be warned, playing without the beloved WASD is infinitely harder, so don't feel bad when you lose.

See the Pen Space Hack by Xanmia (@Xanmia) on CodePen.

Simple Arithmetic Expression Evaluator by Alan Soares

It may not have CSS animals and lights flashing everywhere, but it's clean, fast, built with Angular, and rich in math.

See the Pen Simple Arithmetic Expression Evaluator by Alan R. Soares (@alanrsoares) on CodePen.

And a bonus round! Pewpewpew!!

Nested Panels by our very own Nicholas Cerminera

And there's much more where that came from. You can get a commercial license here or check out the full write up and download Scotch Panels (free for personal use) here.

See the Pen Nested Off Canvas Menus by Nicholas Cerminara (@ncerminara) on CodePen.

Holly Lloyd

13 posts

I go to algorithms anonymous.