# 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](https://cuttle.xyz/learn/reference/Geometry)

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

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

`parameters`

`object`

ArcFromCenterAndPoints(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

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

-   `point1` (Vec)
    
-   `point2` (Vec)
    
-   `point3` (Vec)
    

`parameters`

`object`

ArchimedeanSpiral(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
ArchimedeanSpiral({
  revolutions: 3,
})
```

-   `revolutions` (number)

`parameters`

`object`

AutoLayout(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `spacing`

[Learn more](https://cuttle.xyz/learn/auto-layout)

`parameters`

`object`

Circle(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

`parameters`

`object`

CircleFromCenterAndPoint(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `center` (Vec)
    
-   `point` (Vec)
    

`parameters`

`object`

CircleFromThreePoints(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

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

-   `point1` (Vec)
    
-   `point2` (Vec)
    

`parameters`

`object`

ConnectedText(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

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

-   `emoji` (emoji url string)

`parameters`

`object`

ImageFrame(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `image` (image url string)
    
-   `opacity` (Percentage)
    

`parameters`

`object`

Line(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `point1` (Vec)
    
-   `point2` (Vec)
    

`parameters`

`object`

LineGuide(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `origin` (Vec)
    
-   `angle` (Angle)
    

`parameters`

`object`

LogarithmicSpiral(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `revolutions` (number)
    
-   `pitch` (Angle)
    

`parameters`

`object`

PointGuide(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `position` (Vec)

`parameters`

`object`

Polygon(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
Polygon({
  sides: 5,
})
```

-   `sides` (Integer)

`parameters`

`object`

PolygonFromSide(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

-   `point1` (Vec)
    
-   `point2` (Vec)
    
-   `sides` (Integer)
    

`parameters`

`object`

Rectangle(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

`parameters`

`object`

FunctionPlot(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

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

-   `points` (Integer)
    
-   `innerRadius` (Percentage)
    

`parameters`

`object`

Switcher(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

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

[Learn more](https://cuttle.xyz/learn/switcher)

`parameters`

`object`

Text(parameters)→[Geometry](https://cuttle.xyz/learn/reference/Geometry)

```js
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](https://cuttle.xyz/learn/reference/Geometry)

```js
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`