<section class="wrap" aria-label="דוגמאות">
    <a class="item" href="#" data-uline>חדשנות
      <div class="underline-box" aria-hidden="true"></div>
    </a>
    <a class="item" href="#" data-uline>ללא
      <div class="underline-box" aria-hidden="true"></div>
    </a>
    <a class="item" href="#" data-uline>גבולות
      <div class="underline-box" aria-hidden="true"></div>
    </a>
  </section>
  
   <style>
    :root{
      --bg: #ffffff;
      --text: #030510;
      --accent: #00e2c5;
    }

    .wrap{
		color:var(--text);
      display:flex;
      gap:2rem;
      align-items:flex-end;
      justify-content:center;
      flex-wrap:wrap;
    }

    .item{
      text-decoration:none;
      color:var(--text);
      font-size:3.2rem;
      font-weight:600;
      display:inline-block;
      position:relative;
      padding:0.2rem 0.6rem 1.4rem 0.6rem;
      cursor: pointer;
      user-select:none;
    }

    .underline-box{
      position:absolute;
      left:0;
      right:0;
      bottom:0.02em;
      height:1.1em; /* גובה תיבת ה-SVG */
      pointer-events:none; /* לא מפריע לקליקים */
      overflow:visible;
    }

    /* SVG בסיסיים יתאימו לרוחב התיבה */
    .uline-svg{
      width:100%;
      height:100%;
      display:block;
      overflow:visible;
    }

    /* אפשר לשנות את עובי/צבע הקו מהמופע */
    .uline-path{
      fill:none;
      stroke:var(--accent);
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-width:10;
    }

    /* התאמה לרספונסיב — קטן במסכים צרים */
    @media (max-width:600px){
      .item{font-size:2.2rem}
    }
  </style>

  <script>
    // מערך צורות נתיב SVG מקוריות (ללא העתקת קבצים חיצוניים)
    const PATH_VARIANTS = [
      // גל ליניארי עם שינויי גובה קלים
      "M5 24 C40 10, 80 30, 120 22 C160 14, 200 32, 240 26 C280 20, 305 24, 305 24",
      // מעט קימוטים קטנים
      "M5 18 C30 26, 60 12, 95 18 C130 24, 165 12, 200 18 C235 24, 270 16, 305 20",
      // שוּרה נמוכה עם עקמומיות
      "M5 26 C40 26, 80 26, 120 26 C160 26, 200 26, 240 26 C280 26, 305 26, 305 26",
      // שילוב זיגזג עדין
      "M5 28 C25 18, 45 30, 75 22 C105 14, 135 30, 165 20 C195 10, 235 28, 275 18 C305 10, 305 10, 305 10",
      // קו קצר יותר במרכז עם קימור
      "M5 22 C55 12, 125 28, 185 18 C245 8, 285 24, 305 22"
    ];

    // פונקציה שיוצרת אלמנט SVG עם נתיב נתון (adaptive viewBox)
    function createSVGForPath(pathD) {
      // הגדר רוחב משוער ל-310 (כמו המקור) והנמיך לגובה 40
      const svgNS = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(svgNS, "svg");
      svg.setAttribute("viewBox", "0 0 310 40");
      svg.setAttribute("preserveAspectRatio", "none");
      svg.classList.add("uline-svg");

      const path = document.createElementNS(svgNS, "path");
      path.setAttribute("d", pathD);
      path.setAttribute("class", "uline-path");
      // stroke מצוין ב-CSS (על־ידי class)
      svg.appendChild(path);
      return { svg, path };
    }

    // אנימציית 'ציור' באמצעות strokeDash - חזור עוקב
    function animateDraw(pathEl, {duration = 500} = {}) {
      // קבע אורכי קו
      const total = pathEl.getTotalLength();
      // ערכים התחלתיים
      pathEl.style.strokeDasharray = total;
      pathEl.style.strokeDashoffset = total;
      pathEl.getBoundingClientRect(); // force layout
      const start = performance.now();
      return new Promise(resolve => {
        function tick(now){
          const t = Math.min(1, (now - start) / duration);
          // easing (power2.inOut ~ smooth)
          const eased = t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;
          pathEl.style.strokeDashoffset = Math.round((1 - eased) * total);
          if (t < 1) requestAnimationFrame(tick);
          else resolve();
        }
        requestAnimationFrame(tick);
      });
    }

    // אנימציית 'היעלמות' — מתקרב לקו מלא ואז מסיר את ה-SVG
    function animateHide(pathEl, {duration = 350} = {}) {
      const total = pathEl.getTotalLength();
      const startOffset = parseFloat(pathEl.style.strokeDashoffset || total);
      const start = performance.now();
      return new Promise(resolve => {
        function tick(now){
          const t = Math.min(1, (now - start) / duration);
          // easing (reverse)
          const eased = t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;
          // נע לעבר 0 ואז נשאיר קצת ואז נעלם
          pathEl.style.strokeDashoffset = Math.round((1 - eased) * 0);
          if (t < 1) requestAnimationFrame(tick);
          else resolve();
        }
        requestAnimationFrame(tick);
      });
    }

    // ניהול רכיבים — בחרנו שהבחירה הבאה תהיה רנדומלית אבל מתקדמת כדי לשמור תחושת ואריאציה
    (function init(){
      const items = document.querySelectorAll("[data-uline]");
      let nextIndex = Math.floor(Math.random() * PATH_VARIANTS.length);

      items.forEach(item => {
        const box = item.querySelector(".underline-box");
        let current = null; // {svg, path}
        let drawing = null; // promise of current draw

        item.addEventListener("mouseenter", async (e) => {
          // אם כבר מצויר, תן לו להמשיך
          if (current) {
            // אם יש path אך לא מלא — לא נתחיל מחדש
            return;
          }
          // בחרי נתיב
          const d = PATH_VARIANTS[nextIndex % PATH_VARIANTS.length];
          nextIndex++;
          current = createSVGForPath(d);
          box.innerHTML = ""; // נקה קודם
          box.appendChild(current.svg);

          // בצע draw אנימציה
          drawing = animateDraw(current.path, {duration: 500});
          await drawing;
          drawing = null;
          // לאחר הסיום שומרים current עד שיצא המשתמש מהאלמנט
        });

        item.addEventListener("mouseleave", async (e) => {
          if (!current) return;
          // אם האנימציה עדיין רצה — חכה לה ואז המשך
          if (drawing) await drawing;
          // הפעל אנימציית היעלמות קצרה ואז ננקה את ה־SVG
          try {
            await animateHide(current.path, {duration: 350});
          } catch (err) {
            // חוסם שגיאות ולא משאיר את ה־SVG
          }
          box.innerHTML = "";
          current = null;
        });

        // תמיכה בנגיעה למכשירי מגע — הפוך את התנהגות hover ל־tap
        item.addEventListener("touchstart", (ev) => {
          // קליק קצר: אם אין SVG — יצירתו; אם יש — הסרה.
          ev.preventDefault();
          if (!current) {
            const d = PATH_VARIANTS[nextIndex % PATH_VARIANTS.length];
            nextIndex++;
            current = createSVGForPath(d);
            box.innerHTML = "";
            box.appendChild(current.svg);
            // לא מחכה כאן — מפעילים אנימציה אסינכרונית
            animateDraw(current.path, {duration: 500}).then(() => { drawing = null; });
          } else {
            // הסר מייד
            box.innerHTML = "";
            current = null;
          }
        }, {passive:false});
      });
    })();
  </script>