title: How to create irregular curves line using CSS3, HTML5, SVG, and Jquery?
body: <p>I am trying to make an irregular curve line for the progress graph to show on my website. I've tried it using jQuery and I got sin wave successfully but I want to achieve an irregular wave line like shown in the image below. How can I achieve it?</p>
  
  <p>See the following image.
  <a href="https://i.stack.imgur.com/gvt6V.png" rel="nofollow noreferrer">Sample image of what I want</a></p>
  
  <blockquote>
    <p>html code</p>
  </blockquote>
  
  <pre><code>&lt;canvas height="500" width="600" id="my_canvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <blockquote>
    <p>jQuery Code</p>
  </blockquote>
  
  <pre><code>var my_canvas=$('#my_canvas').get(0);
  var gctx = my_canvas.getContext("2d");
  gctx.stroke();
  gctx.beginPath();
  gctx.moveTo(10, 125);
  gctx.lineWidth=1;
  gctx.strokeStyle= '#f00040';
  var x = [];
  var y = [];
  for (var angle = 0; angle &lt;590; angle+=1){
  gctx.lineJoin = 'round';
  y.push(125 - 120*( Math.sin(( Math.PI/180 ) * angle)));
  x.push(10 + angle);
  gctx.lineTo((10 + angle),((125 - 120*( Math.sin(( Math.PI/180 ) * 
  angle)))));
  }
  gctx.stroke();
  </code></pre>