Question

我一直试图创建一种特殊的随机模式。例如随机黑点，如下所示：

https://picload.org/thumbnail/riogwpll/pattern2.jpg

但是，我需要一个大得多的图像，大约有100,000个点/圆圈。原则上，没有问题，然而，具有几个MB的SVG变得太大而无法打开它，例如，使用Inkscape，因为每个圆圈是单独绘制的。任何想法如何更好地实现更小的文件。我已经尝试了一些模式。问题是它应该是一个真正随机的，不重复的模式。

没有必要用点做它也可能看起来像这样： [在此处输入图像说明] [1] https://picload.org/thumbnail/riogwwdr/pattern1.jpg

对于想法/建议，我很感激。

Answer 1

你是追求这样的吗？

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
  <defs>
    <filter id="dots" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
      <feTurbulence baseFrequency=".1" numOctaves="1" seed="42" />
      <feColorMatrix type="saturate" values="0"/>
      <feGaussianBlur result="blur" stdDeviation="2" />
       <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 1 1 1 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect x="0" y="0" width="600" height="600" style="fill:#888; stroke:#bbd; stroke-width:2px; filter: url(#dots)" />
</svg>

＆＃13;

这是如何运作的：

<feTurbulence baseFrequency=".1" numOctaves="1" seed="42" />会产生一些随机噪音。如果您希望每次都使用不同的模式，请删除seed属性。
<feColorMatrix type="saturate" values="0"/>将噪音转换为灰度。
<feGaussianBlur result="blur" stdDeviation="2" />模糊了噪音模式，使点合并在一起。尝试使用此值来改变＆＃34; blobbiness＆＃34;。
<feComponentTransfer>将灰度值阈值设置为黑色或白色。

生成具有非重复随机模式的图像

1 个答案: