Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

SVG Animation With Text Tutorial | HTML CSS

Started by -  |  Views: 31 | Comments: 0   

Today we are going to create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.

We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.

Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie.

Try to get creative and apply the path animations to different kinds of texts, shapes,etc.

User Feedback

  • Similar Content

    • By ©Jimi Wikman
      Top 10 Stunning CSS 3 Effects For Navigation Bar.
    • By ©Jimi Wikman
      Hey all! Today, we're going to take a close look at the CSS clip-path property. Specifically, we'll take a look at 3 different examples of how to use clip-path to create a micro interaction that reveals a card of information.
    • By ©Jimi Wikman
      Today, we're going to check out how to create a custom SVG checkbox that animates on click. We'll use Chromevox to ensure it's accessible as well. First, we'll hop into Adobe Illustrator (although, you can use any vector-capable software) to design the icon, then we'll define the HTML and CSS. There's a tiny bit of JavaScript as well, to toggle and reverse the animation.
    • By ©Jimi Wikman
      -- Today, we're stepping back into the world of CSS sequence animations, except this time, we're not using any libraries or any JavaScript at all. This tutorial was inspired by the following tutorial: https://cloudfour.com/thinks/staggered-animations-with-css-custom-properties (Thanks Paul Hebert!)
      Here's the codepen demo:
    • By ©Jimi Wikman
      Today, we're going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it's an approach to defining and structuring your CSS. When you're dealing with medium to large size projects, it helps you develop a maintainable code base and one that doesn't run into issues with specificity. While this is a beginner's level tutorial, we will be jumping into more intermediate and advanced tutorials later on down the road.
      Codepen demo for this tutorial:
  • Create New...