JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div></div>
<div></div>


<svg xmlns="http://www.w3.org/2000/svg" width="34.046" height="93.067" viewBox="0 0 34.046 93.067">
  <path id="Path_695" data-name="Path 695" d="M132.321,211.187l22.443,22.474v58.145h9.478V229.74l-30.965-31S127.034,205.9,132.321,211.187Z" transform="translate(-130.196 -198.739)" fill="#091f40"/>
</svg>

CSS

div:nth-child(1) {
    width: 20px;
    height: 62px;
    background: red;
    opacity: 0.5;
    position: absolute;
    left: 25px;
    top: 39px;
    /* animation: c linear .4s both; */
    transform-origin: top;
    z-index: 1000
    ;
}
div:nth-child(2) {
    width: 20px;
    z-index: 10;
    height: 49px;
    background: red;
    opacity: 0.5;
    position: absolute;
    left: 11px;
    top: -1px;
    transform: rotate(-40deg);
    /* animation: a cubic-bezier(0, 0, 0.14, 1.01) 1s .38s both; */
}
@keyframes b {
    from {
        transform: scaleY(1) rotate(-40deg);
    }
    to {
        transform: scaleY(0) rotate(-40deg);
    }
}
@keyframes c {
    from {
        transform: scaleY(1) rotate(0deg);
    }
    to {
        transform: scaleY(0) rotate(0deg);
    }
}
svg {
    /* animation: a 1s both infinite; */
}
@keyframes a {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
}