JSFiddle - React, Tailwind, and code Playground

by iamtimmo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 class="grad-head">Gradient Header 12345</h1>
  <button>Faded Submit</button>
  
  <svg id="logo"
       xmlns="http://www.w3.org/2000/svg"
       width="1024" height="611"
       viewBox="0 0 1024 611" fill="none">
    <path id="sailboat-1" stroke="white" stroke-width="5"
          d="M 165.00,225.00
             C 158.36,224.14 157.75,230.86 156.00,236.00
             156.00,236.00 142.00,274.00 142.00,274.00
             150.76,275.15 147.38,260.94 157.00,261.42
             160.42,261.59 168.32,268.06 172.00,270.12
             178.80,273.93 186.32,274.99 194.00,275.00
             202.00,275.01 207.23,274.80 215.00,272.25
             235.74,265.45 252.74,246.37 253.00,224.00
             253.29,198.75 238.38,187.57 222.00,171.00
             212.67,161.55 200.91,148.37 204.02,134.00
             208.94,111.27 241.70,102.14 257.82,117.33
             266.88,125.86 265.00,135.80 265.00,147.00
             270.68,145.12 270.24,141.24 271.42,136.00
             275.02,120.04 281.09,115.03 282.00,105.00
             275.55,107.39 274.64,111.94 270.00,112.94
             267.04,113.57 261.88,111.10 259.00,110.05
             252.66,107.74 247.83,106.08 241.00,106.00
             229.65,105.87 223.74,105.44 213.00,110.31
             206.19,113.40 200.20,117.51 195.09,123.00
             191.34,127.04 189.06,131.03 186.79,136.00
             184.73,140.52 182.93,149.08 183.32,154.00
             185.40,180.08 206.61,190.70 221.82,208.00
             231.98,219.56 236.43,234.41 230.12,249.00
             219.36,273.88 181.90,276.02 168.53,259.91
             159.65,249.22 162.27,237.11 165.00,225.00 Z" />
    <path id="sailboat-2a" stroke="white" stroke-width="5"
          d="M 352.00,185.00
             C 349.70,163.48...

SCSS

// * {
//   padding: 0;
//   margin: 0;
//   box-sizing: border-box;
// }

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100vh;
  background-color: rgb(32, 35, 48);
}

.grad-head {
  font-size: 4rem;
  background: linear-gradient(to right, rgb(128, 100, 255), rgb(128, 100, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

button {
  display: block;
  margin: auto;
  width: 30rem;
  height: 10rem;
  background-color: red;
  animation: fade 3s ease forwards;
}

@keyframes fade {
  from {
    opacity: 1;
    pointer-events: all;
  }
  to {
    opacity: 0;
    pointer-events: none;
  }
}

$corner-radius: 50px;
#logo {
  position: absolute;
  overflow: hidden;
  width: 60rem;
  height: 30rem;
  top: 50%;
  left: 50%;
  // -webkit-background-clip: i
  // -webkit-text-fill-color: transparent;
  transform: translate(-50%, -50%);
  animation: fill 1s ease forwards 2.0s;

  -webkit-border-radius: $corner-radius;
  -moz-border-radius: $corner-radius;
  border-radius: $corner-radius;
  border: none;
  background-image: url("https://images.unsplash.com/photo-1559636425-33470591cbd3?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  background-position: center;
  background-size: 60rem auto;
  background-repeat: no-repeat;
}

@keyframes char-anim {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  from {
    fill: transparent;
  }
  to {
    fill: lightblue;
  }
}

JavaScript

console.log('hello js here')

const sbTextAnimation = 'char-anim 2s ease forwards';
const rcTextAnimation = `${sbTextAnimation} 0.3s`;

const styleStroke = (stroke, animation) => {
  let strokeLength = Math.ceil(stroke.getTotalLength() * 100) / 100;
  stroke.style['stroke-dasharray'] = strokeLength;
  stroke.style['stroke-dashoffset'] = strokeLength;
  stroke.style['animation'] = animation;
};

const strokes = document.querySelectorAll('#logo path');
for (let i = 0; i < strokes.length; i++) {
  let stroke = strokes[i];
  let animation = stroke.id.startsWith('sailboat') ? sbTextAnimation : rcTextAnimation;
  styleStroke(stroke, animation);
}