html-squircle/src/utils/getCurveSpec.ts

Utilities for generating superellipse squircles in the form of SVG strings, to be used in clip-path and background inline styles.

import { clamp } from "./clamp.js"

/** Get the pixels shifts for curve length and roundness. */
export const getCurveSpec = (
  width: number,
  height: number,
  curveLength: number | undefined,
  roundness: number,
): readonly [curveLengthShift: number, roundnessShift: number] => {
  const shortestSide = Math.min(width, height)

  // Matches Apple app icons when square
  const defaultCurveLength = (5 / 16) * shortestSide
  const minCurveLength = 0
  const maxCurveLength = shortestSide / 2

  const curveLengthShift = clamp(
    curveLength ?? defaultCurveLength,
    minCurveLength,
    maxCurveLength,
  )
  const roundnessShift = curveLengthShift * clamp(roundness, -1, 1)

  return [curveLengthShift, roundnessShift]
}