-1

How could I create a seamlessly tileable noise in SVG, with the feTurbulence filter or a combination of filters?

I'd like a similar result as with the Gimp's Filters/Render/Noise/Solild Noise....

Here from Gimp: enter image description here

Léa Gris
  • 17,497
  • 4
  • 32
  • 41
  • 1
    feTurbulence has an attribute stitchTiles - just use stitchTiles="stitch" and it will make tileable noise. – Michael Mullany May 27 '20 at 21:35
  • @MichaelMullany do you know a way to have this `stitchTiles="stitch"` attribute handled within InkScape without poking at low-level editing the SVG tree? – Léa Gris May 27 '20 at 21:39
  • Found this reference in InkScape Bugs: [UI for setting stitchTiles attribute (feTurbulence) missing in the filters editor](https://bugs.launchpad.net/inkscape/+bug/1490123) Target for 0.93, unfortunately still not available AFAIK. – Léa Gris May 27 '20 at 21:50
  • 1
    The filter editor in Inkscape is confusing AF - my recommendation is to learn how to hand-write filters. They're not super hard to learn. – Michael Mullany May 28 '20 at 01:20
  • I don't fully understand the close vote reason. This is my first question about SVG. Could any of you explain the close vote reason and or give me some recommendations? SuperUser lists 0 related topics. And my question is about "programming" with SVG XML markup. – Léa Gris May 28 '20 at 01:34
  • 3
    Your question seems to be about how to use Inkscape rather than how to write markup. It actually does need to be about "poking at low-level editing the SVG tree" to be on-topic here. – Robert Longson May 28 '20 at 05:38
  • As my question continue to raise more negative ranking. I'd really appreciate if someone could take the time to guide me how I could/should have asked about this more appropriately. I just feel like I did something wrong but can't really figure what exactly. – Léa Gris Nov 13 '20 at 02:02

1 Answers1

1

As Michael Mullany commented: it can be done with the stitchTiles="stitch" attribute.

About handling this attribute with Inkscape, I found this reference in InkScape Bugs: UI for setting stitchTiles attribute (feTurbulence) missing in the filters editor. Unfortunately, the feature is to be implemented with InkScape v0.93, (still not available AFAIK)

Here is a sample of a seamlessly tiling SVG feTurbulence with a stitchTiles="stitch" attribute:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" height="512" width="512">
  <defs>
    <filter x="0" y="0" width="100%" height="100%" id="myStichedNoise" style="color-interpolation-filters:sRGB;">
      <feTurbulence type="fractalNoise" stitchTiles="stitch" numOctaves="4" baseFrequency="0.0125"/>
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" />
    </filter>
    <pattern id="myPattern" width="33.33333%" height="33.33333%">
      <rect width="33.33333%" height="33.33333%" style="color:#000000;filter:url(#myStichedNoise)"/>
    </pattern>
  </defs>
  <rect fill="url(#myPattern)" width="100%" height="100%"/>
</svg>
Léa Gris
  • 17,497
  • 4
  • 32
  • 41