Home Animation Plugins [codepen] Gooey Text Background with SVG Filters

[codepen] Gooey Text Background with SVG Filters

Animation Plugins webcodeflow · July 16, 2022 · Comments off

Gooey text backgrounds with SVG filters are smooth, sticky, and rounded corners of your text background with SVG filters.

cool css heading styles, svg typing animation, svg text animation codepen, gooey effect, css text effects, text hover effects css

How to make use of it:

1. Wrap the text in a DIV container.

<div class="goo"> Add Here </div>

2. Create a gooey effect with SVG filters.

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
      <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
      </filter>
  </defs>
</svg>

3. CSS Styles Required.

.goo {
  font-size: 3rem;
  line-height: 1.35;
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0.5rem 1rem;
  -webkit-filter: url('#goo');
          filter: url('#goo');
}
.goo:focus {
  outline: 0;
}

rounded text background using svg filters Plugin/Codepen