title: Filling Non-linear Svg Path Stroke
body: <p>I trying to do speedometer by filling stroke with linear gradient. When stop offset is 0%, white line appears at the beginning of the path. How can i get rid of it? In additional, i'm not sure that filling stroke with linear gradient is the best option to fill svg path. Do you have better ideas?</p>
  <pre><code>&lt;svg width=&quot;196&quot; height=&quot;65&quot; viewBox=&quot;0 0 196 65&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;defs&gt;
      &lt;linearGradient id=&quot;fillSpeedometer&quot; x1=&quot;0&quot; y1=&quot;0.5&quot; x2=&quot;1&quot; y2=&quot;0.5&quot;&gt;
        &lt;stop offset=&quot;0%&quot; stop-opacity=&quot;1&quot; stop-color=&quot;white&quot; /&gt;
        &lt;stop offset=&quot;0%&quot; stop-opacity=&quot;1&quot; stop-color=&quot;white&quot; /&gt;
        &lt;stop offset=&quot;0%&quot; stop-opacity=&quot;1&quot; stop-color=&quot;grey&quot; /&gt;
        &lt;stop offset=&quot;100%&quot; stop-opacity=&quot;1&quot; stop-color=&quot;grey&quot; /&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;path d=&quot;M2 63C3.65579 42.6667 19.0187 2 67.2238 2C115.429 2 171.827 2 194 2&quot; stroke=&quot;url(#fillSpeedometer)&quot; stroke-width=&quot;3&quot; stroke-linecap=&quot;round&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/oiyZ0.png" alt="Preview" /></p>