Wobbly Text Effect Using CSS & SVG

This code creates a wobbly text effect using CSS and SVG. It applies filters to text elements. The purpose is to enhance visual appeal.

You can use this code on websites to add dynamic text effects. It enhances user engagement and visual interest. Perfect for landing pages or headers to grab attention.

How to Create Wobbly Text Effect Using CSS & SVG

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create an HTML structure containing the text you want to apply the effect to and an SVG element for filters:

<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>

3. In your CSS file, define the styles for the text and SVG element. You can customize the font, size, and animation properties:

@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;

}

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");
  }
}

Customize the animation by modifying the keyframes for the scribble animation in your CSS file. Apply filters to the text using SVG <filter> elements. Adjust parameters like basefrequency, numoctaves, and scale for desired effects.

Preview your webpage to see the wobbly text effect in action. Adjust CSS and SVG filters as needed for desired appearance.

That’s all! hopefully, you have successfully created a Wobbly Text Effect on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.