logo

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: 50%;
    height: auto;
    overflow: visible;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    padding: 0;
}

.svg-glitch .outline {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px; /* Adjust as needed */
    vector-effect: non-scaling-stroke; /* Ensure stroke width does not scale */
    stroke-dasharray: 3000; /* Set to the calculated length of the path */
    stroke-dashoffset: 3000; /* Start with the line hidden */
    animation: drawEffect 7s forwards; /* Outline drawing animation */

    transform: translateX(0); /* Initial state */
    transition: transform 1s ease 2.5s; /* Slide to the left with a delay of 1 second */
}

@keyframes drawEffect {
    from {
        stroke-dashoffset: 3000; /* Hide the stroke initially */
    }
    to {
        stroke-dashoffset: 0; /* Draw the stroke completely */
    }
}

.svg-glitch .main {
    fill: black;
    opacity: 0; /* Start with the logo invisible */
    animation: fadeInLogo 2s forwards;
    animation-delay: 2s; /* Delay to sync with outline drawing */
}

@keyframes fadeInLogo  {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Add a new animation step to move the outline after the fade-in */
body.loaded .svg-glitch .outline {
    transform: translateX(calc(-100% / 7)); /* Slide the outline left by 1/7th of its width */
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    document.body.classList.add('loaded');
});