New Pages: SVGFEGaussianBlurElement

files/en-us/web/api/svgfegaussianblurelement/in1/index.md

@@ -0,0 +1,78 @@
+---
+title: "SVGFEGaussianBlurElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEGaussianBlurElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEGaussianBlurElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feGaussianBlur")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feGaussianBlur")}} elements are defined in a filter, each with a different `in` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="gaussian-blur-filter">
+      <!-- Gaussian blur applied to the SourceGraphic -->
+      <feGaussianBlur
+        in="SourceGraphic"
+        stdDeviation="5"
+        result="blurred-source" />
+      <!-- Gaussian blur applied to the BackgroundImage -->
+      <feGaussianBlur
+        in="BackgroundImage"
+        stdDeviation="10"
+        result="blurred-background" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with SourceGraphic blur effect -->
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:rebeccapurple;"
+    filter="url(#gaussian-blur-filter)" />
+
+  <!-- Circle with BackgroundImage blur effect -->
+  <circle
+    cx="150"
+    cy="100"
+    r="50"
+    style="fill:hotpink;"
+    filter="url(#gaussian-blur-filter)" />
+</svg>
+```
+
+We can access the `in` attribute:
+
+```js
+// Get all feGaussianBlur elements
+const gaussianBlurs = document.querySelectorAll("feGaussianBlur");
+
+// Access the 'in' attribute values
+console.log(gaussianBlurs[0].in1.baseVal); // Output: "SourceGraphic"
+console.log(gaussianBlurs[1].in1.baseVal); // Output: "BackgroundImage"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}

files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md

@@ -0,0 +1,80 @@
+---
+title: "SVGFEGaussianBlurElement: setStdDeviation() method"
+short-title: setStdDeviation()
+slug: Web/API/SVGFEGaussianBlurElement/setStdDeviation
+page-type: web-api-instance-method
+browser-compat: api.SVGFEGaussianBlurElement.setStdDeviation
+---
+
+{{APIRef("SVG")}}
+
+The `setStdDeviation()` method of the {{domxref("SVGFEGaussianBlurElement")}} interface sets the values for the {{SVGAttr("stdDeviation")}} attribute.
+
+## Syntax
+
+```js-nolint
+SVGFEGaussianBlurElement.setStdDeviation(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : A float representing X component of the {{SVGAttr("stdDeviation")}} attribute.
+- `y`
+  - : A float representing Y component of the {{SVGAttr("stdDeviation")}} attribute.
+
+### Return value
+
+None ({{jsxref('undefined')}}).
+
+## Examples
+
+### Using `setStdDeviation()`
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="gaussian-blur-filter">
+      <feGaussianBlur
+        in="SourceGraphic"
+        stdDeviation="5 5"
+        result="blurred-graphic" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with an initial blur effect -->
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:hotpink;"
+    filter="url(#gaussian-blur-filter)" />
+</svg>
+
+<!-- Button to update the blur -->
+<button id="updateBlur">Update Blur</button>
+```
+
+```js
+// Get the feGaussianBlur element
+const gaussianBlur = document.querySelector("feGaussianBlur");
+
+// Button to trigger the update
+document.getElementById("updateBlur").addEventListener("click", () => {
+  // Change the standard deviation (blur radius) of the blur effect
+  gaussianBlur.setStdDeviation(15, 20); // Update to X: 15, Y: 20
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedLength")}}

files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md

@@ -0,0 +1,62 @@
+---
+title: "SVGFEGaussianBlurElement: stdDeviationX property"
+short-title: stdDeviationX
+slug: Web/API/SVGFEGaussianBlurElement/stdDeviationX
+page-type: web-api-instance-property
+browser-compat: api.SVGFEGaussianBlurElement.stdDeviationX
+---
+
+{{APIRef("SVG")}}
+
+The **`stdDeviationX`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) X component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `stdDeviationX` attribute
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="gaussian-blur-filter">
+      <!-- Apply Gaussian Blur with stdDeviationX set to 5 and stdDeviationY set to 10 -->
+      <feGaussianBlur
+        in="SourceGraphic"
+        stdDeviation="5 10"
+        result="blurred-graphic" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with a Gaussian blur effect -->
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:hotpink;"
+    filter="url(#gaussian-blur-filter)" />
+</svg>
+```
+
+```js
+// Select the feGaussianBlur element
+const gaussianBlur = document.querySelector("feGaussianBlur");
+
+// Access the stdDeviationX value
+console.log(gaussianBlur.stdDeviationX.baseVal); // Output: 5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md

@@ -0,0 +1,62 @@
+---
+title: "SVGFEGaussianBlurElement: stdDeviationY property"
+short-title: stdDeviationY
+slug: Web/API/SVGFEGaussianBlurElement/stdDeviationY
+page-type: web-api-instance-property
+browser-compat: api.SVGFEGaussianBlurElement.stdDeviationY
+---
+
+{{APIRef("SVG")}}
+
+The **`stdDeviationY`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `stdDeviationY` attribute
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="gaussian-blur-filter">
+      <!-- Apply Gaussian Blur with stdDeviationY set to 5 and stdDeviationY set to 10 -->
+      <feGaussianBlur
+        in="SourceGraphic"
+        stdDeviation="5 10"
+        result="blurred-graphic" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with a Gaussian blur effect -->
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:hotpink;"
+    filter="url(#gaussian-blur-filter)" />
+</svg>
+```
+
+```js
+// Select the feGaussianBlur element
+const gaussianBlur = document.querySelector("feGaussianBlur");
+
+// Access the stdDeviationY value
+console.log(gaussianBlur.stdDeviationY.baseVal); // Output: 10
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}