JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .svg-glitch {
            width: 50%;
            height: auto;
            overflow: visible; /* Ensure the animation does not get cut off */
            display: block;
            margin: 0 auto; /* Center the SVG horizontally */
            position: absolute;
            right: 0; /* Align to the right */
        }

        .svg-glitch .main {
            fill: black;
            opacity: 0; /* Start invisible */
            animation: fadeInEffect 5s 5s forwards; /* Fade in after outline drawing */
        }

        .svg-glitch .outline {
            fill: none;
            stroke: #ccc;
            stroke-width: 1px; /* Fixed stroke width */
            vector-effect: non-scaling-stroke; /* Ensure stroke width does not scale */
            animation: drawEffect 5s forwards; /* Drawing effect */
        }

        @keyframes drawEffect {
            0% {
                stroke-dashoffset: 1000; /* Ensure initial hiding */
            }
            100% {
                stroke-dashoffset: 0; /* Draw the stroke completely */
            }
        }

        @keyframes fadeInEffect {
            0% {
                opacity: 0; /* Start invisible */
            }
            100% {
                opacity: 1; /* Fully visible */
            }
        }
    </style>
</head>
<body>
    <svg class="svg-glitch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 280">
        <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"...