title: Generate SVG sine wave with one segment
body: <p>I'm currently trying to generate a SVG path representing a sine wave that fit the width of the webpage.</p>
  
  <p>The algorithm I'm currently using is drawing small line to between two point which is drawing the sine wave. </p>
  
  <p>The algorithm :</p>
  
  <pre><code>for(var i = 0; i &lt; options.w; i++) {
      var operator = ' M ';
  
      d += operator + ((i - 1) * rarity + origin.x) + ', ';
      d += (Math.sin(freq * (i - 1 + phase)) * amplitude + origin.y);
  
      if(operator !== ' L ') { operator = ' L '; }
  
      d += ' L ' + (i * rarity + origin.x) + ', ';
      d += (Math.sin(freq * (i + phase)) * amplitude + origin.y);
  }
  </code></pre>
  
  <p>Which generates a path for the svg : </p>
  
  <pre><code>M 9, 82.66854866662797 L 10, 102.5192336707523 
  M 10, 102.5192336707523 L 11, 121.18508371540987 
  M 11, 121.18508371540987 L 12, 129.88725786264592 
  M 12, 129.88725786264592 L 13, 124.53298763579338 
  M 13, 124.53298763579338 L 14, 107.64046998532105 
  M 14, 107.64046998532105 L 15, 87.15451991511547 
  M 15, 87.15451991511547 L 16, 72.70999984499424 
  M 16, 72.70999984499424 L 17, 71.10039326578718 
  M 17, 71.10039326578718 L 18, 83.08272330249196 
  M 18, 83.08272330249196 L 19, 103.02151290977501
  </code></pre>
  
  <p>The thing is, at the end of the sinus I wanted to draw a line to close the rest of the path (with the Z) </p>
  
  <p><a href="https://i.stack.imgur.com/zq9sp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zq9sp.png" alt="Waves path closed"></a></p>
  
  <p>Sorry for my drawing skills ! :D
  The reason for closing the path and having a path linked is to be able to fill this path with a background or a gradient</p>
  
  <p>I found that I could represent the sine waves in a single path where it's linked</p>
  
  <pre><code>M0 50  C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50 Z
  </code></pre>
  
  <p>Which looks like this :</p>
  
  <p><a href="https://i.stack.imgur.com/DMY7s.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DMY7s.png" alt="Sinus waves estimated"></a></p>
  
  <p>But the thing is the algorithm I'm using lets me play with the sine function so that I could animate this waves (which is something I need) and I dont see how to animate the representation of the sine waves.</p>
  
  <p>So to sum up, either you can help me find a way to link all the lines drawed by the actual algorithm ? or a way to animate the other representation to draw a waves without caring about the sinus.</p>
  
  <p>Thanks in advance for your help !</p>