animated line svg

screwfix logo

by ian_smithz

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 728.519 147.209" preserveAspectRatio="meet"><path class="path" stroke="#000000" stroke-width="2" d="M73.134.263H20.506S10.27-1.287 4.166 8.9c-6.602 11.03 1.667 26.835 1.667 26.835l22.73 36.756s2.348 2.916.558 5.956c-1.636 2.782-4.833 2.502-4.833 2.502H0L6.617 115.5h53.94s12.773 1.55 19-11.626c5.72-12.112-2.344-22.927-2.344-22.927l-22.72-42.12s-.7-1.404 0-2.34c.636-.85 1.792-.704 1.792-.704H79.79L73.134.263zm84.13 115.38s-37.243 4.02-62.633-34.603C80.73 59.897 77.42 1.555 132.69 0c14.32 0 25.993.222 25.993.222l7.084 35.487s-13.21.12-24.598.12c-11.39 0-16.59 7.46-16.59 15.514s1.054 23.61 27.496 29.695c9 2.073 15.636.227 15.636.227l-10.445 34.374zm20.292-75.967h40.026v75.85h-40.026zM441.406.326l-10.885 51.35-9.876-51.35H380.95l28.303 115.282h40.362l9.04-44.636 7.873 37.42L482.94 40.43 477.08.324z" fill="#ffffff"/><path class="path" stroke="#000000" stroke-width="2" fill="#ffffff" d="M498.85.325l-3.35 16.448h72.852L573.037.325z"/><path class="path" fill="#ffffff" d="M494.326 22.308l-5.356 20.137h34.498l6.365-20.137z"/><path class="path" fill="#ffffff" stroke="#000000" stroke-width="2" d="M487.63 49.827l-3.854 15.776H550.6l4.857-15.776z"/><path class="path" fill="#ffffff" d="M483.107 72.483h35.002l-9.88 42.96h-35.34z"/><path class="path" fill="#ffffff" stroke="#000000" stroke-width="2" d="M563.326 115.608H585.6L614.738.325h-21.77zM628.718.14h21.964l15.81 39.084L704.446.14h24.074l-53.067 58.275 25.127 57.043h-22.84l-17.747-40.14-37.778 40.14H597.09l54.645-60.212z"/><path class="path" fill="#ffffff" stroke="#000000" stroke-width="2" d="M290.434.157h82.56l9.38 34.4H334.31v6.392h41.03L364.622 75.1h-30.815v5.604h51.246l-10.89 34.736H290.6zm25.08 129.035c-12.31-5.163-27.934-12.993-37.39-22.562-17.418-17.62-19.312-31.325-19.312-31.325s27.684-21.367 21.32-46.873C272.982-.225 255.005.74 227.372.74L178.64.41l-6.53 35.405s47.528-.202 53.725-.032c6.197.166 13.33.42 13.23 10.066-.085 8.22-18.102 18.025-18.102 18.025s-2.797...

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 5s linear alternate infinite;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}