Adding different colors to dashes of an SVG stroke

Question

I'm new to SVG and stuff and I'm trying to add different colors for the different dashes of a single stroke.

<style>
 .c-dashed-line__path {
 animation: c-dashed-line-path 5s forwards;
  fill: none;
  stroke: rgb(255, 32, 32);
  stroke-dasharray: 1475;
  stroke-dashoffset: 1475;
  stroke-width: 60;
}

.c-dashed-line__dash {
  fill: none;
  stroke: #FFFFFF;
  stroke-dasharray: 40 200 40 480;
  stroke-dashoffset: 40;
  stroke-width: 70;
}

@keyframes c-dashed-line-path {
  from {
    stroke-dashoffset: 1474;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<svg id="svg11"
   viewBox="0 0 2133.3333 1200"
   height="1200"
   width="2133.3333"
   version="1.1">
  <metadata
     id="metadata16">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs>
  <g
     id="layer2">
    <path
    id="c-dashed-line" class="path2"
       d="m 548.50746,29.104478 c 0,0 136.56717,279.850742 228.35821,293.283582 91.79105,13.43284 91.79105,13.43284 91.79105,13.43284 0,0 154.47758,22.38806 214.92538,134.32835 60.4478,111.9403 40.2985,203.73135 147.7612,295.52239 107.4627,91.79105 208.2089,-6.71642 380.597,114.17911"
       style="fill:none;" />
  </g>
  </defs>
  <use class="c-dashed-line__path" xlink:href="#c-dashed-line"/>
    <!-- A dashed white line that sits on top of the solid green line -->
    <use class="c-dashed-line__dash" xlink:href="#c-dashed-line"/>
</svg>

Please see what i have done so far here. https://codepen.io/geekudu/pen/QWWvqRp

I intend to use different colors for each dash. any help is appreciated. thanks in advance

Answer 1

You can construct a linear gradient for many lines that can give you different color dashes - but its quite difficult because you have to arrange it so that that gradient transitions all occur in the gaps between stroke dashes. If the dash gaps are too narrow or the line is too squiggly - then you have to go through severe contortions to make it work. It's easier to just use different overlaid paths with customized stroke-dash arrays.

But it IS often possible - here is an example that works with your specific line.

 .c-dashed-line__path {
  stroke: url(#special-gradient);
  stroke-dasharray: 200 40 200 40 480 40;
  /* this is the entire length of the line */
  stroke-dashoffset: 0;
  /* this is the entire length of the line */
  stroke-width: 60;
  
}

.c-dashed-line__overlay {
  animation: c-dashed-line-path 5s forwards;
  fill: none;
  stroke: white;
  /* this must match the background color */
  stroke-dashoffset: -1475;
    stroke-dasharray: 1475;
  /* draws a 10px dash line with a 16px gap between */
  stroke-width: 70;
  /* make the dashed line slightly bigger than the one it's covering */
}

@keyframes c-dashed-line-path {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1475;
  }
}

svg{
  width:100%;
  height:100%;
  position: absolute;
}

<svg id="svg11"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 2133.3333 1200"
   height="1200"
   width="2133.3333"
   version="1.1">
 
  <defs>
    
    <linearGradient id="special-gradient" y1="0%" y2="130%" x1="0%" x2="200%">
      <stop offset="0%"  stop-color="gold" />
      <stop offset="9%"  stop-color="gold" />
      <stop offset="9%" stop-color="red" />
      <stop offset="18.4%"  stop-color="red" />
      <stop offset="18.4%"  stop-color="green" />
      <stop offset="39%" stop-color="green" />
      <stop offset="39%"  stop-color="blue" />
      <stop offset="48%" stop-color="blue" />
      <stop offset="48%" stop-color="gray" />
      <stop offset="100%" stop-color="grey" />
    </linearGradient>

    <path
    id="c-dashed-line" class="path2"
       d="m 548.50746,29.104478 c 0,0 136.56717,279.850742 228.35821,293.283582 91.79105,13.43284 91.79105,13.43284 91.79105,13.43284 0,0 154.47758,22.38806 214.92538,134.32835 60.4478,111.9403 40.2985,203.73135 147.7612,295.52239 107.4627,91.79105 208.2089,-6.71642 380.597,114.17911"
       style="fill:none;" />

  </defs>
  <use class="c-dashed-line__path" xlink:href="#c-dashed-line"/>
    <!--overlay -->
    <use class="c-dashed-line__overlay" xlink:href="#c-dashed-line"/>

  <rect x="80%" y="0%" width="20%" height="20%" fill="url(#special-gradient)"/>
</svg>