stroking_dash.svg - mozsearch

Enable keyboard shortcuts

<svg width="460" height="200" viewBox="0 0 30 13" xmlns="http://www.w3.org/2000/svg">

  <line x1="0" y1="1" x2="30" y2="1" stroke="black" stroke-dashoffset="2"/>

  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4 2"/>

<!--positive dashoffset pulls the dashes-->

  <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 2" stroke-dashoffset="2"/>

  <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 2" stroke-dashoffset="4"/>

  <!--negative dashoffset pushs the dashes-->

  <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 2" stroke-dashoffset="-2"/>

  <line x1="0" y1="11" x2="30" y2="11" stroke="black" stroke-dasharray="4 2" stroke-dashoffset="-4"/>

</svg>