我尝试用SVG回复图片中的效果。除了我手动绘制路径以外,您对我如何获得它有任何提示。
基本上,我正在考虑绘制或创建垂直直线的图案,然后对其施加效果。结果不必等于所提供的结果的100%,而是类似的。
您最好不用绘制线条就能做到的是使用feDisplacementMap过滤器使它们变形-但结果甚至与您希望的结果也不尽相同,因为过滤器可在位图中使用。
<svg width="800px" height="600px" color-interpolation-filters="sRGB">
<defs>
<pattern id="diagonal" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0 0 l 10 10"
stroke="black" stroke-width="1"/>
</pattern>
<filter id="distort">
<feTurbulence baseFrequency = "0.015" type="fractalNoise" />
<feDisplacementMap in='SourceGraphic' xChannelSelector="R" yChannelSelector="G" scale="60"/>
<feGaussianBlur stdDeviation="1"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .1 .5 1 1 1 1 1 1 1 1 1 1"/>
<feComponentTransfer>
</filter>
</defs>
<g filter="url(#distort)">
<rect x="10" y="10" width="300" height="300" fill="url(#diagonal)"/>
</g>
</svg>