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

Question

一段时间以来，我一直在尝试创建一种特殊的随机模式。例如随机的黑点，像这样：

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

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

没有必要用点来做这件事，它也可以是这样的：[在此处输入图像描述][1] https://picload.org/thumbnail/riogwwdr/pattern1.jpg

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

Answer 1

你追求的是这样的东西吗？

<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>

这是如何工作的：

1. <feTurbulence baseFrequency=".1" numOctaves="1" seed="42" />产生一些随机噪声。seed如果您每次都想要不同的模式，请删除该属性。
2. <feColorMatrix type="saturate" values="0"/> 将噪声转换为灰度。
3. <feGaussianBlur result="blur" stdDeviation="2" />模糊噪声图案，使点稍微融合在一起。尝试使用此值来改变“斑点”。
4. <feComponentTransfer> 将灰度值阈值设置为黑色或白色。