SVG Animation Example

READ ORIGINAL POST: How to Animate SVG with CSS & JS

SVG Typography Animation

Let's bring your SVG images to life. In this tutorial, I'll show you how to animate them using CSS and JavaScript. We'll cover the basics of CSS animations, animating SVG elements, and even triggering them with scrolling or a simple click. Check out the demo above to see it in action - you can trigger the animation by scrolling, clicking, or hitting play for a continuous loop.

Create an SVG Image for the Animation

To get started with SVG animation, we need an SVG image. You can create one using Inkscape, Adobe Illustrator, or latest Photoshop versions. Here are your options:

• Draw a vector image from scratch
• Convert a photo or image to SVG (check out this tutorial on how to convert an image to vector using Photoshop)
• Use a vector image generator

We'll use the free online text in shape generator from MockoFun. It's easy to create a cool typography SVG design.

Download the SVG version

Download the SVG version

Download the SVG version

We've got our SVG image, so let's move on to animating it!

Animating SVG with CSS

To animate an SVG with CSS, you need to use it as an inline SVG in your HTML page. This means copying the SVG definition from a text editor and pasting it into your HTML.

When you open the SVG, you'll see groups (<g/> tags) and paths (<path/> tags). We'll focus on the paths, as that's what we'll animate.

CSS for SVG works similarly to HTML, but with different properties. Check out this intro to CSS for SVG.

SVG Color Animation

We'll animate the colors of the two <path/> elements in our SVG: the background shape and the text inside the shape. We'll use CSS hsl() values, which make it easy to work with colors.

To change the colors, we'll only modify the hue, keeping the saturation and lightness the same. This will create a harmonious color scheme.

Here's the code:

const SATURATION = '100%';
const LIGHTNESS = '50%';

currentHue = (newHue % 360 + 360) % 360;
const shapeHue = (180 + currentHue)%360;
const dynamicColor = `hsl(${currentHue}, ${SATURATION}, ${LIGHTNESS})`;
const shapeColor = `hsl(${shapeHue}, ${SATURATION}, ${LIGHTNESS})`

svgTexts.forEach(el => {
  el.style.fill = dynamicColor;
});
svgShapes.forEach(el => {
  el.style.fill = shapeColor;
});

Triggering the Animation

We'll use three ways to trigger the animation:

1. PLAY/PAUSE button: Starts or pauses the color cycle.
2. Mouse hold: Changes the color while the mouse button is held down.
3. Mouse scroll wheel: Changes the color when scrolling.

Let's break it down:

• PLAY/PAUSE button: Uses a timer to trigger a color change every 100ms.

document.getElementById("playPauseCheckbox").addEventListener('change', event => {
  // ...
});

• Mouse hold: Uses setInterval() to change the color while the mouse button is held down.

function handleMouseDown(event){
  // ...
}
function handleMouseUp(event){
  // ...
}

• Mouse scroll wheel: Changes the color when scrolling. We'll increment the hue by 15° each time we scroll down or decrease the hue when scrolling up.

window.addEventListener('wheel', handleWheel, { passive: true });
// ...
function handleWheel(event) {
  // ...
}

That's it! You now know how to create a SVG text in shape design and animate it with CSS and JS.

In Conclusion

So there it is: you now know how to create a SVG text in shape design and use CSS and JS to animate it. This is a pretty cool web design trick that you can easily integrate in your website. Drop me a comment if you have any questions.