Cloudy SVG-filter

cloudy-svg-filter.markdown

Cloudy SVG-filter

Filter was made in https://yoksel.github.io/svg-filters/

A Pen by yoksel on CodePen.

License.

index.html

<svg>
  <filter id="filter">
    <feTurbulence id="feTurbulence" 
      type="turbulence" 
      baseFrequency="0.005" 
      numOctaves="2" 
      result="turbulence"/>
    <feFlood 
      flood-color="white" 
      result="flood"
    />
    <feComposite 
      in="flood" 
      in2="turbulence" 
      operator="in" 
      result="composite2"/>
    <feComposite 
      in="composite2" 
      in2="SourceAlpha" 
      operator="in" 
      result="composite3"/>
  </filter>
</svg>

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

style.scss

HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: steelblue linear-gradient(
    to right bottom,
    skyblue, steelblue, 
    teal, lightseagreen);
  font: 20vw/1 Arial Black, sans-serif;
  text-align: center;
}

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

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