Vincent van Git w/ GSAP 🎨

index.html

<svg class="vvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="vvg" viewBox="0 0 104.211 178.897">
  <defs>
    <clipPath id="b">
      <path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="red"/>
    </clipPath>
    <clipPath id="d">
      <ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304"/>
    </clipPath>
    <clipPath id="e">
      <ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/>
    </clipPath>
    <g id="a">
      <rect width="159.025" height="12.562" x="182.011" y="79.443" ry="0" fill="#fa4d32"/>
      <rect ry="0" y="92.004" x="182.011" height="12.562" width="159.025" fill="#fdb020"/>
      <rect width="159.025" height="12.562" x="182.011" y="104.566" ry="0" fill="#fdf133"/>
      <rect ry="0" y="117.128" x="182.011" height="12.562" width="159.025" fill="#1ce590"/>
      <rect width="159.025" height="12.562" x="182.011" y="129.689" ry="0" fill="#13a1e3"/>
      <rect ry="0" y="142.251" x="182.011" height="12.562" width="159.025" fill="#7e2ae4"/>
      <rect width="159.025" height="12.562" x="182.011" y="154.813" ry="0" fill="#9e4ea5"/>
    </g>
    <g id="c">
      <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 965.632 1098.357) scale(2 3)"/>
      <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 1282.497 967.107) scale(2 3)"/>
    </g>
  </defs>
  <g transform="translate(67.874 -9.03)">
    <g class="vvg__body">
      <ellipse class="vvg__shirt vvg__shirt--shade vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="148.83" rx="37.558" ry="34.35" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="vvg__shirt" d="M-19.325 101.965a37.558 34.35 0 00-34.001 34.165 37.558 34.35 0 0033.706 34.165 37.558 34.35 0 0034-34.165 37.558 34.35 0 00-33.705-34.165z" />
      <circle class="vvg__neck vvg-skin vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="112.584" r="13.363" stroke-linecap="round" stroke-linejoin="round"/>
      <ellipse class="vvg__body-outline vvg-stroke" transform="translate(3.085 -12.7)" ry="34.35" rx="37.558" cy="148.83" cx="-18.854" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vvg__head-group">
      <g class="vvg__head">
        <circle class="vvg-skin vvg__ear vvg-stroke" r="8.553" cy="73.563" cx="-59.067" stroke-linecap="round" stroke-linejoin="round" transform="translate(.406)"/>
        <g class="vvg__face">
          <circle class="vvg-skin--shade" cx="-15.769" cy="63.674" r="44.099" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-skin" d="M-21.87 20.047a44.1 44.1 0 00-37.998 43.627A44.1 44.1 0 00-21.84 107.3a44.1 44.1 0 0038-43.626 44.1 44.1 0 00-38.03-43.627z" fill="#f4e3d7"/>
        </g>
        <g class="vvg__beard">
          <path class="vvg-hair" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-hair--light" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0019.076 36.252 43.902 43.902 0 0020.79 5.201c24.355 0 44.1-19.744 44.1-44.1a44.09 44.09 0 00-.544-6.775c-.075 30.245-20.437 34.32-39.323 34.32-21.174 0-45.005-4.052-38.424-46.494z"/>
          <path class="vvg-stroke vvg__beard-outline" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <g class="vvg__moustache">
          <path class="vvg-hair" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vvg-hair--light" d="M-17.866 77.593a20.548 12.028 0 00-8.177 1.537 20.548 12.028 0 00-10.274 10.416H.546A20.548 12.028 0 00-9.728 79.13a20.548 12.028 0 00-8.138-1.537z"/>
          <path class="vvg__moustache-outline vvg-stroke" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" fill="none" stroke-width="1.654" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <g class="vvg__eyes-group">
          <g class="vvg-stroke vvg__eyes" transform="translate(.487)" stroke-width="1.296" stroke-linecap="round" stroke-linejoin="round">
            <circle r="1.998" cy="64.681" cx="-33.494"/>
            <circle cx=".983" cy="64.681" r="1.998"/>
          </g>
        </g>
        <rect class="vvg__hair vvg-hair" width="57.452" height="26.269" x="-44.495" y="22.4" ry="4.438"/>
        <g class="vvg__cheeks" transform="translate(-.468)">
          <circle r="3.875" cy="73.162" cx="-39.021"/>
          <circle cx="8.419" cy="73.162" r="3.875"/>
        </g>
        <g class="vvg__eyebrows vvg-stroke" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M-40.713 61.55a6.123 6.123 0 018.486-5.699"/>
          <path d="M9.176 61.55a6.123 6.123 0 00-8.487-5.7"/>
        </g>
      </g>
      <g class="vvg__cap">
        <rect class="vvg-stroke vvg__cap-strap" width="43.566" height="7.408" x="-37.953" y="42.542" ry="3.704" stroke-linecap="round" stroke-linejoin="round"/>
        <rect class="vvg-stroke vvg__cap-strap" ry="3.704" y="42.542" x="-22.798" height="7.408" width="28.411" stroke-linecap="round" stroke-linejoin="round"/>
        <ellipse class=" vvg-stroke vvg__cap-button" cx="-15.769" cy="10.626" rx="2.847" ry="1.157" stroke-linecap="round" stroke-linejoin="round"/>
        <circle class="vvg__cap-notch" cx="-17.198" cy="46.246" r=".945"/>
        <circle class="vvg__cap-notch" r=".945" cy="46.246" cx="-5.67"/>
        <circle class="vvg__cap-notch" cx="-11.339" cy="46.246" r=".945"/>
        <path class="vvg__cap-body vvg-stroke" d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" stroke-linecap="round" stroke-linejoin="round"/>
      </g>
    </g>
    <!-- <path d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" fill="#4d4d4d" stroke="#000" stroke-width="1.323" stroke-linecap="round" stroke-linejoin="round"/> -->
    <g class="vvg__bulb" transform="translate(-39.365 -11.864)" stroke-linecap="round">
      <path class="vvg__bulb-dashes" d="M10.794 5.982a22.935 22.935 0 1125.335.178" fill="none" stroke-linejoin="round" stroke-dasharray="1.79340955,21.52091451"/>
      <path class="vvg-stroke vvg__bulb-screw" d="M28.612-1.718a12.851 12.851 0 01-5.016 1.034 12.851 12.851 0 01-5.016-1.02v5.43a3.75 3.75 0 003.759 3.758h2.514a3.75 3.75 0 003.759-3.758z" stroke-linejoin="round"/>
      <path class="vvg-stroke vvg__bulb-screw" d="M28.612-1.718a12.851 12.851 0 01-5.016 1.034 12.851 12.851 0 01-5.016-1.02V1.08a3.75 3.75 0 003.759 3.758h2.514a3.75 3.75 0 003.759-3.758z" stroke-linejoin="round"/>
      <path class="vvg-stroke vvg__bulb-filament" d="M21.394-1.034v-9.22" />
      <path class="vvg-stroke vvg__bulb-screw" d="M28.612-1.718a12.851 12.851 0 01-5.016 1.034 12.851 12.851 0 01-5.016-1.02v.138a3.75 3.75 0 003.759 3.758h2.514a3.75 3.75 0 003.759-3.758z" stroke-linejoin="round"/>
      <path class="vvg-stroke vvg__bulb-filament" d="M25.627-1.034v-9.22" />
      <circle class="vvg__bulb-bulb vvg-stroke" r="12.851" cy="-13.535" cx="23.596" stroke-linejoin="round"/>
    </g>
    <g class="vvg__laptop" transform="translate(3.085 -12.7)">
      <path class="vvg__laptop-shell" d="M-65.538 131.734h93.37c1.564 0 2.94 1.263 2.822 2.822l-4.762 62.586c-.119 1.56-1.259 2.822-2.822 2.822h-83.317c-1.563 0-2.69-1.264-2.822-2.822l-5.291-62.586c-.132-1.558 1.258-2.822 2.822-2.822z" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="vvg__laptop-shell vvg__laptop-shell--main" d="M-60.888 134.865c-1.622 0-3.065 1.285-2.929 2.87l5.37 62.23H23.07c1.564 0 2.704-1.264 2.822-2.823l4.74-62.277z"/>
      <g transform="rotate(14.036 -546.221 140.257) scale(.0556)">
        <g clip-path="url(#b)">
          <use height="100%" width="100%" xlink:href="#c"/>
        </g>
        <g clip-path="url(#d)">
          <use height="100%" width="100%" xlink:href="#c"/>
        </g>
        <g clip-path="url(#e)">
          <use height="100%" width="100%" xlink:href="#c"/>
        </g>
        <path d="M211.925 958.105c0 19.907-28.6 38.819-63.311 38.819s-60.54-18.912-60.54-38.82c0-19.907 26.29-33.273 61.002-33.273 34.71 0 62.85 13.366 62.85 33.274z" fill="#e9c6af"/>
        <path d="M181.194 931.763c0 7.657-19.04 24.493-30.27 24.493s-32.118-16.836-32.118-24.493 20.24-12.477 31.47-12.477 30.918 4.82 30.918 12.477z"/>
        <path d="M84.784 826.317a16.549 16.095 0 00-16.48-14.731 16.549 16.095 0 00-16.548 16.095 16.549 16.095 0 0016.548 16.096 16.549 16.095 0 001.132-.039c.815-1.337 1.582-2.727 2.471-3.983a65.703 65.703 0 015.055-6.283 65.597 65.597 0 015.713-5.548c.668-.576 1.417-1.058 2.109-1.607z" fill="#e9c6af"/>
        <path d="M214.764 826.317a16.549 16.095 0 0116.48-14.731 16.549 16.095 0 0116.548 16.095 16.549 16.095 0 01-16.549 16.096 16.549 16.095 0 01-1.131-.039c-.816-1.337-1.582-2.727-2.472-3.983a65.703 65.703 0 00-5.055-6.283 65.597 65.597 0 00-5.712-5.548c-.67-.576-1.418-1.058-2.11-1.607z" fill="#e9c6af"/>
        <path d="M147.731 815.358c-13.396 0-26.022 1.079-37.671 3.334v11.353c11.649-2.255 24.275-3.334 37.671-3.334 15.104 0 29.459 1.373 42.667 4.256v-11.355c-13.208-2.883-27.564-4.254-42.667-4.254z" fill="red"/>
        <path d="M165.195 816.013a15.875 7.813 0 014.43 5.412 15.875 7.813 0 01-5.414 5.863c9.116.653 17.878 1.866 26.186 3.68v-11.356c-8.007-1.748-16.44-2.931-25.202-3.6z" fill="#e50000"/>
        <path d="M148.06 789.038c-43.49 0-75.872 19.481-83.284 63.857 12.322-10.516 27.906-18.695 45.285-22.652 0 0-2.446-12.499 10.25-16.029 14.513-4.035 18.403-3.943 27.749-4 10.2-.061 15.075-.07 30.338 4 14.187 3.784 12 17.113 12 17.113 17.218 4.421 31.846 10.722 44.264 21.568-7.277-46.03-42.375-63.857-86.602-63.857z" fill="#1a1a1a"/>
        <circle r="11.185" cy="894.081" cx="97.242" fill="#faa" fill-opacity=".577"/>
        <circle r="11.185" cx="201.851" cy="894.081" fill="#faa" fill-opacity=".577"/>
        <path d="M96.601 864.041a21.271 21.271 0 01-6.78 15.572 21.271 21.271 0 01-16.02 5.644" fill="none" stroke="#e9afaf" stroke-width="2.983" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M203.53 864.041a21.271 21.271 0 006.78 15.572 21.271 21.271 0 0016.02 5.644" fill="none" stroke="#e9afaf" stroke-width="2.983" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M77.29 854.608c-6.508-.07-13.363.182-22.8 2.131l-14.318 2.769 2.308 15.038c2.094.293 4.984 1.016 6.352 2.848 3.528 4.722 1.202 9.286 2.003 17.625 2.67 27.781 11.92 33.596 26.247 35.267 7.502.875 22.816 2.282 33.28-1.433 9.456-3.357 18.223-9.868 24.158-17.96 6.274-8.553 6.948-18.235 10.843-25.726 2.76-5.308 7.7-4.176 9.258 0 2.951 7.91 4.379 17.173 10.653 25.726 5.935 8.092 14.702 14.603 24.159 17.96 10.463 3.715 25.777 2.308 33.279 1.433 14.326-1.671 23.578-7.486 26.249-35.267.801-8.339-1.525-12.903 2.003-17.625 1.414-1.893 4.463-2.611 6.567-2.885l2.297-14.962-14.522-2.808c-15.1-3.12-23.591-1.89-34.623-1.957-4.093-.025-8.777.115-13.136.573-8.125.855-16.176 2.382-24.174 4.05-7.988 1.665-14.94 6.1-23.098 5.942-7.869-.153-15.615-4.977-23.313-6.616-8.132-1.732-14.824-3.106-24.713-3.376-4.794-.13-9.043-.598-13.136-.573-4.137.026-7.918-.132-11.823-.174z"/>
        <path d="M85.28 860.471c-10.088.168-24.807.706-28.48 12.251-3.277 15.249-3.122 32.76 5.735 45.627 7.396 10.745 23.365 8.637 35.258 8.22 18.899-.663 35.138-15.383 40.158-33.389 1.93-7.753 4.168-13.928.696-19.382-5.946-9.34-20.099-11.778-30.58-12.967a443.553 443.553 0 00-22.787-.36z" fill="#333"/>
        <path d="M56.04 864.299a4.079 1.692 0 01-4.058 1.692 4.079 1.692 0 01-4.1-1.675 4.079 1.692 0 014.017-1.71 4.079 1.692 0 014.14 1.658" fill="#b3b3b3"/>
        <path d="M214.515 860.471c10.088.168 24.807.706 28.481 12.251 3.276 15.249 3.12 32.76-5.736 45.627-7.396 10.745-23.365 8.637-35.257 8.22-18.9-.663-35.139-15.383-40.16-33.389-1.928-7.753-4.167-13.928-.695-19.382 5.946-9.34 20.1-11.778 30.58-12.967a443.553 443.553 0 0122.787-.36z" fill="#333"/>
        <path d="M243.755 864.299a4.079 1.692 0 004.058 1.692 4.079 1.692 0 004.1-1.675 4.079 1.692 0 00-4.017-1.71 4.079 1.692 0 00-4.14 1.658" fill="#b3b3b3"/>
        <path d="M100.812 860.598l-19.186 66.305c5.85.159 11.675-.045 16.894-.378l18.586-64.222c-5.549-1.363-11.032-1.57-16.294-1.705z" fill="#fff"/>
        <path d="M89.154 860.456c-1.292.002-2.586 0-3.875.014-1.081.018-2.235.05-3.403.09l-17.662 59.853c1.729 1.827 3.77 3.172 6.025 4.148z" fill="#fff"/>
      </g>
      <path class="vvg__laptop-shell vvg__laptop-shell--shade" d="M21.505 131.734a90.813 70.516 29.586 01-1.449 15.21 90.813 70.516 29.586 01-83.63 44.235l.505 5.963c.132 1.558 1.26 2.823 2.823 2.823h83.315c1.564 0 2.704-1.264 2.822-2.823l4.763-62.586c.119-1.559-1.259-2.822-2.822-2.822z"/>
      <path class="vvg-stroke" d="M-65.538 131.734h93.37c1.564 0 2.94 1.263 2.822 2.822l-4.762 62.586c-.119 1.56-1.259 2.822-2.822 2.822h-83.317c-1.563 0-2.69-1.264-2.822-2.822l-5.291-62.586c-.132-1.558 1.258-2.822 2.822-2.822z" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <circle class="vvg__laptop-badge" r="5.859" cy="165.849" cx="-18.854" />
    </g>
  </g>
  <g class="codepen"></g>
  <g class="vvg__code-block vvg__code-block--left">
    <path d="M5.358 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--left">
    <path d="M5.358 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--left">
    <path d="M5.358 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--left">
    <path d="M5.358 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--left">
    <path d="M5.358 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--right">
    <path d="M84.356 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--right">
    <path d="M84.356 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--right">
    <path d="M84.356 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--right">
    <path d="M84.356 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
  <g class="vvg__code-block vvg__code-block--right">
    <path d="M84.356 99.059v-1.514l4.868-2.106v1.44l-2.92 1.185q-.16.063-.318.095-.17.032-.318.042-.169.022-.328.022v.105q.16.011.328.032.149.021.318.053.17.032.317.106l4.287 1.873 2.709-7.387h1.64l-.688 1.863 5.98 2.677v1.514l-4.868 2.106v-1.44l2.92-1.185q.16-.063.318-.095.17-.032.317-.053.17-.01.328-.01v-.106q-.169-.011-.338-.032-.148-.021-.318-.053-.158-.042-.307-.106l-4.487-1.99-2.508 6.858h-1.64l.497-1.333z" style="-inkscape-font-specification:'JetBrains Mono, Ultra-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" aria-label="&lt;/&gt;" font-weight="800" font-size="10.583" font-family="JetBrains Mono" letter-spacing="0" word-spacing="0" stroke-width=".265"/>
  </g>
</svg>
<input id="volume" type="checkbox"/>
<label for="volume" title="Toggle sound">
  <svg viewBox="0 0 24 24">
    <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
  </svg>
  <svg viewBox="0 0 24 24">
    <path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
  </svg>
</label>

script.babel

const {
  gsap: {
    to,
    set,
    timeline,
    utils: { random },
  },
} = window


/**
 * Audio Attribution
 * Towel Defence Ingame[https://freemusicarchive.org/music/sawsquarenoise/Towel_Defence_OST/Towel_Defence_Ingame] by sawsquarenoise[https://freemusicarchive.org/music/sawsquarenoise]. Licensed under CC BY 4.0[https://creativecommons.org/licenses/by/4.0/]
 * Keyboard Typing[https://freesound.org/people/Trollarch2/sounds/331656/] by Trollarch2[https://freesound.org/people/Trollarch2/]. Licensed under CC 0[https://creativecommons.org/publicdomain/zero/1.0/]
 * success_02.wav[https://freesound.org/people/gamer127/sounds/463067/] by gamer127[https://freesound.org/people/gamer127/]. Licensed under CC 0[http://creativecommons.org/publicdomain/zero/1.0/]
 */

const AUDIO = {
  TADA: new Audio('https://assets.codepen.io/605876/chip--success.mp3'),
  CLACKING: new Audio(
    'https://assets.codepen.io/605876/keyboard-typing-mechanical.mp3'
  ),
  TUNE: new Audio(
    'https://assets.codepen.io/605876/ChipTune-SawSquareNoise--TRIMMED.mp3'
  ),
}
AUDIO.TADA.muted = AUDIO.CLACKING.muted = AUDIO.TUNE.muted = true
AUDIO.TUNE.volume = 0.75
AUDIO.CLACKING.playbackRate = 2
AUDIO.TUNE.loop = AUDIO.CLACKING.loop = true

const toggleAudio = () => {
  AUDIO.TADA.muted = AUDIO.CLACKING.muted = AUDIO.TUNE.muted = !AUDIO.TUNE.muted
}

document.querySelector('#volume').addEventListener('input', toggleAudio)

const TIMING = {
  DOWN: 0.2,
  UP: 0.5,
}

const BLINK = () => {
  const delay = random(2, 6)
  timeline().to('.vvg__eyes', {
    delay,
    onComplete: () => BLINK(),
    scaleY: 0.1,
    repeat: 1,
    yoyo: true,
    duration: 0.05,
  })
}
BLINK()

const RESET = () => {
  set('.vvg__eyebrows', { display: 'none' })
  set(['.vvg__eyes', '.vvg__ear', '.vvg__eyes-group', '.vvg__code-block'], {
    transformOrigin: '50% 50%',
  })
  set('.vvg__head-group', { transformOrigin: '50% 60%' })
  set('.vvg__bulb-dashes', { transformOrigin: '50% 50%', scale: 0, opacity: 1 })
  set('.vvg__bulb', { display: 'none' })
  set('.vvg__code-block', { scale: 0 })
  set('.vvg__code-block', {
    '--block-color': () => `var(--owl-${Math.floor(random(1, 6))})`,
    rotation: () => random(-45, 45),
  })
}

const LAPTOP_ROCK = timeline({
  paused: true,
})
  .to('.vvg__laptop', {
    repeatRefresh: true,
    repeat: -1,
    yoyo: true,
    duration: 0.1,
    xPercent: () => random(-4, 4),
    yPercent: () => random(-4, -1),
  })
  .to('.vvg__head-group', {
    repeat: -1,
    yoyo: true,
    duration: 0.1,
    yPercent: '+=1',
  })

let THINK_TL
const THINK = () => {
  const delay = random(1, 3)
  const repeatDelay = random(2, 5)
  THINK_TL = timeline().to('.vvg__head-group', {
    delay,
    repeatDelay,
    onComplete: () => THINK(),
    rotate: () => random(-10, 10),
    repeat: 1,
    yoyo: true,
    duration: () => random(1, 3),
  })
}
THINK()

const FIRE_BLOCKS = timeline({
  paused: true,
})
const BLOCKS = document.querySelectorAll('.vvg__code-block')
for (const BLOCK of BLOCKS) {
  const BLOCK_TL = timeline({
    repeatRefresh: true,
    repeat: -1,
  })
    .set(BLOCK, { scale: 0, xPercent: 0, yPercent: 0 })
    .to(
      BLOCK,
      {
        duration: () => random(0.25, 2),
        scale: () => random(0.5, 2),
        xPercent: () =>
          BLOCK.classList.contains('vvg__code-block--left')
            ? random(-300, -100)
            : random(100, 300),
        yPercent: () => random(-1000, -200),
      },
      0
    )
  FIRE_BLOCKS.add(BLOCK_TL, 0)
}

RESET()
/**
 * Actual Timeline
 * 1. Chillin'
 * 2. Eurekah moment!
 * 2.a. Play sound!
 * 2.b. Show lightbulb && eyebrows
 * 2.c. Animate the lightbulb dashes and switching on the lightbulb.
 * 3.a. Move head down into coding mode - TRICKY PART :(
 * 3.b. Code blocks flying out in random directions
 *
 *
 * 3.c. Head bopping??
 * 4. Rinse and repeat?? repeatDelay of random(won't refresh) or BLINK recursion.
 */
const SHOCK_TL = () =>
  timeline()
    .set(['.vvg__bulb', '.vvg__eyebrows'], { display: 'block' })
    .to('.vvg__head-group', {
      rotate: 0,
      duration: 0.2,
      onStart: () => {
        THINK_TL.kill()
      },
    })
    .to('.vvg__bulb-dashes', { scale: 1.5, duration: 0.35 })
    .to('.vvg__bulb-dashes', { opacity: 0, duration: 0.2 }, '>-0.1')

const EYE_MOVEMENT = 3
const EYE_ROCK = timeline({
  repeat: -1,
  paused: true,
})
  .to('.vvg__eyes-group', { xPercent: EYE_MOVEMENT })
  .to('.vvg__eyes-group', { xPercent: -EYE_MOVEMENT })

const DOWN = () =>
  timeline({
    onComplete: () => {
      EYE_ROCK.play()
      LAPTOP_ROCK.restart()
      FIRE_BLOCKS.restart()
      AUDIO.CLACKING.play()
      AUDIO.TUNE.play()
    },
    onStart: () => {
      set(['.vvg__eyebrows', '.vvg__bulb'], { display: 'none' })
    },
  })
    .to('.vvg__head-group', { duration: TIMING.DOWN, yPercent: 10 }, 0)
    .to('.vvg__eyes', { duration: TIMING.DOWN, scaleY: 0.9, yPercent: 75 }, 0)
    .to(['.vvg__cheeks'], { duration: TIMING.DOWN, yPercent: 55 }, 0)
    .to('.vvg__cap', { duration: TIMING.DOWN, yPercent: 10 }, 0)
    .to('.vvg__moustache', { duration: TIMING.DOWN, yPercent: 20 }, 0)
    .to('.vvg__ear', { duration: TIMING.DOWN, yPercent: -40, scaleY: 0.85 }, 0)

const UP = delay =>
  timeline({
    delay,
    onStart: () => {
      EYE_ROCK.pause()
      EYE_ROCK.time(0)
      LAPTOP_ROCK.pause()
      LAPTOP_ROCK.time(0)
      FIRE_BLOCKS.pause()
      FIRE_BLOCKS.time(0)
      AUDIO.CLACKING.pause()
      AUDIO.CLACKING.currentTime = 0
      to(AUDIO.TUNE, {
        volume: 0,
        duration: 1,
        onComplete: () => {
          AUDIO.TUNE.pause()
          AUDIO.TUNE.currentTime = 0
          AUDIO.TUNE.volume = 0.75
        },
      })
      to('.vvg__eyes-group', { xPercent: 0 })
      THINK()
    },
  })
    .to('.vvg__head-group', { duration: TIMING.UP, yPercent: 0 }, 0)
    .to('.vvg__eyes', { duration: TIMING.UP, scaleY: 1 }, 0)
    .to(['.vvg__eyes', '.vvg__cheeks'], { duration: TIMING.UP, yPercent: 0 }, 0)
    .to('.vvg__cap', { duration: TIMING.UP, yPercent: 0 }, 0)
    .to('.vvg__moustache', { duration: TIMING.UP, yPercent: 0 }, 0)
    .to('.vvg__ear', { duration: TIMING.UP, yPercent: 0, scaleY: 1 }, 0)

// HEAD_TL()

const CODE = () => {
  const delay = random(2, 6)
  timeline({
    delay,
    onComplete: () => {
      RESET()
      CODE()
    },
    onStart: () => {
      AUDIO.TADA.play()
    },
  })
    .add(SHOCK_TL())
    .add(DOWN())
    .add(UP(random(3, 10)))
}

CODE()

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.stylus

*
  box-sizing border-box

:root
  --green-one hsl(130, 64%, 76%)
  --green-two hsl(136, 53%, 51%)
  --green-three hsl(136, 54%, 41%)
  --green-four hsl(139, 54%, 28%)
  --grey hsl(216, 14%, 93%)
  --shirt var(--green-one)
  --shirt-shade var(--green-two)
  --skin hsl(0, 20%, 90%)
  --skin-shade hsl(0, 20%, 70%)
  --stroke hsl(0, 0%, 20%)
  --laptop hsl(0, 0%, 78%)
  --laptop-main hsl(60, 1%, 30%)
  --laptop-shade hsla(240, 1%, 23%, 0.5)
  --laptop-badge hsl(0, 0%, 100%)
  --beard hsl(30, 50%, 50%)
  --beard hsl(30, 80%, 38%)
  --beard-light hsl(30, 50%, 70%)
  --beard-light hsl(30, 80%, 58%)
  --eyes var(--stroke)
  --strap hsl(0, 50%, 50%)
  --strap var(--green-four)
  --cheeks hsl(0, 50%, 75%)
  --cap hsl(0, 0%, 25%)
  --sparks hsla(60, 100%, 80%, 0.85)
  --bulb hsla(60, 100%, 80%, 0.85)
  --filament hsl(0, 0%, 0%)
  --screw hsl(0, 0%, 80%)
  --bg hsl(216, 14%, 50%)
  // Night Owl Colors
  --owl-1 hsl(50, 98%, 78%)
  --owl-2 hsl(76, 68%, 67%)
  --owl-3 hsl(14, 91%, 69%)
  --owl-4 hsl(175, 42%, 65%)
  --owl-5 hsl(275, 70%, 75%)


body
  display flex
  align-items center
  justify-content center
  min-height 100vh
  background var(--bg)

.vvg
  height 50vmin
  overflow visible !important

  &__code-block
    fill var(--block-color, var(--owl-1))

  &__bulb
    &-bulb
      fill var(--bulb)
    &-dashes
      stroke var(--sparks)
      stroke-width 4px
    &-filament
      stroke var(--filament)
    &-screw
      fill var(--screw)

  &__cheeks
    fill var(--cheeks)

  &__cap
    &-body
      fill var(--cap)
    &-strap
      fill var(--strap)
    &-notch
      fill var(--stroke)

  &-stroke
    stroke var(--stroke)
    stroke-width 2px

  &__eyes
    fill var(--eyes)
    stroke var(--eyes)

  &-hair
    fill var(--beard)

    &--light
      fill var(--beard-light)


  &__shirt
    fill var(--shirt)

    &--shade
      fill var(--shirt-shade)

  &-skin
    fill var(--skin)
    &--shade
      fill var(--skin-shade)

  &__laptop
    &-badge
      fill var(--laptop-badge)
    &-shell
      fill var(--laptop)

      &--main
        fill var(--laptop-main)

      &--shade
        fill var(--laptop-shade)


label
  height 44px
  width 44px
  position fixed
  bottom 1rem
  right 1rem
  cursor pointer

  & > svg
    position absolute
    height 100%
    width 100%
    top 0
    left 0

  path
    fill hsl(216, 14%, 30%)

  svg:nth-of-type(1)
    display none

[type='checkbox']
  // opacity 0
  height 0
  width 0

:checked ~ label
  svg:nth-of-type(1)
    display block
  svg:nth-of-type(2)
    display none

vincent-van-git-w-gsap.markdown

Vincent van Git w/ GSAP 🎨

A Pen by Jhey on CodePen.

License.