◯Shapes

Circles, stars and hearts drawn with signed distance functions (SDF) — also used as masks and as the shape for material effects. — 16 entries

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Circle원

Draw a filled circle with adjustable size and edge softness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ellipse타원

Create an oval by adjusting its horizontal and vertical radii independently.

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.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Polygon정다각형

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

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

Heart하트

A filled heart silhouette with adjustable size and orientation.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ring링

A donut-shaped ring with adjustable center radius and band thickness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Arc부채꼴

A pie-sector wedge with adjustable radius and aperture angle.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Crescent초승달

A crescent silhouette formed by subtracting an offset inner circle from an outer circle.

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

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

Parallelogram평행사변형

A parallelogram with adjustable width, height, and top-edge skew.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Trapezoid사다리꼴

A trapezoid with independently adjustable top and bottom widths.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Teardrop물방울

A droplet silhouette with a rounded bulb tapering to a point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Vesica렌즈형 (베시카 피스키스)

A lens-shaped intersection formed by two overlapping circles.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Line선

Connect two points with an adjustable-width solid, dashed, or dotted line.