Hand drawn lines and squiggles

Custom lines and squiggles are possible with SVGs. Do keep in mind that the words that are underlined or squiggled cannot wrap over multiple lines

Lines

You would like to underline a word but don't use the default browser underline. I get that. In that case, you can use a line SVG.

Squiggles

Or, you would like to have a squiggle around a word, and there is no default browser squiggle. In that case, you can use a circle SVG.

How?

You can inspect the elements on this page to figure out the CSS. But here is the SVG, as this is where the magic happens.

<svg
  class="circle"
  aria-hidden="true"
  focusable="false"
  viewBox="0 0 141 53"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="none" // Important!
>
  <path
	vector-effect="non-scaling-stroke" // Important!
	d="M127.704 5.33938C71.5519 -3.68651 -14.7461 5.34096 4.83422 35.3926C21.6716 61.2344 137.517 51.7062 138.966 30.5825C140.817 3.60319 66.3215 2.02061 25.7926 5.34062"
	stroke="currentColor"
	stroke-width="4"
	stroke-linecap="round">
  </path>
</svg>

If you don't set the preserveAspectRatio="none" attribute, the drawn shape will always have the same aspect ratio. Even if the text is wider, the shape will be the same. We want to stretch the shape to the width of the text.

If we stretch the shape, the width of the line should always stay the same. Just like you draw a line with a ballpoint pen. To ensure this, we set the vector-effect="non-scaling-stroke" attribute.