My Introduction to CSS Animations: Using Inkscape to Create Text Animation

I awoke one December morning with a single thought in my head: "I want to create a handwriting animation." It was a consuming idea and I quickly got out of bed, made some coffee --a mandatory obligation as a self-proclaimed coffee enthusiast (if that's even a thing?)-- and settled in front of my laptop with the same thought in my head: "I want to create a handwriting animation."

I had generated my ideal early morning working environment and as I put my hands to the keyboard it hit me; I had no idea what I was doing.

From Dense Fog to Slightly Less Dense Fog

If there is one thing I've had to radically accept as a developer, it's the feeling of not knowing how to do something. Luckily, we live in a time where nearly all of the world's information is available via teh interwebz.

The first few hours of that morning were spent searching terms like:

• How to make a handwriting animation CSS
• CSS animation
• SVG
• How to create SVG
• Online SVG maker
• Adobe Illustrator
• Adobe Illustrator free
• Illustrator alternatives
• How to use Inkscape

That's a little snippet into my thought process and path toward learning that I would first need to draw up my own "handwritten" text so that I can then bring it to life with CSS.

Inkscape

Inkscape is a free and open-source vector graphics editor used to create vector images. Upon researching a bit more about Inkscape and how it stands up to Illustrator, it appears to be well-liked among designers and a legitimate alternative for someone who is not interested in paying for proprietary software at the moment (e.g., yours truly). As someone who has not previously worked with Illustrator and fairly new to Inkscape, I can't speak on the pros and cons of each, but I can say that I was able to successfully use Inkscape to draw a high-quality SVG and create my animation. So there's that.

Below is a demo of the logo I made that day.

Creating Scalable Vector Graphics(SVG)

Here is the MDN documentation for SVG if you're interested.

This isn't a "how to use Inkscape" guide. I will go over the steps I took to create the above example with a short demo.

Below is the (sped up) process for creating the SVG using Inkscape. It consists of:

• creating a text object and selecting the desired font
• using the pen tool to draw Bézier curves and lines
• setting fill and stroke (note: I added fill by mistake in this demo so you'll see me add it and then remove it)
• editing paths by nodes to properly align stroke (I went quick for the purposes of this demo so excuse the spazzing on the H--luckily there's no sound)
• selecting object to path
• selecting clip -> set
• saving as optimized SVG

Rendering SVG and Animating with CSS

I'm using React for this demo. I have a functional component that returns my SVG. I opened the file using VSCode and, in this case, simply copied the code into my component, removing the <defs> tags and <g> tags and their contents. I then added className to the svg tag for sizing and positioning, and to the final path tag which handles the animation. So I'm left with something like this:

And in my CSS file:

.img {
  width: 100%;
  height: 250px;
  margin: auto;
}

.path {
  opacity: 0;
  stroke-dasharray: 4000;
  stroke-dashoffset: 5000; 
  animation: dash 4s linear forwards;
}


@keyframes dash {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: transform 900ms linear;
      will-change: transform;
  }
}

Final product:

Welp, That's It

As stated on my profile: [I love being a] perpetual learner and creator. Software development not only allows for that but demands it. I'm excited to get more practice and exposure to the world of CSS animation as I had a lot of fun making my first ones.