Shader Atlas
한국어
◯ Shapes

Polygon

정다각형

Make a regular polygon from a triangle to a nearly circular form, with adjustable sides and corner rounding.

Also known as: PolygonRegular polygon

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Polygon } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Polygon />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Polygon } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Polygon/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Polygon } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Polygon />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Polygon } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Polygon />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Polygon',
    }
  ]
}, { disableTelemetry: true })

Props · Polygon

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
colorColor#ffffff—Fill color of the polygon
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the polygon
radiusRadius0.40 – 1 (step 0.01)Inradius — distance from the center to the middle of each side, in UV space (the vertices sit a little farther out)
sidesSides63 – 12 (step 1)Number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.)
roundingRounding00 – 1 (step 0.01)Corner rounding — 0 is sharp vertices, 1 morphs into a circle
rotationRotation00 – 360 (step 1)Rotation in degrees
softnessSoftness00 – 0.1 (step 0.001)Edge softness for antialiasing
strokeThicknessStroke Thickness00 – 0.2 (step 0.005)Stroke thickness. Zero means no stroke.
strokeColorStroke Color#000000—Color of the stroke outline
strokePositionStroke Positioncenteroutside · center · insidePosition of the stroke relative to the shape edge
colorSpaceColor Blendinglinearlinear · oklch · oklab · hsl · hsv · lchColor space for blending fill and stroke colors

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Star별

A pointed star with adjustable point count and inner depth.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Flower꽃 모양

A radial flower shape with adjustable petal count and valley depth.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Cross십자

A plus-shaped form with adjustable arm length, arm width, and rounding.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Rounded Rect둥근 사각형

A rectangle with adjustable width, height, and corner rounding.

A regular polygon has equal-length sides arranged around a center. Changing the side count changes its silhouette from a triangle to a square, hexagon, and beyond.

`sides` sets the number of sides from 3 to 12. `radius` is the distance from the center to the middle of each side, from 0 to 1. Raise `rounding` from 0 to 1 to soften the corners toward a circle, and use `rotation` from 0 to 360 degrees to change its orientation.

A high `rounding` value removes the polygon's distinct corners, so keep it low when the side count matters to an icon. Pair it with `Star` or `Flower` to compare angular and radial shapes around the same center.

When to use

Use it for geometric icons, badges, and repeating pattern shapes. It can create a regular polygon with a chosen number of sides or soften its corners. Avoid it when you need an organic, asymmetric outline.

Open as page ↗