How to add hand-drawn markup to text in HTML and CSS

In this post, I will walk you through the process of creating a fun and interactive headline effect, where you draw a circle around a word for emphasis on your website. I’ll share how I did this using Figma and CSS, and explain how you can implement it on your content management system (CMS), using Sanity as an example. It’s an exciting way to make simple headlines stand out with animation, and the post outlines the step-by-step process from design to implementation. Let’s dive into the details!

Drawing the Interactive Circle Effect in Figma Link to this headline

I started by sketching the circle in Figma with the pencil tool. Even though it’s rough initially, Figma helps smooth out the path, and you can clean it up by removing unnecessary points using the pen tool. This ensures the circle looks as if it was hand-drawn, but polished.

Once I cleaned up the path, I reduced the stroke thickness for a sleeker look. Afterward, I exported the drawing as an SVG to be used in the website's code.

Implementing the Effect in the CMS Link to this headline

Next, I needed a way for our CMS editors to apply this effect to any word within their content. In Sanity, we can mark words as "strong" (or bold) in the CMS interface. In my setup, applying the bold style in Sanity triggers the animation on the website.

The key is setting up a custom component that automatically applies the SVG circle whenever the "strong" tag is used on a word. I wrote a custom component in Svelte that detects when a word is marked as bold in the CMS and adds the animated SVG circle around it.

Adding the Animation Using SVG and CSS Link to this headline

Now that the SVG was in place, the next step was to animate the circle to give it that "drawn-on" look. I used the stroke-dasharray and stroke-dashoffset properties in CSS to create a dashed line effect, which animates as if someone is drawing the circle in real-time.

By adjusting the pathLength property of the SVG, I ensured the stroke fits the size of the word perfectly, and then set the animation to run when the page loads. It creates a playful, hand-drawn emphasis effect that can adapt to any word length and font size.

Fine-Tuning the Design Link to this headline

To perfect the effect, I made minor adjustments to the width and height of the SVG relative to the word, ensuring it scales smoothly with different font sizes. This was key to maintaining the visual appeal of the animation.

Conclusion Link to this headline

This process allows you to create an eye-catching, animated effect on your website, giving more emphasis to specific words. Whether you’re using Sanity or another CMS, the same principles can be applied, making this a versatile technique to enhance your content's visual design.

1. Can I use this technique with other CMS platforms besides Sanity?

   Yes, this method can be adapted for any CMS that supports custom components and text formatting. You may need to adjust the code for your specific platform.

2. How does the SVG adjust to different word lengths?

   By using the preserveAspectRatio attribute and pathLength, the SVG scales automatically to fit the size of the word, making it flexible for any length or font size.

3. Is this animation method limited to circles?

   No, you can animate any SVG path, so you can experiment with different shapes and effects to highlight your text creatively.