SVG - Draw multiple circles with a slider

Question

I'm new to HTML5 programming. I have done this so far on my project for university: http://imgur.com/iFlCplg

Basically, I've drawn 4 circles to form an image, and now I have to code that big image in order to make 10 little images per line with a slider, like so: http://imgur.com/WRo3y22

The slider only needs to work when I press the button.

My code:

<svg id="vect"  width="500" height="500"><svg/>

function circletop(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#013D55" />';
     }
     function circlebot(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#013D55" />';
     }

     function circleRight(x,y,r,esp,cor){
    vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#AA8D49" />';
     }
     function circleLeft(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#AA8D49" />';
     }

I combined it all on a single function:

function svgBigPicture(){
    circlebop(250,500,225,50,"#449779");
    circleright(0,250,225,50,"#E6B569");
    circleleft(500,250,225,50,"#E6B569");
    circletop(250,0,225,50,"#449779");

How do I use this to make many circles per line? I can't use jQuery, has to be 100% JavaScript.

Answer 1

This seems a bit more of a pattern and I think the way to are approaching this is odd - SVG is nice, yes, but writing using innerHTML seems a bit.. Like cheating. I know the following solution does not use SVG for this, but consider using canvas for a possible solution:

 var CANVAS = document.getElementById('canvas'); var CTX = CANVAS.getContext('2d'); function draw(x, y, radius){ CANVAS.width = x * radius * 2; CANVAS.height = y * radius; // Because canvas draws on top, we want to start at the bottom! for(var Y = y; Y >= -1; Y--) for(var X = x; X >= -1; X--){ CTX.beginPath(); CTX.arc(X * radius * 2 + (Y%2?radius:0), Y * radius, radius, 0, Math.PI * 2); CTX.strokeStyle = Y%2 ? 'red' : 'blue'; CTX.fillStyle = '#fff'; CTX.stroke(); CTX.fill(); CTX.closePath(); } } draw(5,5,50) var INPUT = document.getElementById('input'); INPUT.addEventListener('change', function(){ draw(parseInt(this.value, 10), parseInt(this.value, 10) + 1, 50) }); 

 input { position: fixed; top: 20px; left: 20px; } 

 <canvas id="canvas"></canvas> <input id="input" type="range" min="1" max="10" step="1" /> 

Using SVG with JS is just not the best match... JS has difficulties reading contents of the SVG tag and you're making more problems for yourself. If you really want to go down this path the suggestion is to have a look at defs and pattern definitions for SVG, heres some documentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns