html-squircle/src/core/clipSquircle.ts

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

import { getCurveSpec } from "../utils/getCurveSpec.js"
import { getPath } from "../utils/getPath.js"

import type { SquircleOptionsClip } from "../types.js"

/** Produces a squircle path to be used in `background-clip` inline styles. */
export const clipSquircle = ({
  width,
  height,
  curveLength,
  roundness = 0.2,
}: SquircleOptionsClip) =>
  `path('${getPath(width, height, ...getCurveSpec(width, height, curveLength, roundness))}')` as const

/** Same as {@link clipSquircle}, but wrapped in an object. */
export const clipSquircleObj = (options: SquircleOptionsClip) => ({
  clipPath: clipSquircle(options),
})