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.

Table of Contents

    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.