logo

by davidxmartins

HTML

<svg class="svg-glitch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 280">
  <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: 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;
    animation: glitchEffect 10s infinite; /* Duration for the main logo animation */
}

.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: outlineEffect 10s infinite; /* Match duration with .main for synchronization */
}

@keyframes glitchEffect {
    0% {
        transform: translateX(0); /* Start at the original position */
    }
    25% {
        transform: translateX(2%); /* Move slightly to the right */
    }
    50% {
        transform: translateX(2%); /* Return to the original position */
    }
    75% {
        transform: translateX(2%); /* Move slightly to the right */
    }
    100% {
        transform: translateX(0); /* Pause position */
    }
}

@keyframes outlineEffect {
    0% {
        transform: translateX(0);
        opacity: 0; /* Start invisible */
    }
    2% {
        opacity: 1; /* Quickly fade in */
    }
    25% {
        transform: translateX(-14.3%); /* Move 1/7 to the left */
        opacity: 1;
    }
    50% {
        transform: translateX(-14.3%); /* Pause at 1/7 to the left */
        opacity: 1;
    }
    75% {
        transform: translateX(-14.3%); /* Move back to the starting position */
        opacity: 1;
    }
    100% {
        transform: translateX(0); /* Ensure it is at the starting position */
        opacity: 0; /* Fade out immediately at the end */
    }
}