logo2

test

by davidxmartins

HTML

<div class="container">
<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></div>

CSS

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  float: right;
  margin: 0;
  padding: 0;
  background: red;
}
/* Ensure the SVG container and paths are styled correctly */
.svg-glitch {
    width: 100%;
    height: auto;
    overflow: visible; /* Ensure the animation does not get cut off */
    display: block;
    box-sizing: border-box;
    position: absolute;
    right: 0; /* Align to the right */
    margin: 0;
    padding: 0;
    background: #ccc;
}

.svg-glitch .outline {
    fill: none;
    stroke: #ccc;
    stroke-width: 1px; /* 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 10s forwards; /* Adjust the duration as needed */
}

@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: fadeIn 2s forwards;
    animation-delay: 5s; /* Delay to sync with outline drawing */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start invisible */
    }
    to {
        opacity: 1; /* Fully visible */
    }
}