Built-in Shapes

A collection of functions for generating geometric shapes and paths. These are the code equivalents of the shapes available in the Create Panel of the editor. Parameters are optional, and the defaults are shown in the code examples.

Functions

ArcFromCenterAndAngles(parameters)→Geometry

ArcFromCenterAndAngles({
  center: Vec(),
  radius: 1,
  startAngle: 0,
  endAngle: 90,
})

center (Vec)
radius (Distance)
startAngle (Angle)
endAngle (Angle)

parameters

object

ArcFromCenterAndPoints(parameters)→Geometry

ArcFromCenterAndPoints({
  center: Vec(),
  point1: Vec(1, 0),
  point2: Vec(0, 1),
  clockwise: true,
})

center (Vec)
point1 (Vec)
point2 (Vec)
clockwise (boolean)

parameters

object

ArcFromThreePoints(parameters)→Geometry

ArcFromThreePoints({
  point1: Vec(-1, 0),
  point2: Vec(0, -1),
  point3: Vec(1, 0),
})

point1 (Vec)
point2 (Vec)
point3 (Vec)

parameters

object

ArchimedeanSpiral(parameters)→Geometry

ArchimedeanSpiral({
  revolutions: 3,
})

revolutions (number)

parameters

object

AutoLayout(parameters)→Geometry

AutoLayout({
  pieces: [[Circle, Rectangle], [Polygon, Star]],
  spacing: 0.05,
})

spacing

Learn more

parameters

object

Circle(parameters)→Geometry

Circle().transform({ scale: 1.0 })

parameters

object

CircleFromCenterAndPoint(parameters)→Geometry

CircleFromCenterAndPoint({
  center: Vec(0, 0),
  point: Vec(0.5, 0),
})

center (Vec)
point (Vec)

parameters

object

CircleFromThreePoints(parameters)→Geometry

CircleFromThreePoints({
  point1: Vec(-0.5, 0.0),
  point2: Vec(0, -0.5),
  point3: Vec(0.5, 0),
})

point1 (Vec)
point2 (Vec)
point3 (Vec)

parameters

object

CircleFromTwoPoints(parameters)→Geometry

CircleFromTwoPoints({
  point1: Vec(-0.5, 0.0),
  point2: Vec(0.5, 0.0),
})

point1 (Vec)
point2 (Vec)

parameters

object

ConnectedText(parameters)→Geometry

ConnectedText({
  text: "Connected",
  font: Font("https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ96A4sijpFu_.ttf", {
      connect: "dots and letters",
      lineHeight: 0.8,
      thicken: 0,
    }),
  size: 72,
  align: "center",
  verticalAlign: "middle",
  welding: "everything",
})

text (RichText | string)
font (Font | font url string)
size (number)
align ("left" | "center" | "right")
verticalAlign ("top" | "middle" | "baseline" | "bottom")
welding ("everything" | "letters" | "none")

parameters

object

ConnectedTextWithTails(parameters)→Geometry

ConnectedTextWithTails({
  text: "love",
  font: Font("https://assets.cuttle.xyz/fonts/pro/Hilda-Boby-Script.otf.json", {
      connect: "dots and letters",
      startStyle: "tail",
      betweenStyle: "heart",
      endStyle: "tail",
      lineHeight: 0.8,
      thicken: 0,
    }),
  size: 72,
  align: "center",
  verticalAlign: "middle",
  welding: "everything",
})

text (RichText | string)
font (Font | font url string)
size (number)
align ("left" | "center" | "right")
verticalAlign ("top" | "middle" | "baseline" | "bottom")
welding ("everything" | "letters" | "none")

parameters

object

Emoji(parameters)→Geometry

Emoji({
  emoji: "https://assets.cuttle.xyz/noto-emoji-600/1f642.svg",
})

emoji (emoji url string)

parameters

object

ImageFrame(parameters)→Geometry

ImageFrame({
  image: "",
  opacity: 1,
})

image (image url string)
opacity (Percentage)

parameters

object

Line(parameters)→Geometry

Line({
  point1: Vec(0, 0),
  point2: Vec(1, 0),
})

point1 (Vec)
point2 (Vec)

parameters

object

LineGuide(parameters)→Geometry

LineGuide({
  origin: Vec(0, 0),
  angle: 0,
})

origin (Vec)
angle (Angle)

parameters

object

LogarithmicSpiral(parameters)→Geometry

LogarithmicSpiral({
  revolutions: 3,
  pitch: 12,
})

revolutions (number)
pitch (Angle)

parameters

object

PointGuide(parameters)→Geometry

PointGuide({
  position: Vec(0, 0),
})

position (Vec)

parameters

object

Polygon(parameters)→Geometry

Polygon({
  sides: 5,
})

sides (Integer)

parameters

object

PolygonFromSide(parameters)→Geometry

PolygonFromSide({
  point1: Vec(0, 0),
  point2: Vec(1, 0),
  sides: 5,
})

point1 (Vec)
point2 (Vec)
sides (Integer)

parameters

object

Rectangle(parameters)→Geometry

Rectangle().transform({ scale: Vec(1.0, 1.0) })

parameters

object

FunctionPlot(parameters)→Geometry

FunctionPlot({
  func: (t) => Vec(t / 90, sin(t)),
  domainStart: -180,
  domainEnd: 180,
  tolerance: 0.001,
})

domainStart (number)
domainEnd (number)
tolerance (number)

parameters

object

Star(parameters)→Geometry

Star({
  points: 5,
  innerRadius: 0.5,
})

points (Integer)
innerRadius (Percentage)

parameters

object

Switcher(parameters)→Geometry

const shapeMap = {
  "star": Star,
  "circle": Circle,
};
const shapeKey = "star";
return Switcher({
  shape: shapeMap[shapeKey],
})

Learn more

parameters

object

Text(parameters)→Geometry

Text({
  text: "Aa",
  font: "https://fonts.gstatic.com/s/notosans/v39/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d41P6zHtY.ttf",
  size: 1,
  align: "center",
  verticalAlign: "middle",
  welding: "none",
})

text (RichText | string)
font (Font | font url string)
size (Distance)
align ("left" | "center" | "right")
verticalAlign ("top" | "middle" | "baseline" | "bottom")
welding ("everything" | "letters" | "none")

parameters

object

VerticalText(parameters)→Geometry

VerticalText({
  text: "Vert",
  font: Font(
      "https://fonts.gstatic.com/s/rubikmonoone/v20/UqyJK8kPP3hjw6ANTdfRk9YSN-8wRqQrc_j9.ttf",
      { capitalize: "uppercase", letterSpacing: 0.0, connect: "none" },
    ),
  size: 1.0,
  verticalAlign: "middle",
  welding: "none",
  order: "normal",
})

text (RichText | string)
font (Font | font url string)
size (number)
verticalAlign ("top" | "middle" | "bottom")
welding ("everything" | "letters" | "none")
order ("normal" | "reverse")

parameters

object