Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <svg viewbox="0 0 700 225">
  <defs>
    <g class="text-group">
      <text id="text1.1" x="50%" text-anchor="middle" y="130">Welcome!</text>
    </g>

<g class="text-group">
      <text id="text2.1" x="50%" text-anchor="middle" y="70">Fix</text>
      <text id="text2.2" x="50%" text-anchor="middle" y="140">yourself</text>
      <text id="text2.3" x="50%" text-anchor="middle" y="210">a drink 🍸</text>
    </g>

<g class="text-group">
      <text id="text3.1" x="50%" text-anchor="middle" y="70">We hope</text>
      <text id="text3.2" x="50%" text-anchor="middle" y="140">you enjoy</text>
      <text id="text3.3" x="50%" text-anchor="middle" y="210">the party</text>
    </g>

<g class="text-group">
      <text id="text4.1" x="50%" text-anchor="middle" y="70">Make an</text>
      <text id="text4.2" x="50%" text-anchor="middle" y="140">image on</text>
      <text id="text4.3" x="50%" text-anchor="middle" y="210">the laptop!</text>
    </g>

<g class="text-group">
      <text id="text5.1" x="50%" text-anchor="middle" y="70">Thanks</text>
      <text id="text5.2" x="50%" text-anchor="middle" y="140">for joining</text>
      <text id="text5.3" x="50%" text-anchor="middle" y="210">us!</text>
    </g>
    
    <g class="text-group">
      <text id="text6.1" x="50%" text-anchor="middle" y="70">Zach &</text>
      <text id="text6.2" x="50%" text-anchor="middle" y="140">Avery's</text>
      <text id="text6.3" x="50%" text-anchor="middle" y="210">anniversary</text>
    </g>
    
    <g class="text-group">
      <text id="text7.1" x="50%" text-anchor="middle" y="105">You look</text>
      <text id="text7.2" x="50%" text-anchor="middle" y="175">stunning.</text>
    </g>
    
    <g class="text-group">
      <text id="text8.1" x="50%" text-anchor="middle" y="70">Snap a</text>
      <text id="text8.2" x="50%" text-anchor="middle" y="140">pic with</text>
      <text id="text8.3" x="50%" text-anchor="middle" y="210">the camera</text>
    </g>
  </defs>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  height: 100%;

--color1: #ffffff;
  --color2: #f7bb98;
  --color3: #00639d;

--line-color: #d0b53b;

/* This animation is mostly so my TV had some variance if we left it on for a while */
  background-color: #140802;
  animation: ambientBg 311s linear infinite;
}

body {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
body > svg {
  grid-row-start: 1;
  grid-column-start: 1;
  width: 100%;
  height: 100%;
}

.filled-heading {
  text-transform: uppercase;
  font-family: "Limelight", sans-serif;
  font-size: 5em;
  line-height: 0.9;
}

#background path {
  animation: pulse 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0) rotate(33deg);
  }
  20%,
  80% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes ambientBg {
  0%, 100% {
    background-color: #140802;
  }
  33% {
    background-color: #000018;
  }
  66% {
    background-color: #0f1100;
  }
}

console.log("Event Fired")
const colors = ["var(--color1)", "var(--color2)", "var(--color3)"];

const textGroups = document.querySelectorAll(".text-group");
textGroups.forEach((group) => group.count = group.querySelectorAll("text").length);
const uses = document.querySelectorAll("#textClip use");
const blobs = document.querySelectorAll("#background path");

let currCount = 1;

function colorBlobs() {
  blobs.forEach((blob) => {
    blob.style.fill = colors[Math.floor(Math.random() * colors.length)];
  });
}

function nextIteration() {
  // Change the color of all the blobs
  colorBlobs();

// Show new set of lines
  uses.forEach((use, i) => {
    use.setAttribute('href', i < textGroups[currCount].count ? `#text${currCount + 1}.${i + 1}` : '');
  });
  
  currCount = currCount + 1 < textGroups.length ? currCount + 1 : 0;
}

// Since all of our blobs are using the same animation, we only
// need to listen to one of them
blobs[0].addEventListener("animationiteration", nextIteration);

colorBlobs();

Frontend Forever App