const startTime = Date.now()
let pixelRatio = 1
let radius
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
// pass a canvas element.
// If the canvas is not square, the center will be cropped.
kumaleon.setCanvas(canvas)
const draw = (radiusRatio, timeOffest, strokeStyle) => {
context.strokeStyle = strokeStyle
context.lineWidth = 1 * pixelRatio
const currentTime = Date.now()
const time = (currentTime - startTime) * 0.2 + timeOffest
const h = (Math.sin(time * 0.0006) + 1) * 3
const n = 5 + (Math.sin(time * 0.0014) + 1) * 2
const numSegments = 20 + (Math.sin(time * 0.0014) + 1) * 10
const offsetX = window.innerWidth * 0.5 * pixelRatio
const offsetY = window.innerHeight * 0.5 * pixelRatio
const angleUnit = (Math.PI * 2) / numSegments
const r = radius * radiusRatio
context.beginPath()
for (let i = 0; i < numSegments; i++) {
const t = i * angleUnit + time * 0.001
const x = (r * (n - 1) * Math.cos(t) + r * h * Math.cos((n - 1) * t)) / n
const y = (r * (n - 1) * Math.sin(t) + r * h * Math.sin((n - 1) * t)) / n