Top 10 Codepens of the Week #7

Holly Lloyd
💬 comments

It's that time again! 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.

Wireframe Cube by Michael Hobizal

Really cool CSS cube transformation. Make sure you check out the effect on hover! It's almost too much for my sick Dayquil filled mind to handle.

See the Pen Wireframe Cube by Michael Hobizal (@mikehobizal) on CodePen.

Table of Contents

    Tetris Background by Jason Brown

    Tetris done in canvas. Need I say more? Be sure to check out all the work that went into that JS file. There's definitely a lot that a canvas newbie (me) can learn from.

    See the Pen Tetris background by Jason Brown (@loktar00) on CodePen.

    Cool Future-like Interactive Dropdown by AaronChuo (小狂)

    A Sass built sci-fi menu, completely JavaScript free. I recommend playing this in the background.

    See the Pen Cool Future-like Interactive Dropdown by AaronChuo (小狂) (@aaronchuo) on CodePen.

    A fractal animation by Louis Hoebregts

    A vector fractal animation made with RaphaelJS. The JS looks a bit daunting at first, but it is worthwhile to look into how this is done. The techniques behind fractal creation in programming are generally simple concepts like recursion that produce fascinating results.

    See the Pen A fractal animation by Louis Hoebregts (@Mamboleoo) on CodePen.

    Swinging Lightbulbs by Brandon Lawrence

    Pure CSS swinging lightbulbs. My mind can completely grasp fractal generation, but CSS transformations are for some reason beyond me. It's easy to see its power though so definitely a good skill to have under your designer belt.

    See the Pen Hvqes by Brandon Lawrence (@bvbrandon) on CodePen.

    error 404 glitch by Kai Waddington

    Another great example of the power of CSS and Sass. Switch the background to black and you'll feel like you're 20 rounds deep in the P.T/Silent Hill trailer.

    See the Pen error 404 glitch by Kai Waddington (@waddington) on CodePen.

    Grid by Guillaume Gouessan

    As someone still getting started with Canvas, this just blows my mind that such little code can produce something this complex.

    See the Pen Grid by Guillaume Gouessan (@superguigui) on CodePen.

    Memory Game by Nate Wiley

    Awesome memory card game built with easy to follow JS. I used to play this game at my grandma's house with real cards and it's a lot easier when you can just cheat by peaking under the glass coffee table to see the card faces. Still have a perfect memory though. ;)

    See the Pen Memory Game by Nate Wiley (@natewiley) on CodePen.

    Kruskal Minimum Spanning Tree by Nicolas Barradeau

    Make sure you click rerun for this amazing implementation of Kruskal's algorithm for finding the minimum spanning tree of a graph. In other words, this will find the minimum weighted path that connects all vertices in this graph. If you're not familiar with the algorithm (or graph theory in general), looking through the code here probably won't reveal much. But if anyone is interested, the algorithm is surprisingly easy to follow in a theoretical sense and we would be more than happy to write up a quick tutorial on how it's done.

    See the Pen Kruskal Minimum Spanning Tree by nicolas barradeau (@nicoptere) on CodePen.

    Vapor Trail by Artem Zubkov

    Another awesome example displaying the power of Canvas. Definitely don't turn every option up to the max and freeze your computer like I did..

    See the Pen vapor trail by Artem Zubkov (@artzub) on CodePen.

    Holly Lloyd

    13 posts

    I go to algorithms anonymous.