diff --git a/.changeset/nine-pens-design.md b/.changeset/nine-pens-design.md
new file mode 100644
index 000000000..b37e68316
--- /dev/null
+++ b/.changeset/nine-pens-design.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add Polygon primitive
diff --git a/.changeset/wide-berries-invite.md b/.changeset/wide-berries-invite.md
new file mode 100644
index 000000000..396e96a1a
--- /dev/null
+++ b/.changeset/wide-berries-invite.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add Ellipse primitive
diff --git a/packages/layerchart/src/lib/components/Ellipse.svelte b/packages/layerchart/src/lib/components/Ellipse.svelte
new file mode 100644
index 000000000..3bde17ec2
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Ellipse.svelte
@@ -0,0 +1,187 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '$lib/utils/types.js';
+
+  export type EllipsePropsWithoutHTML = {
+    /**
+     * The center x position of the ellipse.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the ellipse.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the ellipse.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the ellipse.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the ellipse on the x-axis.
+     *
+     * @default 1
+     */
+    rx?: number;
+
+    /**
+     * The initial radius of the ellipse on the x-axis.
+     *
+     * @default rx
+     */
+    initialRx?: number;
+
+    /**
+     * The radius of the ellipse on the y-axis.
+     *
+     * @default 1
+     */
+    ry?: number;
+
+    /**
+     * The initial radius of the ellipse on the y-axis.
+     *
+     * @default ry
+     */
+    initialRy?: number;
+
+    /**
+     * A bindable reference to the `<ellipse>` element
+     *
+     * @bindable
+     */
+    ref?: SVGEllipseElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type EllipseProps = EllipsePropsWithoutHTML &
+    Without<SVGAttributes<Element>, EllipsePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+
+  import { getRenderContext } from './Chart.svelte';
+  import { createMotion, type MotionProp } from '$lib/utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderEllipse, type ComputedStylesOptions } from '$lib/utils/canvas.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createKey } from '$lib/utils/key.svelte.js';
+  import { layerClass } from '$lib/utils/attributes.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    rx = 1,
+    initialRx: initialRxProp,
+    ry = 1,
+    initialRy: initialRyProp,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: EllipseProps = $props();
+
+  let ref = $state<SVGEllipseElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialRx = initialRxProp ?? rx;
+  const initialRy = initialRyProp ?? ry;
+
+  const renderCtx = getRenderContext();
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionRx = createMotion(initialRx, () => rx, motion);
+  const motionRy = createMotion(initialRy, () => ry, motion);
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderEllipse(
+      ctx,
+      { cx: motionCx.current, cy: motionCy.current, rx: motionRx.current, ry: motionRy.current },
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: className,
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Ellipse',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerdown: restProps.onpointerdown,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+      },
+      deps: () => [
+        motionCx.current,
+        motionCy.current,
+        motionRx.current,
+        motionRy.current,
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <ellipse
+    bind:this={ref}
+    cx={motionCx.current}
+    cy={motionCy.current}
+    rx={motionRx.current}
+    ry={motionRy.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls(layerClass('ellipse'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+  />
+{/if}
diff --git a/packages/layerchart/src/lib/components/Polygon.svelte b/packages/layerchart/src/lib/components/Polygon.svelte
new file mode 100644
index 000000000..fad2ba4dd
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Polygon.svelte
@@ -0,0 +1,283 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '$lib/utils/types.js';
+
+  export type PolygonPropsWithoutHTML = {
+    /**
+     * The center x position of the polygon.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the polygon.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the polygon.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the polygon.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the polygon.
+     *
+     * @default 1
+     */
+    r?: number;
+
+    /**
+     * The initial radius of the polygon.
+     *
+     * @default r
+     */
+    initialR?: number;
+
+    /**
+     * The number of points in the polygon.
+     *
+     * @default 4
+     */
+    points?: number;
+
+    /**
+     * The radius of the curve for rounded corners.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+
+    /**
+     * The rotation of the polygon.
+     *
+     * @default 0
+     */
+    rotate?: number;
+
+    /**
+     * The percent to inset the odd points of the star (<1 inset, >1 outset)
+     *
+     * @default 0
+     */
+    inset?: number;
+
+    /**
+     * The horizontal stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleX?: number;
+
+    /**
+     * The vertical stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleY?: number;
+
+    /**
+     * The skew angle in degrees along the X axis.
+     *
+     * @default 0
+     */
+    skewX?: number;
+
+    /**
+     * The skew angle in degrees along the Y axis.
+     *
+     * @default 0
+     */
+    skewY?: number;
+
+    /**
+     * The tilt factor for x-coordinates.
+     *
+     * @default 1
+     */
+    tiltX?: number;
+
+    /**
+     * The tilt factor for y-coordinates.
+     *
+     * @default 1
+     */
+    tiltY?: number;
+
+    /**
+     * A bindable reference to the `<path>` element
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type PolygonProps = PolygonPropsWithoutHTML &
+    Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { getRenderContext } from './Chart.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '$lib/utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '$lib/utils/canvas.js';
+  import { createKey } from '$lib/utils/key.svelte.js';
+  import { layerClass } from '$lib/utils/attributes.js';
+  import { polygon } from '$lib/utils/shape.js';
+  import { roundedPolygonPath } from '$lib/utils/path.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    r = 1,
+    initialR: initialRProp,
+    points = 4,
+    cornerRadius = 0,
+    rotate = 0,
+    inset = 0,
+    scaleX = 1,
+    scaleY = 1,
+    skewX = 0,
+    skewY = 0,
+    tiltX = 0,
+    tiltY = 0,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: PolygonProps = $props();
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialR = initialRProp ?? r;
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionR = createMotion(initialR, () => r, motion);
+
+  let polygonPoints = $derived(
+    polygon({
+      cx: motionCx.current,
+      cy: motionCy.current,
+      count: points,
+      radius: motionR.current,
+      rotate,
+      inset,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      tiltX,
+      tiltY,
+    })
+  );
+  let d = $derived(roundedPolygonPath(polygonPoints, cornerRadius));
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenedOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: { interpolate: interpolatePath, ...extractedTween.options },
+      }
+    : undefined;
+
+  const tweenedState = createMotion(null, () => d, tweenedOptions);
+
+  const renderCtx = getRenderContext();
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      tweenedState.current,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: cls(layerClass('polygon'), fill == null && 'fill-surface-content', className),
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Polygon',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+        pointerdown: restProps.onpointerdown,
+        pointerover: restProps.onpointerover,
+        pointerout: restProps.onpointerout,
+        touchmove: restProps.ontouchmove,
+      },
+      deps: () => [
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+        tweenedState.current,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <path
+    d={tweenedState.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls(layerClass('polygon'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+    bind:this={ref}
+  />
+{/if}
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index a09017b2e..1e4cfa35a 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -43,6 +43,8 @@ export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
@@ -103,6 +105,8 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 7ee44231f..329dbac31 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -232,6 +232,28 @@ export function renderCircle(
   ctx.closePath();
 }
 
+export function renderEllipse(
+  ctx: CanvasRenderingContext2D,
+  coords: { cx: number; cy: number; rx: number; ry: number },
+  styleOptions: ComputedStylesOptions = {}
+) {
+  ctx.beginPath();
+  ctx.ellipse(coords.cx, coords.cy, coords.rx, coords.ry, 0, 0, 2 * Math.PI);
+  render(
+    ctx,
+    {
+      fill: (ctx) => {
+        ctx.fill();
+      },
+      stroke: (ctx) => {
+        ctx.stroke();
+      },
+    },
+    styleOptions
+  );
+  ctx.closePath();
+}
+
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(
   ctx: CanvasRenderingContext2D,
diff --git a/packages/layerchart/src/lib/utils/path.ts b/packages/layerchart/src/lib/utils/path.ts
index 98305a127..f8a4344c4 100644
--- a/packages/layerchart/src/lib/utils/path.ts
+++ b/packages/layerchart/src/lib/utils/path.ts
@@ -58,6 +58,36 @@ export function spikePath({
   return pathData;
 }
 
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export function roundedPolygonPath(coords: { x: number; y: number }[], radius: number) {
+  if (radius === 0) {
+    // Simple polygon with straight lines
+    return `M${coords[0].x},${coords[0].y}${coords
+      .slice(1)
+      .map((p) => `L${p.x},${p.y}`)
+      .join('')}Z`;
+  }
+
+  let path = '';
+  const length = coords.length + 1;
+  for (let i = 0; i < length; i++) {
+    const a = coords[i % coords.length];
+    const b = coords[(i + 1) % coords.length];
+    const t = Math.min(radius / Math.hypot(b.x - a.x, b.y - a.y), 0.5);
+
+    if (i == 0) path += `M${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+    if (i > 0) path += `Q${a.x},${a.y} ${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+    if (i < length - 1) path += `L${a.x * t + b.x * (1 - t)},${a.y * t + b.y * (1 - t)}`;
+  }
+  path += 'Z';
+  return path;
+}
+
 /** Flatten all `y` coordinates to `0` */
 export function flattenPathData(pathData: string, yOverride = 0) {
   let result = pathData;
diff --git a/packages/layerchart/src/lib/utils/shape.ts b/packages/layerchart/src/lib/utils/shape.ts
new file mode 100644
index 000000000..c22eb3611
--- /dev/null
+++ b/packages/layerchart/src/lib/utils/shape.ts
@@ -0,0 +1,91 @@
+import { range } from 'd3-array';
+import { degreesToRadians } from './math.js';
+
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export function polygonPoints(count: number, radius: number, rotate: number = 0) {
+  const angle = 360 / count;
+
+  return range(count).map((index) => {
+    return {
+      angle: degreesToRadians(angle * index) + degreesToRadians(rotate),
+      radius,
+    };
+  });
+}
+
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export function polygon(options: {
+  cx: number;
+  cy: number;
+  count: number;
+  radius: number;
+  rotate?: number;
+  inset?: number;
+  scaleX?: number;
+  scaleY?: number;
+  skewX?: number;
+  skewY?: number;
+  tiltX?: number;
+  tiltY?: number;
+}) {
+  const {
+    cx,
+    cy,
+    count,
+    radius,
+    rotate = 0,
+    inset = 1,
+    scaleX = 1,
+    scaleY = 1,
+    skewX = 0,
+    skewY = 0,
+    tiltX = 0,
+    tiltY = 0,
+  } = options;
+  const skewXRad = degreesToRadians(skewX);
+  const skewYRad = degreesToRadians(skewY);
+  return polygonPoints(count, radius, rotate).map(({ angle, radius }, i) => {
+    // inset
+    const insetScale = i % 2 == 0 ? 1 : 1 - inset;
+
+    // scale
+    let x = radius * insetScale * Math.cos(angle) * scaleX;
+    let y = radius * insetScale * Math.sin(angle) * scaleY;
+
+    // tilt
+    const normalizedY = (y + radius) / (2 * radius);
+    const normalizedX = (x + radius) / (2 * radius);
+    const tiltScaleX = tiltX > 0 ? 1 + tiltX * (1 - normalizedY) : 1 - tiltX * normalizedY;
+    const tiltScaleY = tiltY > 0 ? 1 + tiltY * (1 - normalizedX) : 1 - tiltY * normalizedX;
+    x *= tiltScaleX;
+    y *= tiltScaleY;
+
+    // skew
+    const xSkewed = x + Math.tan(skewXRad) * y;
+    const ySkewed = y + Math.tan(skewYRad) * x;
+    return {
+      x: cx + xSkewed,
+      y: cy + ySkewed,
+    };
+  });
+}
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index 23450850e..f754b48f3 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -69,10 +69,12 @@
       'Bar',
       'Circle',
       'Connector',
+      'Ellipse',
       'Group',
       'Line',
       'Marker',
       'Point',
+      'Polygon',
       'Rect',
       'Text',
     ],
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index 1f5ab1717..b40e3ba6d 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -13,6 +13,7 @@
     Tooltip,
     Circle,
     Group,
+    Polygon,
   } from 'layerchart';
   import { extent, group, mean, sum } from 'd3-array';
   import { scaleLinear, scaleLog, scaleThreshold, scaleTime } from 'd3-scale';
@@ -1188,7 +1189,7 @@
 <h2>Single stack with indicator</h2>
 
 <Preview>
-  <div class="h-[50px] p-4 border rounded-sm">
+  <div class="h-[68px] p-4 border rounded-sm">
     <BarChart
       data={[
         {
@@ -1236,6 +1237,7 @@
         'var(--color-red-500)',
       ]}
       bandPadding={0}
+      padding={{ top: 12, bottom: 12 }}
       orientation="horizontal"
       props={{
         tooltip: {
@@ -1254,14 +1256,14 @@
       {/snippet}
 
       {#snippet aboveMarks({ context })}
-        <Group x={context.xScale(26.5)} y={-4}>
-          {@const width = 12}
-          {@const height = 12}
-          <polygon
-            points="{-width / 2},0 0,{height} {width / 2},0"
-            class="fill-black stroke-white/50 dark:fill-white dark:stroke-black/50"
-          />
-        </Group>
+        <Polygon
+          cx={context.xScale(26.5)}
+          cy={-3}
+          r={6}
+          points={3}
+          rotate={90}
+          class="fill-black stroke-white dark:fill-white dark:stroke-black"
+        />
       {/snippet}
 
       {#snippet tooltip({ context })}
diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte
new file mode 100644
index 000000000..633b162d4
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Axis, Chart, Ellipse, Svg } from 'layerchart';
+  import Preview from '$lib/docs/Preview.svelte';
+</script>
+
+<h1>Examples</h1>
+
+<Preview>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
+      <Svg>
+        <Axis placement="bottom" rule />
+        <Axis placement="left" rule />
+        <Ellipse cx={100} cy={100} rx={20} ry={10} />
+        <Ellipse cx={200} cy={200} rx={20} ry={10} class="fill-primary" />
+        <Ellipse
+          cx={300}
+          cy={150}
+          rx={20}
+          ry={10}
+          class="stroke-2 stroke-primary fill-primary/10"
+        />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts
new file mode 100644
index 000000000..544a32480
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts
@@ -0,0 +1,14 @@
+import api from '$lib/components/Ellipse.svelte?raw&sveld';
+import source from '$lib/components/Ellipse.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: '`<ellipse>` element with tweened properties using `motionStore`',
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte
new file mode 100644
index 000000000..c750ba83d
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte
@@ -0,0 +1,327 @@
+<script lang="ts">
+  import { Chart, Layer, Polygon } from 'layerchart';
+  import { RangeField } from 'svelte-ux';
+  import Preview from 'layerchart/docs/Preview.svelte';
+
+  let points = $state(8);
+  let cornerRadius = $state(0);
+  let inset = $state(0);
+  let rotate = $state(0);
+  let scaleX = $state(1);
+  let scaleY = $state(1);
+  let skewX = $state(0);
+  let skewY = $state(0);
+  let tiltX = $state(0);
+  let tiltY = $state(0);
+
+  // Separate inset to allow playground to default to 0
+  let starInset = $state(0.7);
+
+  let renderContext = $state<'svg' | 'canvas'>('svg');
+</script>
+
+<h1>Playground</h1>
+
+<div class="grid grid-cols-xs gap-2 mb-2">
+  <RangeField label="points" bind:value={points} min={3} max={20} />
+  <RangeField label="inset" bind:value={inset} min={-1} max={1} step={0.1} format="decimal" />
+  <RangeField label="rotate" bind:value={rotate} max={360} />
+  <RangeField label="cornerRadius" bind:value={cornerRadius} max={50} />
+  <RangeField label="scaleX" bind:value={scaleX} min={-2} max={2} step={0.1} format="decimal" />
+  <RangeField label="scaleY" bind:value={scaleY} min={-2} max={2} step={0.1} format="decimal" />
+  <RangeField label="skewX" bind:value={skewX} min={-50} max={50} />
+  <RangeField label="skewY" bind:value={skewY} min={-50} max={50} />
+  <RangeField label="tiltX" bind:value={tiltX} min={-2} max={2} step={0.1} format="decimal" />
+  <RangeField label="tiltY" bind:value={tiltY} min={-2} max={2} step={0.1} format="decimal" />
+</div>
+
+<div class="h-[300px] p-4 border rounded-sm">
+  <Chart>
+    {#snippet children({ context })}
+      <Layer type={renderContext}>
+        <Polygon
+          cx={context.width / 2}
+          cy={context.height / 2}
+          r={100}
+          {points}
+          {inset}
+          {rotate}
+          {cornerRadius}
+          {scaleX}
+          {scaleY}
+          {skewX}
+          {skewY}
+          {tiltX}
+          {tiltY}
+        />
+      </Layer>
+    {/snippet}
+  </Chart>
+</div>
+
+<h1>Examples</h1>
+
+<div class="flex gap-2 mb-1/2">
+  <h2 class="grow">Simple</h2>
+  <RangeField label="rotate" labelPlacement="left" bind:value={rotate} max={360} />
+  <RangeField label="cornerRadius" labelPlacement="left" bind:value={cornerRadius} max={50} />
+</div>
+
+<div class="grid grid-cols-sm gap-3">
+  <div>
+    <h3>Triangle</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={3}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Square</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={4}
+                rotate={rotate + 45}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Diamond</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={4}
+                scaleX={0.5}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Rhombus</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={4}
+                skewX={-20}
+                rotate={rotate + 45}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Parallelogram</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={4}
+                skewX={-20}
+                scaleX={1.5}
+                rotate={rotate + 45}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Trapezoid</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={4}
+                tiltX={-1}
+                rotate={rotate + 45}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Pentagon</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={5}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Hexagon</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={6}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Octagon</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={8}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+
+  <div>
+    <h3>Octagon</h3>
+    <Preview>
+      <div class="h-[150px] p-4 border rounded-sm">
+        <Chart>
+          {#snippet children({ context })}
+            <Layer type={renderContext}>
+              <Polygon
+                cx={context.width / 2}
+                cy={context.height / 2}
+                r={60}
+                points={8}
+                {rotate}
+                {cornerRadius}
+              />
+            </Layer>
+          {/snippet}
+        </Chart>
+      </div>
+    </Preview>
+  </div>
+</div>
+
+<div class="flex gap-2 mb-1/2">
+  <h2 class="grow">Stars</h2>
+  <RangeField
+    label="inset"
+    labelPlacement="left"
+    bind:value={starInset}
+    min={-1}
+    max={1}
+    step={0.1}
+    format="decimal"
+  />
+  <RangeField label="rotate" labelPlacement="left" bind:value={rotate} max={360} />
+  <RangeField label="cornerRadius" labelPlacement="left" bind:value={cornerRadius} max={50} />
+</div>
+
+<div class="grid grid-cols-sm gap-3">
+  {#each [6, 8, 10, 12, 14, 16, 18, 20] as points}
+    <div>
+      <h3>{points} point</h3>
+      <Preview>
+        <div class="h-[150px] p-4 border rounded-sm">
+          <Chart>
+            <Layer type={renderContext}>
+              <Polygon cx={50} cy={50} r={50} {points} inset={starInset} {rotate} {cornerRadius} />
+            </Layer>
+          </Chart>
+        </div>
+      </Preview>
+    </div>
+  {/each}
+</div>
diff --git a/packages/layerchart/src/routes/docs/components/Polygon/+page.ts b/packages/layerchart/src/routes/docs/components/Polygon/+page.ts
new file mode 100644
index 000000000..7efff572c
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Polygon/+page.ts
@@ -0,0 +1,13 @@
+import api from '$lib/components/Polygon.svelte?raw&sveld';
+import source from '$lib/components/Polygon.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      api,
+      source,
+      pageSource,
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.svelte b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
index 89666e161..3300d5e69 100644
--- a/packages/layerchart/src/routes/docs/components/Text/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
@@ -29,9 +29,7 @@
   });
 </script>
 
-<h1>Examples</h1>
-
-<h2>Playground</h2>
+<h1>Playground</h1>
 
 <div class="grid gap-2 mb-2">
   <TextField label="value" bind:value={config.value} />