Color outside the lines

<svg viewBox="0 0 1200 1400" font-family="Special Elite, Courier New, monospace" font-size="90">
  <defs>
    <symbol id="cylinder">
      <path d="m200 853v47c46.53 23.73 115 25 160 0v-47c-29.077 18.478-134.24 17.133-160 0z"/>
      <ellipse cx="279.85" cy="846.35" rx="78.657" ry="15.94"/>
    </symbol>
    <symbol id="left-side-key">
      <ellipse cx="245.19" cy="762.91" rx="31.412" ry="11.912"/>
      <path d="m214.31 775.89c19.39 7.1875 42.579 6.132 62 0 0 0 2.4 1.29 0 6-20.099 5.6643-39.427 6.4634-62 1-2.89-3.84-1.23-5.27 0-7z"/>
      <path d="M249.88 804c.07 5.02 11.67 9.42 11.67 9.42-.4 6.78-1.73 9.08-8.1 11.61-8.42-3.52-14.19-7.94-17.4-15.06-2.18-4.84-1.4-17.27-1.4-17.27 5.09-1.14 9.87-1.29 15.04.46z"/>
    </symbol>
    <symbol id="central-key">
      <ellipse cx="300.3" cy="859.2" rx="30.714" ry="11.786"/>
      <path d="M298.74 888.62a8.65 5.366 0 00-8.64 5.29h-.04v22.28a8.65 5.366 0 00-.03.39 8.65 5.366 0 00.03.43v.34h.07a8.65 5.366 0 008.55 4.6 8.65 5.366 0 008.55-4.6h.13v-23.03a8.65 5.366 0 00.03-.34 8.65 5.366 0 00-8.65-5.36z"/>
      <path d="m269.3 868.5c-2.6436 1.5237-3.7184 3.3866-3.82 5.46 17.046 12.586 52.146 14.168 67 0-0.4471-1.7822-0.72113-3.6006-3-5-14.497 11.438-46.419 10.089-60.18-0.46z" stroke-width="3.5"/>
    </symbol>
    <symbol id="right-side-key">
      <ellipse cx="948.55" cy="640.42" rx="31.412" ry="11.912"/>
      <path d="m917 653c23 7 43 7 63 0 0 0.43674 1 3-1 6-17.598 5.3898-41 6-62 0-2.88-3.84-1.23-4.27 0-6z"/>
      <path d="M941.02 670.12c5.11-1.59 10.03-1.47 14.62.06.76 6.59 1.98 13.9-.07 19.61-2.52 3.56-7.01 6.76-11.08 9.6-1.47.85-4.9 3.14-6.74 3.27-5.05.38-9.1-4.72-10.21-9.04 6.15-3.04 8.68-4.89 11.93-10.83 1.28-4.8 1.55-7.01 1.55-12.67z"/>
    </symbol>
  </defs>
  <rect class="background" width="100%" height="100%" fill="none" id="rect1"/>
  <g class="page" fill="hsl(0, 1%, 21%)">
    <rect x="300" y="45" width="600" height="700" fill="#fff" id="rect2"/>
    <text x="302" y="162.14">Make your</text>
    <text x="302" y="259.28">mark on</text>
    <text x="302" y="356.42">the world</text>
    <text x="302" y="453.56">and don&apos;t</text>
    <text x="302" y="550.7">be afraid</text>
    <text x="302" y="647.84">to color outside</text>
    <text x="302" y="744.98">the lines.</text>
  </g>
  <g class="keys">
    <use x="32" y="208" xlink:href="#left-side-key"/>
    <use x="108.302" y="208.43" xlink:href="#left-side-key"/>
    <use x="185.44" y="208.05" xlink:href="#left-side-key"/>
    <use x="-138.98" y="327.89" xlink:href="#right-side-key"/>
    <use x="-56.294" y="327.28" xlink:href="#right-side-key"/>
    <use x="22.43" y="327.89" xlink:href="#right-side-key"/>
    <use x="25.037" y="203" xlink:href="#central-key"/>
    <use x="111.634" y="203" xlink:href="#central-key"/>
    <use x="194.5" y="203" xlink:href="#central-key"/>
    <use x="281" y="203" xlink:href="#central-key"/>
    <use x="371.5" y="203" xlink:href="#central-key"/>
    <use x="460" y="203" xlink:href="#central-key"/>
    <use x="542.5" y="203" xlink:href="#central-key"/>
    <use x="625" y="203" width="100%" height="100%" xlink:href="#central-key"/>
    <use x="64" y="284.769" xlink:href="#central-key"/>
    <use x="156" y="284.769" xlink:href="#central-key"/>
    <use x="242" y="284.769" xlink:href="#central-key"/>
    <use x="330" y="284.769" xlink:href="#central-key"/>
    <use x="418" y="284.769" xlink:href="#central-key"/>
    <use x="504" y="284.769" xlink:href="#central-key"/>
    <use x="586" y="284.769" xlink:href="#central-key"/>
  </g>
  <path id="left-side-long-key" class="key" d="m279.86 1132.1a31.412 11.912 0 0 0-31.387 11.912 31.412 11.912 0 0 0 31.412 11.912 31.412 11.912 0 0 0 31.412-11.912 31.412 11.912 0 0 0-31.412-11.912 31.412 11.912 0 0 0-0.02539 0zm-30.855 24.893c-1.23 1.73-2.89 3.16 0 7 22.573 5.4634 41.901 4.6643 62-1 2.4-4.71 0-6 0-6-19.421 6.1319-42.61 7.1875-62 0zm26.275 16.164c-2.0272 0.0061-4.0268 0.2189-5.9356 0.6464 0 0-1.0101 20.359 1.1699 25.199 2.34 5.1904 9.544 12.706 16.93 17.205 2.7458 1.6724 6.138 2.0421 8.4199 2.9961 1.5241-0.6053 4.2224-1.635 5.5176-3.7636 1.1721-1.9263 1.0763-4.8657-0.32812-6.8653-3.5151-5.0049-14.404-9.5834-15.709-12.772 0 0 0.07-5.98 0-11v-10c-3.2312-1.0937-6.6857-1.6567-10.064-1.6464z"/>
  <path id="right-side-long-key" class="key" d="m963.56 1134.1a31.412 11.912 0 0 0-31.389 11.912 31.412 11.912 0 0 0 31.412 11.912 31.412 11.912 0 0 0 31.412-11.912 31.412 11.912 0 0 0-31.387-11.912 31.412 11.912 0 0 0-0.02539 0 31.412 11.912 0 0 0-0.02344 0zm-31.096 24.893s-2.4 1.29 0 6c20.099 5.6643 39.427 6.4634 62 1 2.89-3.84 1.23-5.27 0-7-19.39 7.1875-42.579 6.1319-62 0zm35.725 16.164c-3.3787-0.0103-6.8332 0.5527-10.064 1.6464v10c-0.07 5.02 0 11 0 11-1.3054 3.1881-12.194 7.7666-15.709 12.772-1.4044 1.9996-1.5002 4.939-0.32812 6.8653 1.2951 2.1286 3.9935 3.1583 5.5176 3.7636 2.282-0.954 5.6741-1.3237 8.4199-2.9961 7.3857-4.4986 14.59-12.015 16.93-17.205 2.18-4.84 1.1699-25.199 1.1699-25.199-1.9088-0.4275-3.9083-0.6403-5.9356-0.6464z"/>
  <path class="space-bar" d="m357.33 1214.5c-7.33-0.6-16.34 28.6-0.11 33.6h537.96c14.04-4.4 11.42-30.8 0-33.6z"/>
  <path d="m1034.7 1060c12.466 49.757 22.626 94.438 33.695 144.08-1.874 36.364-44.975 52.622-63.373 57.969l-775 1c-18.398-5.3463-61.821-22.554-63.695-58.918 11.069-49.642 21.23-94.325 33.695-144.08h-20c-10.614 48.247-24.928 96.193-34.043 144.79-2.598 45.842 50.48 70.691 84.043 79.211l775-1c33.563-8.5202 86.319-32.42 83.721-78.262-9.1153-48.596-23.429-96.54-34.043-144.79h-20z"/>
  <path d="m209.08 898.12c-25.26 32.434-27.544 80.921-19.08 111.88l-5 25 19.36 0.3 5.64-25.3c-11.869-40.41-2.5445-72.149 15.75-101.27-2.1205-8.5885-8.1383-11.447-16.67-10.61z"/>
  <path d="m190 1145c-18.36 34.4-19.588 93.715 17.48 92.3-7.48-17.3-7.48-42.3 7.52-62.3 0.67076 2.8287-24.954 3.7639-25-30z"/>
  <path d="m370 830c1.7426 4.3807 0.70832 51.049 0.04215 51.215 2.0257-2.3517 71.058-19.065 99.808-24.145l95.15-17.07c10.51-15.628 16.508-24.631 15.051-33.105-1.0318-5.9987-7.9783-12.75-10.051-16.895-45 5-175 30-200 40z"/>
  <path d="m575 790c31.47-7.79 72.455-6.79 100 0-3.3029 4.9544-11.896 15.316-11.896 15.316-1.8724 10.596 5.1268 22.659 11.896 34.684 10.142 25 19.85 50-15.646 65l-5.0709-10-20.284 15c-3.7808 2.1426-10.957 4.2615-20.284 0-0.58834-0.62405-19.496-13.834-19.496-13.834l-5.859 8.8341c-30.425-20-30.613-40.64-18.361-65 8.3155-11.379 13.337-22.975 15.75-34.742 0 0-10.426-9.9185-10.75-15.258z"/>
  <path d="m740.18 854.5c7.8322-0.21089 7.6282-1.9082 10.26 4.98-11.503 27.443-36.758 45.754-60.389 57.611-27.137 10.659-44.999 10.857-72.13 11.47-61.416-7.4129-103.34-30.786-122.05-71.323 2.0336-4.5896 5.62-5.3257 10.57-3.77 20.414 39.865 54.445 52.408 92.319 61.963 19.98 3.5246 37.064 2.5886 55.68 0.15 44.937-11.16 65.513-25.475 85.739-61.081z" stroke-width="3.5"/>
  <path d="m409.95 881.33 20.873 40.594c16.388 23.525 35.443 34.937 58.39 51.46 63.947 30.026 145.54 38.207 205.22 22.92l39.83-13.9c27.693-12.579 44.014-27.774 66.1-47.65 13.978-17.567 22.739-37.597 32.065-57.782-3.2536-5.4808-5.0197-5.8373-11.17-4.52-17.476 38.18-28.568 59.743-61.335 81.912-85.732 51.446-176.81 46.953-261.05 8.15-40.935-26.304-53.062-46.372-75.793-86.164-10.217-6.1409-9.8086-4.799-13.13 4.98z" stroke-width="3.5"/>
  <g class="arm">
    <path d="m853.58 758.24 4.27-5.55h22.19l3.63 4.7 0.85 31.15-4.69 4.06-23.26-0.22-3.2-4.91z" stroke-width="3.5"/>
    <path d="m362.79 760.18 4.27-5.55h22.19l3.63 4.7 0.86 31.15-4.7 4.06-23.26-0.22-3.2-4.9z" stroke-width="3.5"/>
    <path d="m52.501 873.59c-2.02 0-18.275 0.29-18.275 0.29l-16.747 14.83-0.019 21.19 14.228 13.66 22.014-0.91 14.968-20.49 0.505-9.4 37.675-28.18 56.91-41.34 28.15-22.1c0.95-19.4 5.31-23.94 15.03-40.2-4.34-5.93-10.82-8.84-19.5-7.06-7.88 13.9-14.42 18.54-14.73 33.63-27.04 9.82-51.07 25.85-75.85 40.2l1.103-19.49c-2.064-7.24-6.467-14.48-14.161-21.72l-37.067-0.2-12.633 5.48-12.891 14.81-0.229 14.34 13.662 13.06 17.862 24.23 0.151 7.76z"/>
    <path d="m175.57 818.71-0.07 24.07 8.45-0.56 5.19-10.86 25.89-18.75 9.65-8.04 6.42 8.55 9.14-1.14 2.12-9.91 6.25-16.96 2.43 0.53-0.29 16.92 5.99 2.68 7.1-1.74 4.23-6.25 1.96-13.04 0.93-2.78 81.05-0.43 4.64-5.36v-10.35l-3.93-3.22-48.16-0.21-38.13-0.7-9.51-5.94c-10.29 0.07-24.76 0.23-34.98 1.36-7.56 8.15-11.25 16.19-14.64 26.44l-3.5 11.85-8.93 12.57z"/>
    <path d="m893.27 758.05h54.85l8.6 6.64 0.76 11.62-9.48 8.69h-53l-6.56-5.98-0.15-17.05z" stroke-width="3.5"/>
    <path d="m967.89 734.96c12.855 7.2787 25.997 13.972 39.23 20.52l-10.732-0.1721c21.395 17.325 18.23 41.479 17.759 60.006-1.5349-0.90638-28.846-6.5848-31.113-6.3102 3.072-25.185-1.2502-36.997-17.787-53.852l-15.968 0.74542c5.9164-7.1948 13.353-13.259 18.611-20.937z" stroke-width="3.5"/>
    <path d="m1020 765v50c12.639 11.425 12.224 39.321 14.89 56.37-11.49 13.662 3.1308 28.63 15.41 22.94 8.1014-7.1501 14.927-11.781 16-22.03l5.1 3.01 57 0.61c6.6-5.9 11.204-6.8739 16-21.13l-0.9-55.83c0.7806-19.468-3.1293-23.734-11.7-40.74l-45.3-0.3-13.3 13.28-5.4 5.43-5.4 0.0177-12.153-11.727z" stroke-width="3.5"/>
    <path d="m406.34 759.5c-5.5-0.33-12.26 15.24-0.08 17.89 134.39 0.01 299.11-0.01 433.6 0 10.53-2.36 8.56-16.42-0.01-17.89z"/>
  </g>
  <g class="bars" stroke-width="3.5">
    <path d="m442.03 889.67 46.17-17.21c4.12 2.78 3.93 4.4 3.93 9.06-15.91 6.32-31.8 12.66-47.69 19.01-3.55-4.12-3.5-5.42-2.41-10.86z"/>
    <path d="m451.34 903.55 41.95-17.5c8.3-1.99 8.57 0.14 9.05 3.32l-9.35 5.13c-13.34 6.1-25.68 11.5-40.14 17.81-1.97-2.26-3.12-4.51-1.51-8.76z"/>
    <path d="m459.94 916.85c-0.51 4.76 1.44 5.53 4.98 8.3l27.16-14.79 19.32-10.56c-1.88-4.73-2.14-5.87-8.45-5.89l-18.41 9.96z"/>
    <path d="m473.32 935.23 6.34 1.35 10.86-6.64 17.81-11.92 13.58-9.2c-0.52-4.14-1.71-4.33-5.13-6.19-9.63 4.57-16.88 10.39-26.11 15.7l-14.18 7.54c-4.42 3.27-4.15 4.32-3.17 9.36z"/>
    <path d="m524.69 912.51-36.67 28.37c0.17 5.32-0.79 6.4 7.25 7.69l35.76-29.27c0.55-4.18-0.63-7.09-5.74-6.64z"/>
    <path d="m505.54 950.85c-2.31 8.67-1.02 10.22 5.58 9.36l34.1-33.35c0.5-5.23-0.39-7.37-5.28-7.39-12.3 9.28-23.13 20.81-34.4 31.38z"/>
    <path d="m523.91 959.8-2.57 7.55c4.04 4.07 5.92 3.15 11.17 1.96l16.6-23.84 9.65-15.09c-0.54-4.42-2.12-4.46-6.03-5.88-6.91 9.21-20.55 24.21-28.82 35.3z"/>
    <path d="m564.87 930.41-20.37 38.48-0.15 7.7h9.96l16.3-33.95 3.47-11.47-4.38-1.06z"/>
    <path d="m579.36 934.09-14.33 39.84 1.66 8.15c4.64 1.34 6.19 0.13 9.95-2.42l5.74-22.48c1.66-8.19 4.66-15.9 6.49-24.29-3.49-0.74-6.22 0.21-9.51 1.2z"/>
    <path d="m593.11 936.29-6.94 41.95 1.05 6.19 3.47 2.57 6.79-2 4.38-27.28 2.72-19.32-0.91-4.07-6.94-1.06z"/>
    <path d="m609.64 938.41-2.87 39.69 1.21 8.61 9.35 0.7 2.12-9.62 0.9-36.97-3.77-5.58-4.83 0.15z"/>
    <path d="m627.4 937.03h5.89l1.96 3.32 0.9 37.12-0.75 8.41-4.68 1.1-4.53-2.3-0.15-24.71-0.3-19.92z"/>
    <path d="m642.09 937.82c3.87-2.69 6.62-1.48 9.38-0.29l3.26 48.45-10.85 0.1z"/>
    <path d="m660.05 934.28h5.88l1.96 3.32c0.46 15.2 2.72 30.12 4.08 45.27l-4.68 1.1-4.53-2.31-2.56-24.14-1.81-20.22z"/>
    <path d="m674.82 929.02-3.62 4.9 6.82 33.29 3.63 10.67 3.2 2.35 7.26-1.92-2.14-16.64-6.82-27.11-1.93-5.76z"/>
    <path d="m687.02 926.03 1.71 13.44 9.39 23.48 3.62 8.75 4.06 3.41 9.82-4.69-9.18-22.41-9.18-19.63-2.98-3.85z"/>
    <path d="m700.48 925.83 11.52 20.49 12.38 18.35 7.47 0.64 2.77-6.19-19.84-30.3-7.26-10.03-5.97-0.85z"/>
    <path d="m715.64 911.13h6.82l17.72 23.04 12.37 15.16-1.49 5.33h-9.82l-18.78-24.54-9.17-11.52z"/>
    <path d="m728 908.16 33.5 32.22h9.39l-0.64-8.75-33.29-29.66-6.83-1.71-2.56 2.14z"/>
    <path d="m739.93 896.85 27.77 22.33 9.65 8 6.49-1.36 2.27-5.58-11.77-10.56-20.98-15.39-8-5.59h-6.33l-0.91 3.78z"/>
    <path d="m749.55 878.77 0.3 6.49 22.93 15.24 16.3 11.17 6.64-2.72 1.06-7.09-25.5-15.54-14.04-8.45-5.43-1.66z"/>
    <path d="m756.9 869.99 27.61 14.63 16.45 6.64 6.64-2.11-0.45-8-19.77-8.9-18.86-7.85-7.25-1.51-3.32 2.12z"/>
    <path d="m434.74 878.24 47.405-15.975c4.12 2.78 3.3124 3.1647 3.3124 7.8247-15.91 6.32-32.726 11.219-48.616 17.569-3.55-4.12-3.1912-3.9788-2.1012-9.4188z"/>
  </g>
  <use x="6" y="-20.277" xlink:href="#cylinder"/>
  <use x="664" y="-22.277" xlink:href="#cylinder"/>
  <path d="m860.04 828.78c-1.7426 4.3807-0.70832 51.049-0.04215 51.215-2.0257-2.3517-71.058-19.065-99.808-24.145l-80.192-15.855c-10.14-15.395-15.469-25.078-12.985-33.681 1.7085-5.9167 9.1845-12.012 12.985-16.319 45 5 155.04 28.785 180.04 38.785z"/>
  <path d="m1043 1142c18.36 34.4 19.588 93.715-17.48 92.3 7.48-17.3 7.48-42.3-7.52-62.3-0.6708 2.8287 24.954 3.7639 25-30z"/>
  <path d="m1023.7 896.12c25.26 32.434 27.544 80.921 19.08 111.88l5 25-19.36 0.3-5.64-25.3c11.869-40.41 2.5445-72.149-15.75-101.27 2.1205-8.5885 8.1383-11.447 16.67-10.61z"/>
  <path d="m130 1300c7.6028 34.167 65.142 57.149 80 60h820c20-10 60-20 70-60 0.1972-35.303 0-50 0-70-20 30-38.396 50.161-70 60l-824.73-0.4021c-30.269-9.5979-65.269-39.598-75.269-59.598z"/>
</svg>

@font-face {
  font-family: "Special Elite";
  src: url("fonts/SpecialElite-Regular.ttf");
}

:root {
  --typing-speed: 0;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-image: url(img/bg.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

svg {
  width: 20%;
  max-width: 280px;
}

text {
  opacity: 0;
}

.page rect {
  fill: hsl(54, 35%, 91%);
}

.press {
  animation: pressDown var(--typing-speed);
}

@keyframes pressDown {
  to {
    transform: translateY(5px);
  }
}

.show {
  opacity: 1;
}

let keys = document.querySelectorAll(".keys use");
let bars = document.querySelectorAll(".bars path");
let spacebar = document.querySelector(".space-bar");
let lines = document.querySelectorAll(".page text");

let typingSpeed = 100; // in ms
let delay = typingSpeed;
let currentKeyIndex = -1;

function init() {
  document.documentElement.style.setProperty(
    "--typing-speed",
    `${typingSpeed}ms`
  );
}

function typeQuote() {
  init();

  lines.forEach((line) => {
    let content = line.innerHTML;

    line.innerHTML = "";
    line.classList.toggle("show");

    for (let i = 0; i < content.length; i++) {
      const char = content[i];

      writeCharacter(char, line);
      delay += typingSpeed;
    }
  });
}

function writeCharacter(char, line) {
  setTimeout(() => {
    toggleAnimation(char, currentKeyIndex);
    currentKeyIndex = getRandomKeyIndex();
    toggleAnimation(char, currentKeyIndex);

    line.innerHTML += char;
  }, delay);
}

function toggleAnimation(character, keyIndex) {
  if (keyIndex < 0) {
    return;
  }

  if (character !== " ") {
    bars[keyIndex].classList.toggle("press");
    keys[keyIndex].classList.toggle("press");
  } else {
    spacebar.classList.toggle("press");
  }
}

function getRandomKeyIndex() {
  return Math.floor(Math.random() * keys.length);
}

typeQuote();