``````- 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)
}
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.