Skip to main content

makeSpark()

Part of the @remotion/shapes package.

Generates a spark SVG path.

Example​

spark.ts
import { makeSpark } from "@remotion/shapes";

const { path, width, height, transformOrigin, instructions } = makeSpark({
  width: 240,
  height: 336,
  edgeRoundness: 1,
  cornerRadius: 0,
});

console.log(path); // M 120 0 C 120 92.78383797157332 173.72583002030478 168 240 168 C 173.72583002030478 168 120 243.21616202842668 120 336 C 120 243.21616202842668 66.27416997969523 168 0 168 C 66.27416997969523 168 120 92.78383797157332 120 0 Z
console.log(width); // 240
console.log(height); // 336
console.log(transformOrigin); // '120 168'
console.log(instructions); // '[{type: "M"}, ...]'

Arguments​

width

number

The width of the spark.

height

number

The height of the spark.

edgeRoundness

number

Controls the inward curvature of the edges between the four points. Default 1.

cornerRadius

number

Rounds the four points of the spark. Default 0.

Return type​

path

A string that is suitable as an argument for d in a <path> element.

width

The width of the spark. Suitable for defining the viewBox of an <svg> tag.

height

The height of the spark. Suitable for defining the viewBox of an <svg> tag.

instructions

An array with SVG instructions. The type for a instruction can be seen by importing Instruction from @remotion/shapes.

transformOrigin

A string representing the point of origin if a shape should be rotated around itself.

If you want to rotate the shape around its center, use the transform-origin CSS property and pass this value, and also add transform-box: fill-box. This is the default for <Spark />.

See also​