From f6261205d4537a371d396f0748e767eccae1a44b Mon Sep 17 00:00:00 2001
From: Hermet Park <hermet@lottiefiles.com>
Date: Fri, 13 Oct 2023 11:06:38 +0900
Subject: [PATCH] examples: add svg samples.

---
 src/examples/images/masking.svg          | 25 ++++++++++++++++++++++++
 src/examples/images/multipath+matrix.svg | 19 ++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/examples/images/masking.svg
 create mode 100644 src/examples/images/multipath+matrix.svg

diff --git a/src/examples/images/masking.svg b/src/examples/images/masking.svg
new file mode 100644
index 00000000..910a4481
--- /dev/null
+++ b/src/examples/images/masking.svg
@@ -0,0 +1,25 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <mask id="myMask1" maskContentUnits="userSpaceOnUse">
+    <rect fill="black" x="0" y="0" width="100%" height="100%" />
+    <circle fill="white" cx="50" cy="50" r="35" />
+  </mask>
+
+  <mask id="myMask2" maskContentUnits="objectBoundingBox">
+    <rect fill="black" x="0" y="0" width="100%" height="100%" />
+    <circle fill="white" cx=".5" cy=".5" r=".35" />
+  </mask>
+
+  <!-- Some reference rect to materialized the mask -->
+  <rect id="r1" x="0" y="0" width="45" height="45" />
+  <rect id="r2" x="0" y="55" width="45" height="45" />
+  <rect id="r3" x="55" y="55" width="45" height="45" />
+  <rect id="r4" x="55" y="0" width="45" height="45" />
+
+  <!-- The first 3 rect are masked with useSpaceOnUse units -->
+  <use mask="url(#myMask1)" href="#r1" fill="red" />
+  <use mask="url(#myMask1)" href="#r2" fill="green" />
+  <use mask="url(#myMask1)" href="#r3" fill="blue" />
+
+  <!-- The last rect is masked with objectBoundingBox units -->
+  <use mask="url(#myMask2)" href="#r4" fill="magenta" />
+</svg>
\ No newline at end of file
diff --git a/src/examples/images/multipath+matrix.svg b/src/examples/images/multipath+matrix.svg
new file mode 100644
index 00000000..cc0ffa8d
--- /dev/null
+++ b/src/examples/images/multipath+matrix.svg
@@ -0,0 +1,19 @@
+<svg width="160" height="80" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
+	<mask id="a">
+		<path d="m0 0h16v10a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2 2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h-10z"
+			fill="#fff"/>
+	</mask>
+	<path d="m30.807 22.736a2.8006 2.8006 0 0 0-2.8006 2.8006v2.8006h5.6013v5.6013h2.8006a2.8006 2.8006 0 0 0 2.8006-2.8006v-5.6013a2.8006 2.8006 0 0 0-2.8006-2.8006zm2.8006 11.203h-5.6013v-5.6013h-2.8006a2.8006 2.8006 0 0 0-2.8006 2.8006v5.6013a2.8006 2.8006 0 0 0 2.8006 2.8006h5.6013a2.8006 2.8006 0 0 0 2.8006-2.8006z"
+		fill="#5fb2ff" stroke-width="2.8007"/>
+	<path transform="matrix(2.8006 0 0 2.8006 -2.8006 -2.47)" d="m8 2 6 3v6l-6 3-6-3v-6zm0 12v-6l6-3m-6 3-6-3"
+		fill="none" mask="url(#a)" stroke="#fc7f7f" stroke-width="2"/>
+
+	<mask id="b">
+		<path d="m0 0h16v10a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2 2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h-10z"
+			fill="#fff"/>
+	</mask>
+	<path d="m71.533 22.983a2.8006 2.8006 0 0 0-2.8006 2.8006v2.8006h5.6013v5.6013h2.8006a2.8006 2.8006 0 0 0 2.8006-2.8006v-5.6013a2.8006 2.8006 0 0 0-2.8006-2.8006zm2.8006 11.203h-5.6013v-5.6013h-2.8006a2.8006 2.8006 0 0 0-2.8006 2.8006v5.6013a2.8006 2.8006 0 0 0 2.8006 2.8006h5.6013a2.8006 2.8006 0 0 0 2.8006-2.8006z"
+		fill="#5fb2ff" stroke-width="2.8007"/>
+	<path transform="matrix(2.8006 0 0 2.8006 37.925 -2.2222)" d="m4 6a4 4 0 0 1 8 0v4a4 4 0 0 1-8 0zm0 1.25a4 1.6 0 0 0 8 0m-4-5v12"
+		fill="none" mask="url(#b)" stroke="#fc7f7f" stroke-width="2"/>
+</svg>
\ No newline at end of file