1 664 Codepen

SVG filter — текст в виде мозгов

SVG фильтр добавляющий тексту начертание похожее на мозги (feColorMatrix, feTurbulence, feGaussianBlur, feSpecularLighting)


HTML

<svg>
    <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="5 5" in="SourceGraphic" edgeMode="none" result="blur"/>
    <feTurbulence type="turbulence" baseFrequency="0.04 0.04" numOctaves="2" seed="2" stitchTiles="stitch" result="turbulence"/>
    <feComposite in="turbulence" in2="blur" operator="in" result="composite"/>
    <feColorMatrix type="matrix" 
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 40 -4" 
      in="composite" result="colormatrix"/>
    <feSpecularLighting surfaceScale="40" specularConstant="1" specularExponent="35" kernelUnitLength="10 10" lighting-color="#fff" in="turbulence" result="specularLighting">
      <feDistantLight azimuth="68" elevation="240"/>
    </feSpecularLighting>
    <feFlood flood-color="hsl(350,100%,73%)
" flood-opacity="1" result="flood"/>
    <feComposite in="flood" in2="colormatrix" operator="in" result="composite2"/>
    <feComposite in="specularLighting" in2="colormatrix" operator="in" result="composite1"/>
    <feMerge result="merge1">
        <feMergeNode in="composite2"/>
       <feMergeNode in="composite1"/>
    </feMerge>
  </filter>
</svg>

<div class="text" contenteditable spellcheck="false">МОЗГ</div>

SCSS

HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #000;
  font: 28vw/1 Arial Black, sans-serif;
  text-align: center;
  color: hotpink;
}

.text {
  // white-space: nowrap;
  filter: url(#filter);
  outline: none;
  
  &::selection {
    background: rgba(0,0,0,.15);
  }
}

svg {
  position: absolute;
  width: 0;
  height: 0;
}

Комментарии

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

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