Skip to content

Instantly share code, notes, and snippets.

@shshaw
shshaw / growing-lines-hex.markdown
Created September 29, 2021 17:26
growing lines hex

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
shshaw / index.html
Created September 27, 2021 14:34
Walking on the Moon
<div class="moon">
<div class="crater"></div>
</div>
<div class="footprints">
<span></span>
<span></span>
<span></span>
</div>
@shshaw
shshaw / index.html
Created August 5, 2021 20:23
React Panning Image Grid, Part 2 | @keyframers 4.7.2
<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
shshaw / index.html
Created August 5, 2021 19:54
Sticky Nav example
<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
shshaw / index.html
Created June 2, 2021 15:11
Photo Tear
<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
shshaw / index.html
Created May 24, 2021 22:31
React Circular Slider | @keyframers 4.2
<!--
1. Slide Navigation
2. Slide Animations with CSS Variables
3. Stat Placement on a circle
-->
<div id="root"></div>
@shshaw
shshaw / index.html
Created May 24, 2021 15:55
Scrolly Path with Cassie Evans! | @keyframers 4.1
<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
shshaw / index.html
Created November 5, 2020 16:49
One-Element Hourglass ⏳
<div class="hourglass"></div>
@shshaw
shshaw / index.html
Created July 17, 2020 11:11
Splitting: 3D Clock
<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
shshaw / machine.js
Last active April 14, 2020 21:05
Generated by XState Viz: https://xstate.js.org/viz
const STATES = {
AUTHENTICATING: 'AUTHENTICATING',
AUTHORIZED: 'AUTHORIZED',
UNAUTHORIZED: 'UNAUTHORIZED',
STORAGE_FULL: 'STORAGE_FULL',
ERROR: 'ERROR'
};
const EVENTS = {
AUTHENTICATED: 'AUTHENTICATED',