SVG Recipe

simple line

<svg width="200" height="124">
  <g shape-rendering="crispEdges">
    <line x1="9" y1="1" x2="9" y2="122"
      stroke="#FF9200" stroke-width="1"/>
    <line x1="22" y1="1" x2="22" y2="122"
      stroke="#FFA200" stroke-width="3"/>
    <line x1="39" y1="1" x2="39" y2="122"
      stroke="#FFB200" stroke-width="9"/>
    <line x1="63" y1="1" x2="63" y2="122"
      stroke="#FFC200" stroke-width="17"/>
    <line x1="99" y1="1" x2="99" y2="122"
      stroke="#FFD200" stroke-width="33"/>
    <line x1="159" y1="1" x2="159" y2="122"
      stroke="#FFF200" stroke-width="65"/>
  </g>
</svg>

dasharray, linecap

<svg width="200" height="124">
  <g stroke-width="9" stroke-dasharray="20">
    <line x1="21" y1="31" x2="159" y2="31"
      stroke="#770000" stroke-linecap="butt"/>
    <line x1="31" y1="62" x2="169" y2="62"
      stroke="#007700" stroke-linecap="round"/>
    <line x1="41" y1="93" x2="179" y2="93"
      stroke="#000077" stroke-linecap="square"/>
  </g>
  <g stroke-width="1" stroke-dasharray="20" stroke="#FFFFFF" shape-rendering="crispEdges">
    <line x1="21" y1="31" x2="159" y2="31"/>
    <line x1="31" y1="62" x2="169" y2="62"/>
    <line x1="41" y1="93" x2="179" y2="93"/>
  </g>
</svg>

animate

<svg width="200" height="124">
  <line x1="40" y1="10" x2="40" y2="114" stroke-width="10" stroke="#6BE400">
    <animate attributeName="opacity" dur="5s" begin="0s"
      repeatCount="indefinite" values="1;0;1"/>
    <animate attributeName="stroke" dur="15s" begin="0s"
      repeatCount="indefinite" values="#6BE400;#FF4500;#A101A6;#6BE400"/>
    <animate attributeName="x1" dur="10s" begin="0s"
      repeatCount="indefinite" values="40;160;40"/>
    <animate attributeName="x2" dur="10s" begin="0s"
      repeatCount="indefinite" values="40;160;40"/>
  </line>
</svg>