shshaw

growing lines hex

Almost the same as my other pen Growing lines, but based on a tessellation of hexagons instead of squares, and in black on white only

A Pen by Dillon on CodePen.

License.

shshaw

<div class="moon">
	<div class="crater"></div>
</div>

<div class="footprints">
	<span></span>
	<span></span>
	<span></span>
</div>

shshaw

<div id="app"></div>

<a href="https://youtu.be/zOGgcd6nkYs" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

shshaw

<nav>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
  <a href="#5">5</a>
</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

shshaw

<canvas class="webgl"></canvas>
<div class="info">
    <svg id="hand" viewBox="0 0 175 200" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M173.272 82.5157C161.668 70.5528 146.803 62.2655 130.526 58.6846C118.575 55.6811 106.321 54.0528 94.0011 53.8313V20.8535C93.8062 15.2638 91.4057 9.97869 87.3246 6.15411C83.2435 2.32953 77.8139 0.276704 72.2233 0.444604C66.6327 0.276704 61.2031 2.32953 57.122 6.15411C53.0409 9.97869 50.6404 15.2638 50.4455 20.8535V83.0757L40.49 73.2446C36.1045 68.9428 30.2064 66.5329 24.0633 66.5329C17.9201 66.5329 12.0221 68.9428 7.63662 73.2446C5.43939 75.3674 3.69046 77.9095 2.49342 80.7204C1.29638 83.5313 0.675563 86.5539 0.667733 89.609C0.553645 95.5326 2.79095 101.26 6.88996 105.538L35.8855 139.885C37.2844 148.66 40.3015 157.1 44.7833 164.773C48.0577 170.674 52.2595 176.011 57.2277 180.578V192.525C57.2082 194.228 57.8424 195.874 58.9999 197.124C60.1573 198.374 61.75 199.133 63.45 199.245H150.001C151.701 199.133 153.294 198.374 154.451 197.124C155.609 195.874 156.243 

shshaw

<!--

1. Slide Navigation
2. Slide Animations with CSS Variables
3. Stat Placement on a circle

-->

<div id="root"></div>

shshaw

<div id="page">
  <header>
    <h1 class="page-title">
      <div class='revealer'>
        <div class='revealer-inner'>Cassie Evans</div>
      </div>
      <div class='page-title-secondary revealer'>
        <div class='revealer-inner'>Keyframers</div>
      </div>
    </h1>

shshaw

<div class="hourglass"></div>

shshaw

<div class="clock">

  <span class="cog hours tens" data-splitting>0123456789</span>
  <span class="cog hours" data-splitting>0123456789</span>
  <span class="colon">:</span>
  <span class="cog minutes tens" data-splitting>0123456789</span>
  <span class="cog minutes" data-splitting>0123456789</span>
  <span class="colon">:</span>
  <span class="cog seconds tens" data-splitting>0123456789</span>
  <span class="cog seconds" data-splitting>0123456789</span>

shshaw

 const STATES = {
  AUTHENTICATING: 'AUTHENTICATING',
  AUTHORIZED: 'AUTHORIZED',
  UNAUTHORIZED: 'UNAUTHORIZED',
  STORAGE_FULL: 'STORAGE_FULL',
  ERROR: 'ERROR'
};

 const EVENTS = {
  AUTHENTICATED: 'AUTHENTICATED',