Animação Glamour

by Marcos vini

HTML

<svg width="580" height="400"  class="glamour" width="230.3px"  xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_3" y2="126.89655" x2="242.06897" y1="126.89655" x1="327.58621" stroke-width="4.5" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="188.96552" x2="179.31034" y1="126.89655" x1="243.44828" stroke-width="4.5" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="187.58621" x2="178.62069" y1="300.68966" x1="319.31034" stroke-width="4.5" stroke="#000" fill="none"/>
 </g>
</svg>

CSS

.glamour {
    stroke-width: 3px;
    stroke-dasharray: 1045;
    animation: 6s write;
    
}

@keyframes write {
    0% {
        stroke-dashoffset: 1045; 
    }
    100% {
        stroke-dashoffset: 0;
    }
}