html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Indie Flower', cursive;
  background-color: #fffb89;
}

.app {
  max-width: 450px;
  font-size: 30px;
  line-height: 1.6em;
  text-align: justify;
}

.pen-stroke {
  position: relative;
  display: inline;
  color: #ff2727;
  
  svg {
    position: absolute;
    top: 1.2em;
    left: 0;
    width: 100%;
    overflow: visible;
    
    path {
      fill: none;
      stroke: #ff2727;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
  }
}

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

const random = (from, to) => Math.floor(Math.random() * (to - from) + from);

const Underline = ({children}) => {
  const strokeWidth = random(16, 20) / 100;
  const height = random(4, 8);
  let lines = random(2, 4);
  let d = `M ${random(-5, 15)} ${random(-2, 2)}`;
  let line = 0;
  
  // Draw the lines
  while (line++ < lines) {
    const y = line * (height / lines); // Draw every line lower than the previous one
    d += ` Q ${random(30, 70)}` + // The x coordinate of the curve's center
         ` ${random(y - 5, y + 5)}` + // The y coordinate of the curve's center
         ` ${line % 2 === 0 ? random(-5, 15) : random(85, 105)}` + // The x coordinate of the curve's end, alternating between right to left based on the current line number
         ` ${random(y - 2, y + 2)}`; // The y coordinate of the curve's end
  }
  
  return (
    <div className='pen-stroke'>
      {children}
      <svg viewBox={`0 0 100 ${height}`} height={height} xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>
        <path d={d} strokeWidth={`${strokeWidth}em`}/>
      </svg>
    </div>
  );
}

const App = () => (
  <div className='app'>
    These <Underline>underline</Underline> pen strokes are <Underline>randomly</Underline> generated, making each of them <Underline>unique</Underline>. The <Underline>strokes</Underline> automatically take the <Underline>width</Underline> of the text that they <Underline>underline</Underline>, like this very <Underline>looooooooooooooooooong</Underline> word.
  </div>
);

ReactDOM.render(
  <App/>,
  document.body
);