diff --git a/docs/src/content/components/Layer.md b/docs/src/content/components/Layer.md
index 345ee94a2..ccd4c3fd6 100644
--- a/docs/src/content/components/Layer.md
+++ b/docs/src/content/components/Layer.md
@@ -5,6 +5,6 @@ layers: [svg, canvas, html]
 related: [Canvas, Html, Svg]
 ---
 
-## Usage
+## Usage with all 3 layer types
 
-> TODO: Show all 3 Layer types being used together
+:example{name="all-3-layers" showCode }
diff --git a/docs/src/examples/components/Layer/all-3-layers.svelte b/docs/src/examples/components/Layer/all-3-layers.svelte
new file mode 100644
index 000000000..38accf5fe
--- /dev/null
+++ b/docs/src/examples/components/Layer/all-3-layers.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Chart, Layer, Circle, Arc } from 'layerchart';
+</script>
+
+<Chart height={200}>
+	<Layer center type="canvas">
+		<Circle fill="#F2D707" r={100} />
+	</Layer>
+	<Layer center type="svg">
+		<Circle fill="black" r={15} cx={-30} cy={-30} />
+		<Arc
+			value={100}
+			range={[-260, -100]}
+			cornerRadius={25}
+			innerRadius={50}
+			outerRadius={65}
+			fill="black"
+		/>
+	</Layer>
+	<Layer center type="html">
+		<Circle id="left-eye" fill="black" r={15} cx={30} cy={-30} />
+	</Layer>
+</Chart>
+
+<style>
+	:global(#left-eye) {
+		transform-origin: center;
+		animation: wink 3.5s infinite ease-in-out;
+	}
+
+	@keyframes wink {
+		/* eye open */
+		0%,
+		68%,
+		100% {
+			transform: translate(-50%, -50%) scaleY(1);
+		}
+
+		/* eye closed (holds for 0.5s) */
+		72%,
+		92% {
+			transform: translate(-50%, -50%) scaleY(0.1);
+		}
+	}
+</style>