SVG Sine wave

by rajeshpillai

HTML

<div id="sine_wave">
    
    <svg width="1000" height="1000">
      <line x1="100" y1="0" x2="100" y2="200"
            style="stroke:black;stroke-width:1"/>
      <line x1="0" y1="100" x2="1000" y2="100"
            style="stroke:black;stroke-width:1"/>
    </svg>
    
  </div>

CSS

html, body, div{
    height:100%;
}

JavaScript

var svg = document.getElementById('sine_wave').children[0];
var origin = { //origin of axes
    x: 100,
    y: 100
};
var amplitude = 10; // wave amplitude
var rarity = 1; // point spacing
var freq = 0.1; // angular frequency
var phase = 20; // phase angle

for (var i = -100; i < 1000; i++) {
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

    line.setAttribute('x1', (i - 1) * rarity + origin.x);
    line.setAttribute('y1', Math.sin(freq * (i - 1 + phase)) * amplitude + origin.y);

    line.setAttribute('x2', i * rarity + origin.x);
    line.setAttribute('y2', Math.sin(freq * (i + phase)) * amplitude + origin.y);

    line.setAttribute('style', "stroke:black;stroke-width:1");

    svg.appendChild(line);
}