Circled Heart

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var heartX = intVariable('heartX', 1, 6);
var heartY = intVariable('heartY', 1, 6);
var heartPath = "M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z";

for (var x = 100; x < width - 100; x += 50){
  for (var y = 100; y < height - 100; y += 50){
    s.circle(x + 25, y + 25, 25).attr({
      fill: '#FE4365',
      opacity: 1 - (y / height)
    });

    if (heartX == (x / 50) - 1 && heartY == (y / 50) - 1){
      s.path(heartPath).attr({fill: 'white'})
       .transform(Snap.format('t{x},{y}s1.5', {x: x + 9, y: y + 11}));
    }
  }
}