JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<svg class="svg-glitch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 239.91">
  <path class="main" d="m194.89,168.28l40.04,69.35c1.75,3.03,6.12,3.03,7.87,0l40.04-69.35c1.75-3.03-.44-6.82-3.94-6.82h-80.08c-3.5,0-5.69,3.79-3.94,6.82Z"/>
  <path class="main" d="m187.02,2.33l-39.75,69.16c-1.74,3.03-6.11,3.04-7.87.02L99.07,2.26c-1.76-3.02-6.12-3.01-7.86.01L.61,159.19c-.81,1.41-.81,3.14,0,4.55l42.67,73.9c1.75,3.03,6.12,3.03,7.87,0l40.09-69.44c1.73-2.99,6.05-2.99,7.77,0l40.09,69.44c1.75,3.03,6.12,3.03,7.87,0l43.98-76.17,46.6-80.72c.81-1.41.81-3.14,0-4.55L194.9,2.32c-1.75-3.03-6.13-3.03-7.88,0Zm-95.42,152.31l-40.03-69.34c-1.75-3.03.44-6.82,3.94-6.82h79.89c3.5,0,5.68,3.78,3.94,6.81l-39.86,69.34c-1.75,3.04-6.13,3.04-7.88,0Z"/>
  <path class="outline" d="m194.89,168.28l40.04,69.35c1.75,3.03,6.12,3.03,7.87,0l40.04-69.35c1.75-3.03-.44-6.82-3.94-6.82h-80.08c-3.5,0-5.69,3.79-3.94,6.82Z"/>
  <path class="outline" d="m187.02,2.33l-39.75,69.16c-1.74,3.03-6.11,3.04-7.87.02L99.07,2.26c-1.76-3.02-6.12-3.01-7.86.01L.61,159.19c-.81,1.41-.81,3.14,0,4.55l42.67,73.9c1.75,3.03,6.12,3.03,7.87,0l40.09-69.44c1.73-2.99,6.05-2.99,7.77,0l40.09,69.44c1.75,3.03,6.12,3.03,7.87,0l43.98-76.17,46.6-80.72c.81-1.41.81-3.14,0-4.55L194.9,2.32c-1.75-3.03-6.13-3.03-7.88,0Zm-95.42,152.31l-40.03-69.34c-1.75-3.03.44-6.82,3.94-6.82h79.89c3.5,0,5.68,3.78,3.94,6.81l-39.86,69.34c-1.75,3.04-6.13,3.04-7.88,0Z"/>
</svg>

CSS

.svg-glitch {
    width: 200px;
    height: auto;
}

.svg-glitch .main {
    fill: black;
    animation: glitchEffect 6s infinite;
}

.svg-glitch .outline {
    fill: none;
    stroke: #ccc; /* Outline color */
    stroke-width: 2px;
    animation: outlineEffect 6s infinite;
}

@keyframes glitchEffect {
    0%, 100% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-2.85%);
    }
    60% {
        transform: translateX(2.85%);
    }
}

@keyframes outlineEffect {
    0%, 100% {
        transform: translateX(0);
        opacity: 0;
    }
    30% {
        transform: translateX(-14.3%);
        opacity: 1;
    }
    60% {
        transform: translateX(14.3%);
        opacity: 1;
    }
}