Top 10 CodePens of the Week #2

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.

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>