Svg and snap basics

Question

Any clue how can I make this more simple, so I can easily update the values? Sample:

for (var i = 0; i < 10; i++) {
var x = 40 * i;
  for (var t = 0; t < 8; t++) {
   var y = 40 * t,
   rectBg = canvas.rect(x,y,30,30);
    if (x === 0 && y == 160 ||
       ..
        x == 360 && y == 280) {
     rectBg.attr({
       fill: '#DF1279'
     });
    } else if (x === 0 && y == 120 ||
             ..
               x == 360 && y == 200) {
      rectBg.attr({
       fill: '#F3B7D3'
  }); 
   } else {
     rectBg.attr({
       fill: '#e8e8e8'
  }); 
   }
};

};

http://codepen.io/ricnunes/pen/GEHpD

Make a function to do it. – Zach Saucier Oct 14 '14 at 15:02 — Zach Saucier, Oct 14 '14 at 15:02

score 0 · Answer 1 · answered Oct 16 '14 at 08:05

Managed to make it work. After all it was really simple:

var canvas = Snap($(window).innerWidth() , 500 ),
  squareSize = 30,
  squareSpace = 10,
  xSize = 10,
  ySize = 8,
  frontPosition = [4,5,5,3,4,3,5,3,2,2],
  backPosition = [5,6,6,5,5,5,6,5,3,3];  
for (var i = 0; i < xSize; i++) {  
var x = (squareSize + squareSpace) * i;
  for (var t = 0; t < ySize; t++) {
    var y = (squareSize + squareSpace) * t,
    rectBg = canvas.rect(x,y,squareSize,squareSize);          
    if (y >= (ySize-frontPosition[i]) * (squareSize + squareSpace) ) {
      rectBg.attr({
        fill:  '#DF1279'
      });
     } else if (y >= (ySize-backPosition[i]) * (squareSize + squareSpace) ) {
       rectBg.attr({
         fill: 'pink'
       }); 
      }
    else {
       rectBg.attr({
         fill: '#e8e8e8'
       });
    }
    }
  }

Svg and snap basics

1 Answers1