<svg viewBox="0 0 800 800">
  <path id="bg" d="M0 0h800v800H0z" />
  <path id="o-letter" fill="#e1e1e1" fill-opacity="1" stroke-width="5.741" d="M404.18 129.867A345.179 272.13 0 0059 401.998a345.179 272.13 0 00345.18 272.129 345.179 272.13 0 00345.18-272.129 345.179 272.13 0 00-345.18-272.13zm-.67 29.031a247.13 247.13 0 01247.13 247.13 247.13 247.13 0 01-247.13 247.13 247.13 247.13 0 01-247.13-247.13 247.13 247.13 0 01247.13-247.13z" opacity="1" />
  <path id="vertical-line" class="line" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-dasharray="none" stroke-dashoffset="35" stroke-linecap="round" stroke-miterlimit="1.2" stroke-opacity="1" stroke-width="3" d="M401.429 196.62l.714 430.713v0" opacity="1" />
  <path id="horizontal-line" class="line" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-dasharray="none" stroke-dashoffset="35" stroke-linecap="round" stroke-miterlimit="1.2" stroke-opacity="1" stroke-width="3" d="M189.286 411.62l425.833 1.132" opacity="1" />
  <g id="symbol1" class="symbol" stroke-dasharray="none" stroke-dashoffset="35" stroke-miterlimit="1.2">
    <path id="path4759" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1" d="M296.429 259.565c-1.045 2.787.247 5.706.36 8.377 5.225 2.988 6.105 3.48 10.354 3.945 5.363.784 9.867-.95 14.91-2.5 5.65-5.975 5.996-11.404 6.876-19.197-9.288-11.55-17.145-11.492-27.5-8.392-2.607 5.666-3.05 11.858-5 17.767z" opacity="1" />
    <path id="path4761" fill="#e0e0e0" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1" d="M298.753 250.297c3.523-.287 6.972-.82 10.732-.315.712-.647 2.131 5.547 1.01 7.07-.299.408 4.925.885 4.925.885 1.781 1.096 2.138 2.631 2.904 4.04l-2.525 1.39 2.115 5.287 4.108.338c1.731-1.47 6.503-11.244 6.907-18.802-5.39-6.298-10.493-8.77-15.908-9.931-3.897-.028-7.83.905-11.769 1.955z" opacity="1" />
    <path id="path4763" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1.7" d="M305.833 272.171l-8.47 5.842-11.49 6.693-12.248.631-10.228-5.556-5.43-3.41-2.777-6.565-5.809.126-3.535 3.41-2.147 3.535.505 3.914 4.672 3.157h5.304l1.262 3.536 3.41 2.02 5.43 6.06 11.11 5.935 6.314 2.715 14.016-2.336 9.344-3.788 5.808-2.525" opacity="1" />
    <path id="path4765" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="square" stroke-opacity=".996" stroke-width="1.3" d="M257.968 276.372l11.616-8.713" opacity="1" />
    <path id="path4767" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1" d="M265.699 295.876l-2.849-2.827 1.479-2.827" opacity="1" />
    <path id="path4769" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1" d="M262.23 292.66l-3.378-3.156 1.357-2.589" opacity="1" />
    <path id="path4771" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1.7" d="M322.054 269.387c4.506 2.758 6.972 6.39 9.91 9.821 3.646 11.077 2.989 18.142 1.072 29.107-2.48 8.148-3.084 16.68-4.197 25.09l-.803 3.214" opacity="1" />
    <path id="path4773" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1.7" d="M295.722 301.878l-.276 8.937-2.142 12.5-1.875 6.25 4.285 5" opacity="1" />
    <path id="path4775" fill="none" fill-opacity="1" stroke="#e1e1e1" stroke-linecap="round" stroke-opacity=".996" stroke-width="1.8" d="M275.393 301.5l6.313 2.714 13.563-1.244" opacity="1" />
    <path id="path4782" fill="#e1e1e1" fill-opacity=".995" stroke="none" stroke-linecap="round" stroke-opacity="1" stroke-width="1" d="M291.429 329.565l-14.375 31.43-4.822 19.463s8.125 4.732 8.036 5.09c-.09.357 45.982-5.045 45.982-5.045 8.764-8.947 5.506-9.674 16.071-4.509 3.902 5.82 8.007 13.152 12.768 7.054l-6.518-13.304 2.768-.714 9.732 6.071c1.032 5.667 2.091 5.808 7.322 7.054l.625-10.804-12.41-21.16c-4.897-.472-6.031 4.456-8.662 8.035 0 0-5.848-.09-5.49-.09.356 0-2.902-4.106-2.902-4.106-2.403-.588-3.634 2.043-6.429 6.74 0 0-18.214.224-17.768.045 4.758-7.977 12.406-22.265 12.679-24.196-6.782 1.734-13.612 2.868-20.804-.446l-3.84-6.608-2.678 4.822-5 .178z" opacity="1" />
    <path id="path4796" fill="#e1e1e1" fill-opacity="1" stroke="none" stroke-linecap="square" stroke-opacity="1" stroke-width="1" d="M319.587 285.021s3.74 4.657 3.613 4.215c-.126-.442 2.637 6.013 2.637 6.013l-.82-6.313-3.788-4.735z" opacity="1" />
  </g>
  <path id="symbol2" class="symbol" fill="#e1e1e1" d="M492.321 226.798l-.178 23.571-8.214 2.857s-6.965 67.679-6.786 66.964c.178-.714-4.107 61.25-4.107 61.25l11.142.011.108-19.832h8.088l-.053-5.536 15.074-.063.01 5.706 11.188-.002-.022 23.11 10.536.178-.367-5.063 4.296-1.009-16.072-126.071-10.357-4.643-.614-27.066c-.994.337-1.94.808-2.62 2.034l-.694 23.068-5.536.714-3.214-27.679z" />
  <g id="symbol3" class="symbol" stroke="#e1e1e1" stroke-dasharray="none" stroke-dashoffset="35" stroke-linecap="square" stroke-miterlimit="1.2" stroke-opacity=".996">
    <path id="path4786" fill="none" fill-opacity="1" stroke-width="3.5" d="M278.802 497.28c-21.125 17.186-25.663 41.229-27.78 58.904l29.498-.326c-4.305-17.923-5.275-28.48 11.414-35.03" opacity="1" />
    <path id="path4788" fill="#e0e0e0" fill-opacity=".988" stroke-width="1" d="M371.83 468.47l-7.166 4.2-37.322.053-1.947-3.336-32.24.275-8.544 3.387-11.41-3.278-1.217 3.53 11.364 3.535 2.433 9.113c-3.218 3.661-8.938 7.567-10.892 10.334l17.045 21.213 9.091 8.334h14.268l6.82-9.977 7.576-5.933 3.03-13.26.683-4.158 24.385-.104v-4.386c-2.637-.025-11.063-.113-11.063-.113l.034-2.018c3.516-.05 8.906-.071 12.066 0l12.912-.025zm-69.375 8.434h3.307v1.83l19.504-.066v2.588l-22.787-.16zm-.154 10.01h3.304v1.83l19.506-.066v2.588l-22.789-.16zm-.483 9.727h2.487v1.377l14.672-.05v1.948l-17.141-.12zm14.967 13.966l.358 6.428-4.375 6.274-10.268-.024-1.518-.892-4.107-5.268 2.857-5.447 3.303 1.787 8.75 7.588-3.838-10.178z" opacity="1" />
  </g>
  <g id="symbol4" class="symbol" fill="#e1e1e1" fill-opacity="1" stroke-width="1">
    <path id="path4794" d="M512.944 561.018l2.4 2.146s-5.052 8.46-5.052 9.092c0 .63-9.596.378-9.596.378l-7.45-7.323.758-10.733 1.632-2.13 3.573-.327-1.038 1.952 1.262 5.177 1.39-3.536 2.146-.378v4.419l-.505 6.06 2.399 2.779 2.778.252 3.156-3.156z" opacity="1" />
    <path id="path4798" d="M529.107 445.012l-16.795 26.136-21.844 4.926-7.197-11.111-8.586-4.168-39.144 12.879 13.222 1.305 3.663 8.707 18.66-5.715 5.625 19.465 4.017 26.607-19.285-19.018-1.16-4.107-2.322-1.875-5.893.178-3.928 3.93.358 3.66 6.517 2.857 7.41 11.16-.177 4.555 7.23 2.32 18.573 18.572 8.857 5.434 7.393-2.041.447-4.197 3.303-1.963 2.322 5.088 5.98-3.57.27-5.805 11.338 1.517 20.357 6.25 4.733 6.52 6.875-1.787-1.073-5.088-6.008-.102-.505-1.01-4.797-3.662-5.178-7.322-26.643-6.945-5.05 4.924.757-8.46-.378-17.046-6.188-10.608-3.662-2.398 11.238-6.313 15.404-11.996 14.522-21.213-8.965-4.292zm6.44 7.828l2.02 1.01s-23.865 26.264-23.74 26.77c.127.504-25.632 8.333-25.632 8.333l-5.809 9.47 2.274-11.616 27.4-8.965zm-75.762 54.17l13.006 13.888 11.238 10.735 3.283 3.408 9.217 1.389 1.389 3.031c-2.4-.253-12.88-2.398-12.88-2.398l-13.89-13.891zm42.68 15.91l2.271 3.408-3.156 11.996z" opacity="1" />
    <path id="path4806" d="M517.604 519.715l2.857-7.053-2.59-8.929-2.588-4.196-1.072 5.536 2.322 2.5.268 5.803z" opacity="1" />
    <path id="path4808" d="M426.197 474.839l10.228 8.586 11.301 7.703-3.472-7.324 5.619-1.578-8.018-3.915-6.188.695-7.45-7.197-1.894 1.262z" opacity="1" />
    <path id="path4810" d="M543.943 454.13l8.081-.946-6.692-5.745 7.829 1.262 5.492 4.04.695-3.598-13.574-6.692s-12.627 3.346-11.68 3.283c.947-.063 9.723 2.904 9.723 2.904l2.715 3.094z" opacity="1" />
  </g>
</svg>

:root {
  --symbol-animation-duration: 1.5s;
  --symbol-animation-start: 4s;
}

body {
  background-color: black;
  display: flex;
  justify-content: center;
}

svg {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

#o-letter,
.line,
.symbol {
  opacity: 0;
}

let tl1 = new TimelineMax();
let symbolRevealDuration = 3;
let symbolRevealOverlap = 2.5;
let symbolEase = "slow(0.7, 0.7, false)";

tl1.set("#vertical-line", {
  transformOrigin: "center",
  scaleY: 0,
});

tl1.set("#horizontal-line", {
  transformOrigin: "center",
  scaleX: 0,
});

tl1.to("#o-letter", {
  duration: 3,
  opacity: 1,
  ease: "power1.in",
});
tl1.to(
  "#vertical-line",
  {
    duration: 0.1,
    opacity: 1,
  },
  "-=0.76"
);
tl1.to(
  "#vertical-line",
  {
    duration: 2.5,
    ease: "power1.in",
    scaleY: 1,
  },
  "-=0.75"
);
tl1.to(
  "#horizontal-line",
  {
    duration: 0.1,
    opacity: 1,
  },
  "-=2.1"
);

tl1.to(
  "#horizontal-line",
  {
    duration: 2.5,
    ease: "power1.in",
    scaleX: 1,
  },
  "-=2"
);

tl1.to(
  "#symbol1",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=1.25`
);

tl1.to(
  "#symbol2",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

tl1.to(
  "#symbol3",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

tl1.to(
  "#symbol4",
  {
    duration: symbolRevealDuration,
    ease: symbolEase,
    opacity: 1,
  },
  `-=${symbolRevealOverlap}`
);

let svg = document.getElementsByTagName("svg")[0];
svg.addEventListener("click", replay);

function replay() {
  tl1.restart();
}