Wobbly Text Effect Using Css & Svg

Here’s a tutorial on how to create a Wobbly Text Effect Using CSS & SVG. This effect adds a playful and dynamic visual element to your text, making it appear as if it’s slightly distorted or vibrating. This is achieved by combining CSS styling with SVG filters to manipulate the text’s appearance.

<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

Creating the HTML Structure

Add the following line into the head tag of your HTML document to normalize styles across browsers.

<h1>Exemplary</h1>
<svg>
  <filter id="scribble--0">
    <feturbulence basefrequency="0.02" numoctaves="3" result="noise" seed="0"></feturbulence>
    <fedisplacementmap id="displacement" in="SourceGraphic" in2="noise" scale="2"></fedisplacementmap>
  </filter>
  <filter id="scribble--1">
    <feturbulence basefrequency="0.02" numoctaves="3" result="noise" seed="1"></feturbulence>
    <fedisplacementmap in="SourceGraphic" in2="noise" scale="3"></fedisplacementmap>
  </filter>
  <filter id="scribble--2">
    <feturbulence basefrequency="0.02" numoctaves="3" result="noise" seed="2"></feturbulence>
    <fedisplacementmap in="SourceGraphic" in2="noise" scale="2"></fedisplacementmap>
  </filter>
  <filter id="scribble--3">
    <feturbulence basefrequency="0.02" numoctaves="3" result="noise" seed="3"></feturbulence>
    <fedisplacementmap in="SourceGraphic" in2="noise" scale="3"></fedisplacementmap>
  </filter>
  <filter id="scribble--4">
    <feturbulence basefrequency="0.02" numoctaves="3" result="noise" seed="4"></feturbulence>
    <fedisplacementmap in="SourceGraphic" in2="noise" scale="2"></fedisplacementmap>
  </filter>
</svg>

Styling with CSS

Use the following CSS styles to style the text and apply the wobbly effect. This CSS includes font settings, background, and the animation that cycles through the SVG filters.

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Geist Sans", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0 0% 6%);
}

h1 {
  font-weight: 140;
  letter-spacing: -0.05ch;
  font-size: clamp(2rem, 6vw + 1rem, 8rem);
  background: linear-gradient(black, hsl(0 0% 50%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px hsl(0 0% 90%);
  margin: 0;
  line-height: 1;
}

svg {
  display: none;
}

@media(prefers-reduced-motion: no-preference) {
  h1 {
    -webkit-animation: scribble infinite 0.2s;
            animation: scribble infinite 0.2s;
  }
}

@-webkit-keyframes scribble {
  0% {
    filter: url("#scribble--0");
  }
  25% {
    filter: url("#scribble--1");
  }
  50% {
    filter: url("#scribble--2");
  }
  75% {
    filter: url("#scribble--3");
  }
  100% {
    filter: url("#scribble--4");
  }
}

@keyframes scribble {
  0% {
    filter: url("#scribble--0");
  }
  25% {
    filter: url("#scribble--1");
  }
  50% {
    filter: url("#scribble--2");
  }
  75% {
    filter: url("#scribble--3");
  }
  100% {
    filter: url("#scribble--4");
  }
}

You have successfully created a Wobbly Text Effect Using CSS & SVG! Experiment with different filter values and animation speeds to customize the effect to your liking.