svg/animate/inha_character_square.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.6 164.9">
  <style>
    .character {
      fill-opacity: 0;
    }
    .character__i {
      fill: #e8380d;
      stroke: #e8380d;
      stroke-dasharray: 250;
      stroke-dashoffset: 250;
      animation: fill-in 1s linear forwards;
    }
    .character__n {
      fill: #f39800;
      stroke: #f39800;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      animation: fill-in 1.5s linear 0.5s forwards;
    }
    .character__h {
      fill: #009d85;
      stroke: #009d85;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      animation: fill-in 1.5s linear 1s forwards;
    }
    .character__a {
      fill: #005bac;
      stroke: #005bac;
      stroke-dasharray: 350;
      stroke-dashoffset: 350;
      animation: fill-in 1.3s linear 1.5s forwards;
    }
    .text {
      fill: #005bac;
      opacity: 0;
      transform-origin: 77.3px 82.4px;
      animation: rotate-in 0.5s ease-in-out 2.5s forwards;
    }

    @keyframes fill-in {
      80%{
        fill-opacity: 0;
        stroke-dashoffset: 0;
        stroke-opacity: 1;
      }
      100% {
        fill-opacity: 1;
        stroke-dashoffset: 0;
        stroke-opacity: 0;
      }
    }
    @keyframes rotate-in {
      from {
        opacity: 0;
        transform: rotate(-90deg);
      }
      to {
        opacity: 1;
        transform: rotate(0);
      }
    }
  </style>
  <g class="character">
    <path class="character__i" d="M84.7 0c4.4 38.4-29 51.7-36 84.6C56.2 65.8 74.1 58 85.6 48.8 99.1 38.1 109 12.6 84.7 0z"/>
    <path class="character__n" d="M105 30.1C101.4 43.4 95 50 82.2 58.8c-9.5 6.6-44.6 22.4-29.3 65.3.2-19.9 10.9-30.2 23.8-37.8-7.9 16.8-5.6 32.1.6 42.7 3.7-17.8 10.8-29.3 19.6-36.9S118.8 75 119.8 55c-3.8 8.1-11.6 15.7-23.9 19.3 6.9-12.4 12.2-26.2 9.1-44.2z"/>
    <path class="character__h" d="M145 70.6c-2.9 6.3-11.2 19.2-22.5 32.3-3.2 2.3-7.8 4.1-12.8 5.7 8.5-9.9 16.7-27.3 13.9-42.4-3 11.3-9.4 20.3-21.8 29.5-8.5 6.4-16.5 17.8-20.8 37.3 5.3-4.5 14.9-10.5 23.6-19 2.5-.1 5.7.1 7.9-.4A129.6 129.6 0 0 1 84 135.3c43.9-14.9 66.2-47.5 61-64.7z"/>
    <path class="character__a" d="M150.1 83.6c-7.3 29.3-38.8 48.8-62.2 54.7a97.7 97.7 0 0 0 18.5-.8 182.8 182.8 0 0 0 18.5 4.7c-12.9 12.6-33.7 21.1-60.4 22.1 82 7 99.8-50.9 85.6-80.7zm-37.7 52.8c12.2-2.8 20-8.3 25.4-14.4a48.3 48.3 0 0 1-7.9 14.6c-5.8.2-11.7.1-17.5-.2z"/>
  </g>
  <g class="text">
    <path class="text__i" d="M67.1 13l1.7-.5v.5l-5.3 1.4v-.5l1.6-.4L62 1.9l-1.6.4v-.4L65.5.5l.2.4-1.7.4z"/>
    <path class="text__n" d="M59.2 15.3l1.5-.7.2.4-3.8 1.7-9.6-5.7 3.6 8 1.8-.8v.4l-3.7 1.7-.2-.4 1.5-.7-5.1-11.5.2-.2 12.9 7.6-4.8-10.5-1.8.8-.2-.4 3.8-1.8.2.5-1.5.6z"/>
    <path class="text__h" d="M39.4 26.7l1.3-.9.3.3-4.3 3.2-.3-.3 1.4-1-7.2-9.7-1.4 1-.2-.3 4.3-3.2.2.3-1.3 1 3.6 4.8 4.5-3.4-3.6-4.8-1.3 1-.2-.3 4.3-3.3.2.4-1.3 1 7.2 9.7 1.3-1.1.3.4-4.3 3.2-.3-.3 1.3-1-3.3-4.5-4.5 3.3z"/>
    <path class="text__a" d="M24.9 30.5l2-2.3 2.4 4.3zm0-6.9l1-1.1-.3-.3-2.7 3 .3.3 1.3-1.5 2.1 3.7-2.2 2.5-3.9-1.8 1.3-1.4-.3-.3-3.9 4.4.3.3 1.1-1.3 12.2 5.4.3-.3z"/>
    <path class="text__u" d="M21.6 47.6l.7-1.5.4.2-2.4 5-.4-.2.8-1.7-7.7-3.7c-2.1-1-3.4-1-4.6 1.7s-.4 4 1.6 4.9l7.6 3.6.8-1.7.5.2-1.8 3.6-.4-.2.7-1.4-7.8-3.7c-2.3-1.1-3.3-2.3-1.5-6.1s3.3-3.9 5.5-2.8z"/>
    <path class="text__n" d="M15.5 61.9l.3-1.6h.5l-1 4-10.4 4.2 8.5 2 .5-1.9h.4l-.9 4h-.5l.4-1.6L1 68.2v-.3l13.9-5.5-11.3-2.7-.4 1.9h-.5l1-4.1h.4l-.3 1.6z"/>
    <path class="text__i" d="M12.7 77.2v-1.7h.5l-.3 5.5h-.5l.2-1.7-12-.8v1.7H0l.4-5.4h.4v1.7z"/>
    <path class="text__v" d="M12.3 84.7v-1.4h.5l.4 5.5h-.4l-.2-1.8-9.3 3.7 9.7 2.4v-1.8h.4l.3 3.8h-.4v-1.4L.1 90.4V90z"/>
    <path class="text__e" d="M14 98.9l-.4-1.7h.4l2.8 10-3.8 1v-.4c2.9-1.4 3.1-2.2 1.9-6.1l-.2-.9-5.4 1.6.3.9c.5 2 1.3 1.9 3.2 1.4l.2.5-6 1.7v-.5c2.2-.7 2.7-.9 2.1-2.9l-.2-1-5.9 1.6.8 2.6c.7 2.7 2.3 3.2 4.9 2.8v.5l-4.3 1.1-2.8-10.5H2l.5 1.6z"/>
    <path class="text__r" d="M19.5 114.3l.4.8c.8 1.7.2 2.7-1.3 3.4s-2.7.8-3.4-.7l-.5-1.1zm-11.7 3.6l-.8-1.6-.4.2 2.5 4.8.4-.2-.8-1.4 5.5-2.7.5 1c1 2 .5 2.7-1.5 3.9s-2.9 1.8-1.9 3.8l.5 1.2.4-.2-.2-.4c-.4-1 .3-1.6 2-2.5s2.4-2.3 1.5-4.9c1 1.5 2.2 2.4 4 1.5s2.1-2.9 1.1-4.9l-2.4-4.8-.4.2.7 1.6z"/>
    <path class="text__s" d="M17.6 127.8l.3.5a3.9 3.9 0 0 0-.9 5.3c.9 1.2 2.4 1.9 3.8.9s-2.4-7 1.2-9.7a3.8 3.8 0 0 1 5.3 1.2 7.3 7.3 0 0 1 1.4 3.1l-2.2 1.8-.3-.4c1.4-1.6 1.6-3 .6-4.3s-2.1-1.6-3.2-.8c-2.6 2 2.6 6.7-1.3 9.6-2 1.5-4.5.5-5.9-1.3a7.9 7.9 0 0 1-1.6-3.6z"/>
    <path class="text__i" d="M32.6 133.3l-1.2-1.2.4-.4 3.8 3.9-.3.3-1.2-1.2-8.6 8.5 1.2 1.2-.3.3-3.8-3.9.3-.3 1.2 1.2z"/>
    <path class="text__t" d="M41.1 141l-1.2-.9c-1.5-1.1-3.2 0-4.3 1.3l-.4-.3 2.5-3.4 9.2 6.8-2.4 3.4-.5-.3c1-1.4 1.5-3.4 0-4.5l-1.2-.9-7.1 9.6 1.6 1.2-.2.3-4.9-3.5.3-.4 1.6 1.2z"/>
    <path class="text__y" d="M50.1 153.4l-.4-6.8-1.4-.7.2-.4 5.2 2.5-.2.4-1.7-.8.3 6 4.7-3.6-1.7-.8.2-.4 3.5 1.6-.2.4-1.3-.6-5.3 4.1-2.6 5.4 1.5.8-.2.4-4.9-2.4.2-.4 1.5.7z"/>
  </g>
</svg>