JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="23.458" height="38.819" viewBox="0 0 23.458 38.819">
  <path id="Wordmark" d="M126.137,84.741c0-7.9,0-9.31-.1-10.931-.108-1.722-.531-2.53-2.279-2.887a10.6,10.6,0,0,0-1.8-.15c-.21,0-.425-.1-.425-.3,0-.3.265-.4.85-.4,1.217,0,2.647,0,3.812.049l2.172.1c.368,0,10.908,0,12.126-.05a15.118,15.118,0,0,0,2.277-.254c.263-.053.477-.255.74-.255.158,0,.212.2.212.456,0,.355-.265.96-.423,2.378-.053.508-.16,2.733-.267,3.342-.051.252-.161.555-.371.555-.317,0-.423-.255-.423-.658a5.236,5.236,0,0,0-.317-1.824c-.372-.808-.9-1.416-3.761-1.717-.9-.1-6.671-.153-7.252-.153-.214,0-.319.153-.319.505V86.511c0,.355.053.507.319.507.686,0,7.2,0,8.419-.1,1.269-.1,2.01-.2,2.487-.707.372-.405.583-.659.8-.659.159,0,.262.1.262.406s-.262,1.164-.423,2.834c-.1,1.011-.21,2.885-.21,3.239,0,.4,0,.96-.372.96-.264,0-.369-.2-.369-.455a4.933,4.933,0,0,0-.212-1.669c-.213-.71-.688-1.571-2.752-1.773-1.43-.15-6.674-.251-7.574-.251a.326.326,0,0,0-.37.353v4.452c0,1.722-.054,7.592,0,8.656.16,3.493.952,4.151,6.142,4.151a15.8,15.8,0,0,0,5.083-.559c1.376-.557,2.013-1.568,2.383-3.642.107-.558.212-.76.477-.76.317,0,.317.407.317.76a48.044,48.044,0,0,1-.688,4.908c-.372,1.317-.795,1.317-2.86,1.317-3.971,0-6.883-.1-8.95-.154-2.063-.1-3.333-.152-4.128-.152-.107,0-1.007,0-2.119.053-1.058,0-2.277.1-3.072.1-.582,0-.847-.1-.847-.4,0-.152.105-.3.425-.3a8.529,8.529,0,0,0,1.589-.2c1.058-.2,1.32-1.314,1.535-2.783.263-2.127.263-6.124.263-10.984Z" transform="translate(-121.531 -69.658)" fill="#fff"/>
</svg>

CSS

body {
    background: black;
}
svg {
    transform: scale(2.285);
    animation: a 1s forwards 1s;
    transform-origin: top left;
}
@keyframes a {
    50% {
        transform: translateX(100px) scale(2.285);
    }
    100% {
        transform: scale(1);
    }
}