SVG gradient dotted line

index.html

<svg>
    <defs>
        <linearGradient id="Gradient1" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" stop-color="#fdcd19" />
            <stop offset="100%" stop-color="#c569ff" />
        </linearGradient>
        <linearGradient id="Gradient2" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" stop-color="#c569ff" />
            <stop offset="100%" stop-color="#81d943" />
        </linearGradient>
        <linearGradient id="Gradient3" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" stop-color="#81d943" />
            <stop offset="100%" stop-color="#33bfff" />
        </linearGradient>
        <clipPath id="svgPath">
          <circle stroke="#000000" cx="5" cy="5" r="5" />
          <circle stroke="#000000" cx="5" cy="35" r="5" />
          <circle stroke="#000000" cx="5" cy="65" r="5" />
          <circle stroke="#000000" cx="5" cy="95" r="5" />
          <circle stroke="#000000" cx="5" cy="125" r="5" />
          <circle stroke="#000000" cx="5" cy="155" r="5" />
          <circle stroke="#000000" cx="5" cy="185" r="5" />
          <circle stroke="#000000" cx="5" cy="215" r="5" />
          <circle stroke="#000000" cx="5" cy="245" r="5" />
          <circle stroke="#000000" cx="5" cy="275" r="5" />
          <circle stroke="#000000" cx="5" cy="305" r="5" />
          <circle stroke="#000000" cx="5" cy="335" r="5" />
          <circle stroke="#000000" cx="5" cy="365" r="5" />
          <circle stroke="#000000" cx="5" cy="395" r="5" />
        </clipPath>
    </defs>
</svg>
<svg class="dotted-line">
  <rect x="0" y="0" width="10" height="200" fill= "url(#Gradient1)" clip-path="url(#svgPath)" />
</svg>
<svg class="dotted-line">
  <rect x="0" y="0" width="10" height="200" fill= "url(#Gradient2)" clip-path="url(#svgPath)" />
</svg>
<svg class="dotted-line">
  <rect x="0" y="0" width="10" height="200" fill= "url(#Gradient3)" clip-path="url(#svgPath)" />
</svg>

style.css

svg.dotted-line {
  height: 200px;
  width: 10px;
}
@media(max-width:1279px) {
  svg.dotted-line {
    height: 300px;
    width: 10px;
  }
}

SVG-gradient-dotted-line.markdown

SVG gradient dotted line

Vertical dotted line with a linear gradient using SVG clipping paths. Browser compatibility: webkit (Chrome and Safari) and Firefox.

A Pen by Meghan on CodePen.

License.