svg/animate/inha_character_rect.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.5 139.2">
  <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: 111.3px 130px;
      animation: scale-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 scale-in {
      from {
        opacity: 0;
        transform: scaleX(0);
      }
      to {
        opacity: 1;
        transform: scaleX(100%);
      }
    }
  </style>
  <g class="character">
    <path class="character__i" d="M5.5,21.7c17.4,34.8-9.7,59-4.9,92.4.6-20.4,14.9-33.8,22.6-46.5C32.3,52.7,32.9,25.2,5.5,21.7Z"/>
    <path class="character__n" d="M78.6,0C79.8,13.8,76,22.3,66.9,35c-6.7,9.5-34.5,36.5-5.2,72-6.7-19-.1-32.4,9.5-44.1-1.7,18.7,5.7,32.4,15.3,40.3-2.7-18.1.1-31.5,5.8-41.7,4.8-8.5,14.8-23.8,8.8-43-.7,8.9-5.5,18.9-15.9,26.5C87.5,30.9,87.7,16,78.6,0Z"/>
    <path class="character__h" d="M159.4,20.3c-.7,6.9-4.1,22-10.2,38.3-2.2,3.3-6,6.6-10.2,9.8,4.6-12.3,6.4-31.6-1.4-44.9,1.1,11.8-1.9,22.4-10.5,35.5-5.8,8.9-9.4,22.5-6.8,42.5,3.5-6.2,10.5-15.2,15.8-26.2,2.3-1,5.4-1.9,7.3-3.1a129,129,0,0,1-19.5,30.3C160.3,73.3,170.2,34.8,159.4,20.3Z"/>
    <path class="character__a" d="M207.8,9.6c3.2,30.3-19.8,59.6-40,73.3a98.3,98.3,0,0,0,17.3-7.1c5-.3,12.3-.9,19.1-2-7.9,16.5-24.6,31.6-49.6,41.8C234.6,93.9,231.6,33,207.8,9.6ZM190.3,72.7c10.6-6.9,16.1-14.8,19.1-22.5A47.7,47.7,0,0,1,207,66.8C201.6,69,196,70.9,190.3,72.7Z"/>
  </g>
  <g class="text">
    <path class="text__i" d="M50.4,130.2H49.1v-.4H53v.4H51.8v8.5H53v.4H49.1v-.4h1.3Z"/>
    <path class="text__n" d="M55.5,130.2H54.3v-.4h2.9l4.6,6.6h0v-6.2H60.4v-.4h3v.4H62.2v8.9H62l-6.1-8.7h0v8.2h1.4v.4h-3v-.4h1.2Z"/>
    <path class="text__h" d="M71.2,130.2H70.1v-.4h3.8v.4H72.7v8.5h1.2v.4H70.1v-.4h1.1v-4.2h-4v4.2h1.2v.4H64.5v-.4h1.3v-8.5H64.5v-.4h3.9v.4H67.2v4h4Z"/>
    <path class="text__a" d="M79.2,135.4H77l1.1-3.3h.1Zm-3.7,3.3H74.4v.4h2.9v-.4H75.9l1-2.9h2.4l.9,2.9H78.8v.4H83v-.4H81.8l-3-9h-.3Z"/>
    <path class="text__u" d="M87.8,130.2H86.6v-.4h3.9v.4H89.3v6.1c0,1.6.3,2.4,2.4,2.4s2.7-1,2.7-2.5v-6H93v-.4h2.9v.4H94.8v6.1c0,1.8-.5,2.8-3.5,2.8s-3.5-.9-3.5-2.6Z"/>
    <path class="text__n" d="M98.3,130.2H97.1v-.4h3l4.5,6.6h.1v-6.2h-1.4v-.4h2.9v.4H105v8.9h-.2l-6.1-8.7h0v8.2h1.4v.4h-3v-.4h1.2Z"/>
    <path class="text__i" d="M108.7,130.2h-1.2v-.4h3.9v.4h-1.3v8.5h1.3v.4h-3.9v-.4h1.2Z"/>
    <path class="text__v" d="M112.9,130.2h-1.1v-.4h3.9v.4h-1.3l2.2,6.7h0l2.3-6.7h-1.4v-.4h2.8v.4h-1l-3.1,9h-.3Z"/>
    <path class="text__e" d="M121.9,130.2h-1.2v-.4h7.4v2.9h-.4c-.4-2.3-.8-2.5-3.8-2.5h-.6v4h.7c1.5,0,1.6-.6,1.6-2h.4v4.4h-.4c0-1.6-.1-2-1.6-2h-.7v4.1h2c1.9,0,2.6-1,2.8-2.8h.4v3.2h-7.8v-.4h1.2Z"/>
    <path class="text__r" d="M132.5,130.2h.7c1.3,0,1.8.7,1.8,1.9s-.4,1.9-1.6,1.9h-.9Zm-1.4,8.5h-1.2v.4h3.8v-.4h-1.2v-4.3h.9c1.6,0,1.9.6,2,2.2s.2,2.5,1.8,2.5h.9v-.4h-.3c-.8,0-.9-.6-.9-2s-.7-2.3-2.7-2.5h0c1.3-.1,2.2-.6,2.2-2s-1.1-2.3-2.8-2.3h-3.7v.4h1.2Z"/>
    <path class="text__s" d="M138.7,136h.4a2.8,2.8,0,0,0,2.6,2.8,2,2,0,0,0,2.2-1.8c0-2.5-5-1.6-5-4.8a2.6,2.6,0,0,1,2.9-2.5,6.9,6.9,0,0,1,2.4.5v2.1h-.3c-.3-1.5-1.1-2.2-2.3-2.2a1.5,1.5,0,0,0-1.7,1.5c0,2.3,4.9,1.4,4.9,4.8a3,3,0,0,1-3.2,2.8,5.7,5.7,0,0,1-2.8-.6Z"/>
    <path class="text__i" d="M147,130.2h-1.2v-.4h3.9v.4h-1.3v8.5h1.3v.4h-3.9v-.4H147Z"/>
    <path class="text__t" d="M154,130.2h-1.1c-1.3,0-1.8,1.4-1.9,2.6h-.4v-3h8.2v3h-.3c-.1-1.2-.6-2.6-1.9-2.6h-1.1v8.5h1.4v.4h-4.3v-.4H154Z"/>
    <path class="text__y" d="M162.6,134.4l-2.4-4.2h-1.1v-.4h4.1v.4h-1.3l2,3.7,1.9-3.7h-1.3v-.4h2.7v.4h-1l-2.1,4.2v4.3h1.2v.4h-3.9v-.4h1.2Z"/>
  </g>
</svg>