Hand Written SVG Title Component

<div class="relative w-full max-w-4xl mx-auto py-24 bg-white dark:bg-gray-900">
  <div class="absolute inset-0">
    <svg width="100%" height="100%" viewBox="0 0 1200 600" class="w-full h-full">
      <title>Hand Written Title</title>
      <path d="M 950 90 C 1250 300, 1050 480, 600 520 C 250 520, 150 480, 150 300 C 150 120, 350 80, 600 80 C 850 80, 950 180, 950 180" fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="text-black dark:text-white opacity-90" style="animation: drawPath 2.5s ease-out forwards;"></path>
    </svg>
  </div>
  <div class="relative text-center z-10 flex flex-col items-center justify-center">
    <h1 class="text-4xl md:text-6xl text-black dark:text-white tracking-tighter flex items-center gap-2" id="handWrittenTitle">NewSide News</h1>
    <p class="text-xl text-black/80 dark:text-white/80 mt-2" id="handWrittenSubtitle">koltopia Studio</p>
  </div>
  <style>@keyframes drawPath{from{stroke-dasharray:2000;stroke-dashoffset:2000;}to{stroke-dasharray:2000;stroke-dashoffset:0;}}svg path{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawPath 2.5s ease-out forwards;}</style>
  <script>function initHandWrittenTitle(titleText,subtitleText){const title=document.getElementById('handWrittenTitle');const subtitle=document.getElementById('handWrittenSubtitle');if(title&&titleText)title.textContent=titleText;if(subtitle&&subtitleText)subtitle.textContent=subtitleText;else if(subtitle&&!subtitleText)subtitle.style.display='none';}document.addEventListener('DOMContentLoaded',function(){initHandWrittenTitle('Hand Written','Optional subtitle');});</script>
</div>