JSFiddle - React, Tailwind, and code Playground

by viktorb

HTML

<svg width="144" height="35" viewBox="0 0 144 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>SothebysLogo</title><desc>Created using Figma</desc><g id="Canvas" transform="translate(1044 -18)"><g id="SothebysLogo"><g id="s"><use xlink:href="#s_fill" transform="translate(-911.981 27.9675)" fill="#FFFFFF"/></g><g id="comma"><use xlink:href="#comma_fill" transform="translate(-918.234 25.489)" fill="#FFFFFF"/></g><g id="y"><use xlink:href="#y_fill" transform="translate(-937.044 28.5509)" fill="#FFFFFF"/></g><g id="b"><use xlink:href="#b_fill" transform="translate(-955.891 18)" fill="#FFFFFF"/></g><g id="e"><use xlink:href="#e_fill" transform="translate(-972.404 27.9667)" fill="#FFFFFF"/></g><g id="h"><use xlink:href="#h_fill" transform="translate(-993.299 18)" fill="#FFFFFF"/></g><g id="t"><use xlink:href="#t_fill" transform="translate(-1006.63 23.8564)" fill="#FFFFFF"/></g><g id="o"><use xlink:href="#o_fill" transform="translate(-1025.04 27.9667)" fill="#FFFFFF"/></g><g id="S"><use xlink:href="#S_fill" transform="translate(-1044 21.2028)" fill="#FFFFFF"/></g></g></g><defs><path id="s_fill" fill-rule="evenodd" d="M 5.44299 17.5699C 3.43618 17.5699 1.71642 17.2399 0.0359826 16.5856L -1.43337e-06 11.7844L 0.731428 11.7127C 2.70225 15.168 4.20109 16.4773 6.13676 16.4773C 7.85402 16.4773 8.91265 15.3864 8.91265 13.7137C 8.91265 11.821 6.97698 11.0943 4.89485 10.2576C 2.59346 9.27498 0.144776 8.18406 0.144776 5.16546C 0.144776 2.29187 2.70225 5.16557e-07 6.42882 5.16557e-07C 7.85234 5.16557e-07 9.86166 0.291693 10.8467 0.655058L 10.9563 4.98377L 10.2642 5.16546C 8.4733 2.21936 7.30586 1.09093 5.62292 1.09093C 4.09145 1.09093 3.13993 2.11019 3.13993 3.41863C 3.13993 5.31047 5.1116 6.0747 7.19289 6.91144C 9.49679 7.85736 11.9806 8.94746 11.9806 12.0402C 11.9806 15.4239 8.98546 17.5699 5.44299 17.5699Z"/><path id="comma_fill" fill-rule="evenodd" d="M 3.42447 -2.80615e-07L -3.61981e-06 8.25656L 0.804235 8.25656L 7.31172...

SCSS

body, html {
  background: #333333;
}

#o_fill, #t_fill, #h_fill, #e_fill, #b_fill, #y_fill, #comma_fill, #s_fill {
  animation-fill-mode: forwards;
  animation-name: letterFadeToLeft;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.38,.06,.96,.49);
}

#s_fill {
  animation-delay: 0ms;
}
#comma_fill {
  animation-delay: 0ms;
}
#y_fill {
  animation-delay: 40ms;
}
#b_fill {
  animation-delay: 80ms;
}
#e_fill {
  animation-delay: 90ms;
}
#h_fill {
  animation-delay: 140ms;
}
#t_fill {
  animation-delay: 250ms;
}
#o_fill {
  animation-delay: 400ms;
}
#S_fill {
  animation-fill-mode: forwards;
  animation-name: makeSBigger;
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.67,1.22,.9,.79);
  animation-delay: 800ms;
}


@keyframes letterFadeToLeft {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(-10%); }
}
@keyframes makeSBigger {
  from { transform: scale(1); }
  to { transform: scale(1.3); }
}