JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <svg viewBox="0 0 999 226" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="mymask">
    <g>
      <path d="M0.420471 222V3.81818H26.8409V100.977H143.176V3.81818H169.597V222H143.176V124.415H26.8409V222H0.420471Z" fill="#ffffff"/>
      <path d="M406.582 112.909C406.582 135.92 402.427 155.807 394.117 172.568C385.808 189.33 374.408 202.256 359.92 211.347C345.431 220.437 328.883 224.983 310.275 224.983C291.667 224.983 275.119 220.437 260.63 211.347C246.141 202.256 234.742 189.33 226.433 172.568C218.123 155.807 213.968 135.92 213.968 112.909C213.968 89.8977 218.123 70.0114 226.433 53.25C234.742 36.4886 246.141 23.5625 260.63 14.4716C275.119 5.38068 291.667 0.83522 310.275 0.83522C328.883 0.83522 345.431 5.38068 359.92 14.4716C374.408 23.5625 385.808 36.4886 394.117 53.25C402.427 70.0114 406.582 89.8977 406.582 112.909ZM381.014 112.909C381.014 94.017 377.853 78.0724 371.532 65.0753C365.282 52.0781 356.795 42.2415 346.07 35.5653C335.417 28.8892 323.485 25.5511 310.275 25.5511C297.065 25.5511 285.097 28.8892 274.373 35.5653C263.719 42.2415 255.232 52.0781 248.911 65.0753C242.661 78.0724 239.536 94.017 239.536 112.909C239.536 131.801 242.661 147.746 248.911 160.743C255.232 173.74 263.719 183.577 274.373 190.253C285.097 196.929 297.065 200.267 310.275 200.267C323.485 200.267 335.417 196.929 346.07 190.253C356.795 183.577 365.282 173.74 371.532 160.743C377.853 147.746 381.014 131.801 381.014 112.909Z" fill="#ffffff"/>
<path d="M594.188 3.81818H620.609V148.278C620.609 163.193 617.093 176.51 610.062 188.229C603.102 199.876 593.265 209.074 580.552 215.821C567.839 222.497 552.924 225.835 535.808 225.835C518.691 225.835 503.776 222.497 491.063 215.821C478.35 209.074 468.478 199.876 461.447 188.229C454.487 176.51 451.006 163.193 451.006 148.278V3.81818H477.427V146.148C477.427 156.801 479.771 166.283 484.458 174.592C489.146 182.831 495.822 189.33 504.487 194.088C513.222 198.776 523.663 201.119 535.808 201.119C547.952 201.119 558.393 198.776 567.129...

CSS

.wrap {
  margin: 20px;
  border: 1px solid red;
  
}
svg {
  width: 100%;
}
#myrect {
  y: 230px;
  animation: ani 3s ease-in forwards;
}
@keyframes ani {
  0% {
    /* height: 0; */
    y: 230px;
  }
  100% {
    /* height: 160px; */
    y: 0px;
  }
}