A beautiful shape for tldraw.

cacheflowelike.ts

// Run this code on tldraw.com
// By @steveruizok
// Based on an awesome image by @cacheflowe: https://twitter.com/cacheflowe/status/1408902719130288130

new NumberControl({
  label: 'radius',
  value: 200,
  min: 50,
  max: 500,
})

new NumberControl({
  label: 'rows',
  value: 16,
  min: 4,
  max: 32,
})

new NumberControl({
  label: 'bloom',
  value: 0.01,
  min: 0.01,
  max: 1,
  step: 0.01,
})

const radius: number = controls.radius
const rows: number = controls.rows
const bloom: number = controls.bloom

const topA = [radius, 0]
const topB = [radius * 3, 0]
const centerA = [radius, radius]
const centerB = [radius * 3, radius]

for (let i = 0; i < rows + 1; i++) {
  const t = i / rows
  const left = Vec.rotWith(topA, centerA, -Math.PI * t)
  const right = Vec.rotWith(topB, centerB, Math.PI * t)
  const size1 = Vec.div(Vec.sub(right, left), 2)

  const height1 = size1[0] * bloom

  new Ellipse({
    id: 'outer-ellipse-' + radius + '' + i,
    point: [left[0], left[1] - height1 / 2],
    radiusX: size1[0],
    radiusY: height1,
    style: {
      dash: bloom < 0.1 ? DashStyle.Solid : DashStyle.Dotted,
    },
  })

  const left2 = Vec.rotWith(topA, centerA, Math.PI * t)
  const right2 = Vec.rotWith(topB, centerB, -Math.PI * t)
  const size2 = Vec.div(Vec.sub(right2, left2), 2)

  const height2 = size2[0] * bloom

  new Ellipse({
    id: 'inner-ellipse-' + radius + '' + i,
    point: [left2[0], 8 + (left2[1] - height2 / 2)],
    radiusX: size2[0],
    radiusY: height2,
    style: {
      dash: bloom < 0.1 ? DashStyle.Solid : DashStyle.Dotted,
    },
  })
}