Add anchor point sample

Author: whitphx

slides.md

@@ -110,6 +110,56 @@ mdc: true
 
 ---
 
+# Anchor point
+
+<div absolute left="50%" top="50%" translate-x="-50%" translate-y="-50%" w-100 h-30 border="~ gray/50 rounded-lg" id="anchor-example">
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="50%" top="50%" translate-x="-50%" translate-y="-50%">center</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="0" top="0">
+    topleft
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="50%" top="0" translate-x="-50%">
+    top
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute right="0" top="0">
+    topright
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="0" top="50%" translate-y="-50%">
+    left
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute right="0" top="50%" translate-y="-50%">
+    right
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="0" bottom="0">
+    bottomleft
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute left="50%" bottom="0" translate-x="-50%">
+    bottom
+</code>
+
+<code bg-gray:10 p-1 min-w-25 text-center rounded-md absolute right="0" bottom="0">
+    bottomright
+</code>
+
+</div>
+
+<FancyArrow x1="0" y1="0" id2="anchor-example" pos2="topleft" color="red" width="4" roughness="3" arc="-0.4" seed="1" />
+
+Use `pos1` and `pos2` to specify the anchor point on the snapped elements.
+
+```html
+<FancyArrow x1="0" y1="0" id2="anchor-example" pos2="topleft" color="red" width="4" roughness="3" arc="-0.4" seed="1" />
+```
+
+---
+
 # Appearance
 
 <div grid="~ cols-3 gap-4" mt-6>