title: Dynamic CSS selection within a group, SVG, Path
body: <p>I'm learning CSS and working on a problem involving dynamic color selection of a path.</p>
  
  <p>I've a <code>SVG</code> which can have any number of paths (1+) and there are pre-defined colors which should be assigned to paths depending on their order. (A web service returns a collection of paths).  </p>
  
  <p>For simplicity, Let's say I've 4 known paths and there are two colors possible: Green and deepPink. </p>
  
  <p><strong>Question:</strong> How can I assign following colors dynamically (without creating individual classes for each path):</p>
  
  <ul>
  <li>Path1: Green</li>
  <li>Path2: deepPink</li>
  <li>Path3: Green</li>
  <li>Path4: deepPink</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.path_group {
    stroke="black";
    fill="none";
    stroke-width="2";
  }
  
  .myPath{
    stroke:deepPink;
    stroke-width:1.3;
  }
  
  /*
  Color1: Green
  Color2: deepPink
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="100%" height="100%" viewBox="0 0 260 200"
       xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;g class="path_group" &gt;
      &lt;path class="myPath" d="M10,25 L110,10" /&gt;
      &lt;path class="myPath" d="M10,35 L110,20" /&gt;
      &lt;path class="myPath" d="M10,45 L110,30" /&gt;
      &lt;path class="myPath" d="M10,55 L110,40" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm more interested in doing it in natively using CSS/JS instead of adding any framework or library to my project. Suggestion regarding any particular concept is appreciated.</p>
  
  <p><strong>Demo</strong>: <a href="http://codepen.io/rohitkandhal/pen/buIBG" rel="nofollow">Codepen </a></p>
  
  <p><strong>Current approach</strong></p>
  
  <pre><code>this.colors = ["green", "deepPink"];
  
  this.getColor = function (pathIndex) {
      return this.colors[pathIndex % this.colors.length];
  };
  </code></pre>