- WIDTH = 200
- HEIGHT = 200
- rand = (a, b) => a + Math.floor(Math.random() * (b - a + 1)) ;

mixin heart(size,posX, posY, shapeFactorL, shapeFactorR, stroke, fill = 'none', rotate = 0, cleavage = .75)
  - let x = size / 4
  - let y = x * cleavage
  - let v = x * shapeFactorL
  - let w = x * (1 - shapeFactorL)
  - let V = x * shapeFactorR
  - let W = x * (1 - shapeFactorR)
  - let tX = (posX + size / 2) / WIDTH * 100 
  - let tY = (posY + size / 2) / HEIGHT * 100
  path(transform-origin=`${tX}% ${tY}%`, transform=`rotate(${rotate})`, stroke=stroke, fill=fill, d=[
    `M ${posX} ${posY}`,
    'q0-x x -x qx 0 x y',
    'q0-y x -y qx 0 x x',
    'q0 V -x x',
    'q-x W -x x',
    'q0 -v -x -x',
    'q-x -w -x -x'
  ].join('')
   .replace(/x/g, x)
   .replace(/y/g, y)
   .replace(/v/g, v)
   .replace(/w/g, w)
   .replace(/V/g, V)
   .replace(/W/g, W))

svg(viewBox=`0 0 ${WIDTH} ${HEIGHT}`, role="img", aria-label="Random heart strokes")
  
  each love in Array(50)
    - color = `rgb(${rand(100,255)}, ${rand(100,255)}, ${rand(100,255)})`;
    
    +heart(rand(15, 30), rand(0, WIDTH), rand(0, HEIGHT), rand(3,10)/10, rand(3,10)/10, color, 'none', rand(-20, 20), rand(4,8)/10)

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}

svg {
  display: block;
  width: 90vmin;
  height: 90vmin;
  border: 4px solid #fff;
  background: #000;
}

path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

const svg = document.querySelector('svg');
const WIDTH = svg.viewBox.baseVal.width;
const HEIGHT = svg.viewBox.baseVal.height;
const rand = (a, b) => a + Math.floor(Math.random() * (b - a + 1))

const heart = (path, size,posX, posY, shapeFactorL, shapeFactorR, stroke, fill = 'none', rotate = 0, cleavage = 0.75) => {
  let x = size / 4
  let y = x * cleavage
  let v = x * shapeFactorL
  let w = x * (1 - shapeFactorL)
  let V = x * shapeFactorR
  let W = x * (1 - shapeFactorR)
  let tX = (posX + size / 2) / WIDTH * 100 
  let tY = (posY + size / 2) / HEIGHT * 100
  path.setAttribute('transform-origin', `${tX}% ${tY}%`);
  path.setAttribute('transform', `rotate(${rotate})`);
  path.setAttribute('stroke', stroke);
  path.setAttribute('fill', fill);
  path.setAttribute('d', [
    `M ${posX} ${posY}`,
    'q0-x x -x qx 0 x y',
    'q0-y x -y qx 0 x x',
    'q0 V -x x',
    'q-x W -x x',
    'q0 -v -x -x',
    'q-x -w -x -x'
  ].join('')
   .replace(/x/g, x)
   .replace(/y/g, y)
   .replace(/v/g, v)
   .replace(/w/g, w)
   .replace(/V/g, V)
   .replace(/W/g, W))
}

const hearts = Array.from(document.querySelectorAll('path'));

window.onclick = () => {
  for (const h of hearts) {
    const color = `rgb(${rand(100,255)}, ${rand(100,255)}, ${rand(100,255)})`;
    heart(h, rand(15, 30), rand(0, WIDTH), rand(0, HEIGHT), rand(3,10)/10, rand(3,10)/10, color, 'none', rand(-20, 20), rand(4,8)/10)
  }
}