1 707 Codepen

SVG filter — текст с текстурой зебры

SVG фильтр придающий тексту эффект текстуры в стиле зебра.


HTML

<svg>
  <filter id="filter">
    <feTurbulence type="turbulence" baseFrequency="0.03 0.01" numOctaves="2" seed="4" stitchTiles="stitch" result="turbulence"/>
      <feColorMatrix type="matrix" 
     values="1 0 0 0 0
             0 1 0 0 0
             0 0 1 0 0
             0 0 0 500 -100" 
   in="turbulence" result="colormatrix"/>
    <feFlood flood-color="#FFF" flood-opacity="1" result="flood"/>
    <feComposite in="flood" in2="colormatrix" operator="in" result="composite"/>
    <feComposite in="composite" in2="SourceAlpha" operator="in" result="composite1"/>
</filter>
</svg>

<div class="text" contenteditable>Vector</div>

CSS

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи