<?php
/**
 * Hand-drawn underline swash that draws itself on.
 *
 * @var string       $color  CSS color (default clay)
 * @var float|int    $delay  seconds of delay before the stroke animates
 * @var string       $width  CSS width (default 100%)
 */
$color = $color ?? 'var(--cc-clay)';
$delay = $delay ?? 0.6;
$width = $width ?? '100%';
?>
<svg viewBox="0 0 400 24" preserveAspectRatio="none" aria-hidden="true"
     style="display:block;width:<?= h($width) ?>;height:22px;margin-top:-4px;overflow:visible;">
    <path d="M4,14 C 60,4 140,22 220,10 S 360,18 396,8"
          fill="none" stroke="<?= h($color) ?>" stroke-width="3" stroke-linecap="round"
          pathLength="1"
          class="cc-draw-path"
          style="--cc-draw-delay: <?= h((string)$delay) ?>s;" />
</svg>
