How to draw a sine wave pattern with SVG - html

Question

I'm trying to turn the following pattern...
...into a perfect sine wave pattern. Which control points should I use for it (how can I calculate them?)? Do I have to make the pattern wider also?
Here is how the above was generated:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<defs>
<!-- Geometry -->
<g>
<rect id="square" x="0" y="0" width="200" height="200" />
</g>
<!-- Patterns -->
<pattern id="wave" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 0 7.5 Q 2.5 7.5 2.5 5 Q 2.5 2.5 5 2.5 Q 7.5 2.5 7.5 5 Q 7.5 7.5 10 7.5" stroke="black" fill="transparent" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" />
</pattern>
</defs>
<!-- Graphics -->
<use xlink:href="#square" transform="translate(000, 000)" fill="url(#wave)"/>
</svg>
Demo to play with is here: http://jsfiddle.net/uEULF/
Thank you for the help.

Answer 1

Use the example here in this answer by Asad : How to draw sine waves with SVG (+JS)?
Here is the demonstration : http://jsfiddle.net/HyTad/
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);
}