How to draw a sine wave pattern with SVG

Question

I'm trying to turn the following pattern...

enter image description here

...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.

Take a look at these answers: http://math.stackexchange.com/questions/116369/can-a-rational-bezier-curve-take-exactly-the-same-shape-as-a-part-of-the-sine-fu and http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js — helderdarocha, Apr 09 '14 at 10:57

score 1 · Answer 1 · edited May 23 '17 at 12:24

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);
}

How to draw a sine wave pattern with SVG

1 Answers1