JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div class="scribble-text">this is the <div class="scribble-holder">
<svg class="scribble" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path  d="M325,18C228.7-8.3,118.5,8.3,78,21C22.4,38.4,4.6,54.6,5.6,77.6c1.4,32.4,52.2,54,142.6,63.7 c66.2,7.1,212.2,7.5,273.5-8.3c64.4-16.6,104.3-57.6,33.8-98.2C386.7-4.9,179.4-1.4,126.3,20.7"></path></svg> 
</div>content</div>

CSS

*{position:relative}
  .scribble-holder{width:auto;  position:absolute;top:-10px; right: -12px; z-index:10}
  .scribble {
  fill: none;
  stroke-width: 15px;
  stroke: #491EC4;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: dash 2s linear forwards;
  width:105px;
  height:55px;
  padding:10px;

} 
.scribble-text{font-size:30px;padding:10px; display:block;  width: fit-content;}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}