Как сделать фильтр разброса svg?

Я пытаюсь превратить точные формы в серию разбросанных точек, которые имеют более высокую плотность в середине исходного изображения.

Пример: белый круг на черном фоне → Мессье 92 (извините, у меня недостаточно репутации, чтобы встроить изображение)

Следовательно, форма, отличная от круга, должна быть узнаваемой. Вот лучшее, что мне удалось сделать:

Я бы назвал такой эффект фильтром разбросать. Скажите, пожалуйста, есть ли у вас имя получше.

<svg height='100' width='100'>
  <filter id="cluster" filterUnits="userSpaceOnUse">
    <feGaussianBlur in="SourceGraphic" result='blurred' stdDeviation="10" />
    <feTurbulence type="turbulence" baseFrequency="9" numOctaves="4" result="turbulence" /> 
    <feDisplacementMap in2="turbulence" in="blurred" scale="10" xChannelSelector="R" yChannelSelector="G"  />
  </filter>
  <rect x='0' y='0' height='100' width='100' fill='black' />
  <circle cx='50' cy='50' fill='white' r='30' filter='url(#cluster)' />
</svg>

По сути, это причудливое размытие. Результаты выглядят лучше с увеличением scale в feDisplacementMap.

<svg height='100' width='100'>
  <filter id="cluster" filterUnits="userSpaceOnUse">
    <feGaussianBlur in="SourceGraphic" result='blurred' stdDeviation="10" />
    <feTurbulence type="turbulence" baseFrequency="9" numOctaves="4" result="turbulence" /> 
    <feDisplacementMap in2="turbulence" in="blurred" scale="50" xChannelSelector="R" yChannelSelector="G"  />
  </filter>
  <rect x='0' y='0' height='100' width='100' fill='black' />
  <circle cx='50' cy='50' fill='white' r='30' filter='url(#cluster)' />
</svg>

Но это также смещает образ. Могу я отменить это? Или вообще не делать этого? Может быть, используя что-нибудь кроме feDisplacementMap?

Вы не говорите, в чем проблема. Вы не можете найти правильные параметры FeTurbulence для получения разумного разброса?

Paul LeBeau 31.10.2018 13:56
1
1
144
1

Ответы 1

Основная проблема с вашим фильтром - его очень высокая baseFrequency - вам нужно набирать этот waaay вниз. А фрактальный шум лучше, чем турбулентность, как тип feTurbulence для фильтра рассеяния. Пока ваша карта смещения центрируется на 0,5 канала, ваше изображение в среднем не должно смещаться по x / y. Это проблема только в том случае, если у вас есть яркая или темная карта смещения (чего нельзя сказать о feTurbulence). Наконец, более высокая шкала смещения придаст вам заостренный вид, который вы ищете - вот так.

Чтобы получить именно тот вид, который вам нужен, может потребоваться масса проб и ошибок. Это ссылка на редактор фильтров для теней, который может дать вам некоторые идеи https://codepen.io/mullany/pen/sJopz

<svg height="220px" width="260px" viewBox="0 0 800 600">
  <defs>
    <filter id="scatter">
      <feTurbulence baseFrequency=".2" type="fractalNoise" numOctaves="3"/>
      <feDisplacementMap in="SourceGraphic" xChannelSelector="G" yChannelSelector="B" scale="300"/>
      <feComposite operator="in" in2="finalMask"/>
    </filter>
    </defs>
  
  <g filter="url(#scatter)">
  <polyline points="10,10  10,300, 300,400" transform="translate(60 60)" fill="blue"/>
  
  <polyline points="500,10  110,300, 300,400" transform="translate(260 60)" fill="red"/>
  </g>
</svg>

Другие вопросы по теме