Top 10 CodePens of the Week #2

Nicholas Cerminara
๐Ÿ‘๏ธ 9,962 views
๐Ÿ’ฌ comments

Here's our list of top 10 Codepens of the week. We missed last weeks, so you might see some from 2 weeks ago on here. 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.

Scroll controlled SVG animation (Iron Man)

By Ben Laley

See the Pen Scroll controlled SVG animation by Ben Laley (@paintbycode) on CodePen.

Table of Contents

    HTML5 Canvas Background Animation

    By Alex Bergin

    I really hope subtle HTML5 Canvas backgrounds on webpages become a thing.

    See the Pen background animation by Alex Bergin (@abergin) on CodePen.

    CSS Long Shadow

    By Jesse Couch

    It's all about the details! Observe the very subtle gradient change on the background when you hover.

    See the Pen CSS Long Shadow by Jesse Couch (@designcouch) on CodePen.

    CSS-Link Detection

    By Max Scopp

    See the Pen zifCq by Max Scopp (@max-scopp) on CodePen.

    3D Flat Test

    By Bohlr

    See the Pen 3D FLAT TEST by BOHLER (@piksl) on CodePen.

    Pure CSS3 Loading Animation Thing

    By Lucas Bernardo

    If you're getting left ofter CSS pixels on this animation, add "-webkit-transform: translateZ(0);" on #loader to force GPU rendering.

    See the Pen cEBqF by Lucas Bernardo (@MrAngryBeards) on CodePen.

      <div class="tile">
        <div class="tile-content">
          <h3>
            CSS Loading Boxes Animation
          </h3>
    
          <h4>
            By <a href="https://twitter.com/Adevade">Andrรฉas Lundgren</a>
          </h4>
    
          <p data-height="268" data-theme-id="0" data-slug-hash="FGtre" data-default-tab="result" class='codepen'>
            See the Pen <a href='http://codepen.io/Adevade/pen/FGtre/'>CSS Loading Boxes Animation</a> by Andrรฉas Lundgren (<a href='http://codepen.io/Adevade'>@Adevade</a>) on <a href='http://codepen.io'>CodePen</a>.
          </p>
    
          <script async src="//codepen.io/assets/embed/ei.js"></script>
        </div>
      </div>
    
      <div class="tile">
        <div class="tile-content">
          <h3>
            Fruity CSS
          </h3>
    
          <h4>
            By <a href="http://codepen.io/bipolars/">Lars Munkholm</a> from Denmark!
          </h4>
    
          <p data-height="268" data-theme-id="0" data-slug-hash="twuiD" data-default-tab="result" class='codepen'>
            See the Pen <a href='http://codepen.io/bipolars/pen/twuiD/'>Fruity CSS</a> by Lars Munkholm (<a href='http://codepen.io/bipolars'>@bipolars</a>) on <a href='http://codepen.io'>CodePen</a>.
          </p>
    
          <script async src="//codepen.io/assets/embed/ei.js"></script>
        </div>
      </div>
    
      <div class="tile">
        <div class="tile-content">
          <h3>
            Lights out svg icon</h4> <h4>
              By <a href="https://twitter.com/hendrysadrak">Hendry Sadrak</a>
            </h4>
    
            <p data-height="268" data-theme-id="0" data-slug-hash="CpodK" data-default-tab="result" class='codepen'>
              See the Pen <a href='http://codepen.io/carmination/pen/CpodK/'>Lights out svg icon</a> by Hendry Sadrak (<a href='http://codepen.io/carmination'>@carmination</a>) on <a href='http://codepen.io'>CodePen</a>.
            </p>
    
            <script async src="//codepen.io/assets/embed/ei.js"></script> </div> </div> <div class="tile">
              <div class="tile-content">
                <h3>
                  Psilocybin mushroom
                </h3>
    
                <h4>
                  By <a href="http://codepen.io/amos/">Amos</a>
                </h4>
    
                <p data-height="268" data-theme-id="0" data-slug-hash="ywJdK" data-default-tab="result" class='codepen'>
                  See the Pen <a href='http://codepen.io/amos/pen/ywJdK/'>ywJdK</a> by amos (<a href='http://codepen.io/amos'>@amos</a>) on <a href='http://codepen.io'>CodePen</a>.
                </p>
    
                <script async src="//codepen.io/assets/embed/ei.js"></script>
              </div>
            </div>