SVG path to points
by realhunts
HTML
<svg width="200" height="200" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="path" fill="#000000" fill-opacity="0.996078431372549" stroke="none" d="
M 94.75 70.2
Q 89.1 68.45 82.7 67.5 81.7 70 80.75 72.55 78.75 77.9 76.95 83.35 75.2 83.35 73.5 83.4 66.5 83.7 61.1 85.55 59.15 82.8 57.25 80.1 54.15 75.85 51.05 71.7 48.2 72.65 45.7 73.95 44.15 74.65 42.7 75.45 37.95 78.1 34.15 81.6 35.25 84.2 36.45 86.8 38.8 91.8 41.15 96.75 40.15 97.9 39.05 98.95 38.35 99.75 37.65 100.5 34.1 104.25 31.75 109.25 29.6 108.85 27.4 108.45 21.15 107.25 14.85 106.55 14.2 108.05 13.55 109.55 12.9 111.15 12.5 112.85 10.9 118.6 10.05 125.1 10.05 125.25 10.05 125.45
L 10.05 125.5
Q 15.3 127.55 20.55 129.55 23.1 130.55 25.6 131.55 25.6 138.85 27.15 144.7 27.5 146.05 27.9 147.4 23.6 150.35 19.4 153.45 16.85 155.3 14.3 157.2 16.3 162.5 19.1 167 21.4 170.7 24.1 174.1 29.25 171.95 34.15 169.6 36.85 168.3 39.6 167.15 43.2 170.85 47.65 173.65 49.8 174.95 51.8 176.3 50.7 182.55 49.75 188.95 49.45 190.9 49.25 192.95 54.25 195.25 60.25 196.6 63.9 197.4 67.75 198 67.9 198.05 68 198 68.05 198 68.1 198 69.15 195.3 70.15 192.65 72.2 187.35 74.15 182.05 75.5 181.9 77.1 181.85 84.25 181.8 89.55 179.75 91.6 182.4 93.6 185.2 96.6 189.55 99.65 193.8 101.65 192.65 103.85 191.7 105.9 190.75 107.9 189.55 112.45 186.95 116.5 183.55 115.3 180.8 114.05 178.05 111.75 173.05 109.45 168.05 110.95 166.6 112.3 165 115.75 161.05 118.25 156.3 120.55 156.6 122.65 156.95 129.1 158.05 135.15 159 136.6 155.7 137.75 152.1 139.5 146.65 140.15 139.95 137.6 138.9 135 137.95 129.65 135.9 124.35 134 124.35 132.65 124.3 131.3 124 124.3 122.35 118.6 125.1 116.75 127.75 114.8 132 111.7 136.15 108.6 134.45 104.2 132.2 100.4 129.55 95.7 126.1 91.85 123.4 92.9 120.85 94.05 115.8 96.4 110.9 98.8
L 110.85 98.8
Q 108.25 96.1 105.35 93.75 105.3 93.75 105.3 93.7 103.3 92.15 100.95 90.95 100.95 90.9 100.9 90.9 100 90.2 99.1 89.55 99.3 87.55 99.7 85.3 100.7 79.1 101.6 72.65 98.25 71.35 94.75 70.2
M 61.2...
JavaScript
var canvas = document.getElementById("canvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var path = document.getElementById('path');
var resolution = 200
for ( var i=0,l=resolution; i<l; i++ ){
var point = path.getPointAtLength( i/l * path.getTotalLength() );
console.log("k")
ctx.fillRect(point.x, point.y,2,2); //
}