Digital paper marbling for the web

<canvas id="bath" width="800" height="600" style="width:100%;max-width:800px;background:#f3ead8"></canvas>
<script>
const canvas = document.getElementById('bath')
const g = canvas.getContext('2d')
const INKS = ['#24306b', '#9b2f2b', '#c9962e', '#f6f1e6', '#3f7a6b']
let drops = [] // { color, pts: [[x, y], ...] }
function drop(cx, cy, r, color) {
  for (const d of drops) for (const p of d.pts) {
    const dx = p[0] - cx, dy = p[1] - cy, d2 = dx * dx + dy * dy
    const k = Math.sqrt(1 + (r * r) / d2)
    p[0] = cx + dx * k; p[1] = cy + dy * k
  }
  const pts = []
  for (let i = 0; i < 240; i++) {
    const a = (i / 240) * Math.PI * 2
    pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r])
  }
  drops.push({ color, pts })
}
function tine(x0, z = 80, u = 0.97) {
  // A vertical stroke at x = x0, moving ink downward.
  for (const d of drops) for (const p of d.pts) {
    p[1] += z * Math.pow(u, Math.abs(p[0] - x0))
  }
}
function draw() {
  g.fillStyle = '#f3ead8'; g.fillRect(0, 0, canvas.width, canvas.height)
  for (const d of drops) {
    g.fillStyle = d.color
    g.beginPath()
    d.pts.forEach(([x, y], i) => (i ? g.lineTo(x, y) : g.moveTo(x, y)))
    g.closePath(); g.fill()
  }
}
for (let i = 0; i < 8; i++) drop(400, 300, 40 + i * 6, INKS[i % INKS.length])
tine(400)
draw()
canvas.addEventListener('click', (e) => {
  const b = canvas.getBoundingClientRect()
  const s = canvas.width / b.width
  drop((e.clientX - b.left) * s, (e.clientY - b.top) * s, 30, INKS[drops.length % INKS.length])
  draw()
})
</script>