From a93ba23e1008eea02b0ca66dcc50f3f4d75f1bfa Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Sun, 20 Aug 2023 15:47:01 +0100
Subject: [PATCH] Base: Add some examples of SVG gradients with different
 spreadMethods

The radial gradients here are rendered correctly as focal radius is
zero, so the focal point is the center of the start circle.
---
 Base/res/html/misc/svg-gradients.html | 72 +++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/Base/res/html/misc/svg-gradients.html b/Base/res/html/misc/svg-gradients.html
index 2eaa9b1357..ddc0019621 100644
--- a/Base/res/html/misc/svg-gradients.html
+++ b/Base/res/html/misc/svg-gradients.html
@@ -48,6 +48,78 @@
   <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
 </svg>
 <br>
+<b>MDN spreadMethod example:</b><br/>
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient
+      id="GradientPad"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="pad">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientRepeat"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="repeat">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient
+      id="GradientReflect"
+      cx="0.5"
+      cy="0.5"
+      r="0.4"
+      fx="0.75"
+      fy="0.75"
+      spreadMethod="reflect">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+  </defs>
+  <rect
+    x="10"
+    y="10"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientPad)" />
+  <rect
+    x="10"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientRepeat)" />
+  <rect
+    x="120"
+    y="120"
+    rx="15"
+    ry="15"
+    width="100"
+    height="100"
+    fill="url(#GradientReflect)" />
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
+    Pad
+  </text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Repeat
+  </text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
+    Reflect
+  </text>
+</svg>
+<br>
 <br>
 <b>Simple radialGradient gradientUnits=objectBoundingBox</b><br>
 <svg height="150" width="500">