<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" style="background-color:#1b252f;">

  <defs>
    <style>
      .axis, .label {
        fill: gray;
        font-family: sans-serif;
        font-size: 12px;
      }
      .line {
        stroke: gray;
        stroke-width: 2;
        fill: none;
      }
      .dot {
        fill: gray;
        stroke: gray;
        stroke-width: 1;
        r: 3;
      }
      .highlight {
        fill: #f8f812;
        stroke: #f8f812;
        stroke-width: 1;
        r: 5;
      }

    </style>
  </defs>

  <g class="axis">
    <line x1="50" y1="350" x2="550" y2="350" stroke="gray"/>
    <line x1="50" y1="350" x2="50" y2="50" stroke="gray"/>
    <text x="50" y="365">Days</text>
    <text x="15" y="50" transform="rotate(-90 15 50)">Price per Day (EUR)</text>
  </g>

  <g class="labels">
    <text x="50" y="375">0</text>
    <text x="550" y="375">90</text>
    <text x="35" y="50">20</text>
    <text x="35" y="350">0</text>
    <text x="35" y="150">10</text>
    <text x="35" y="250">5</text>
    <text x="35" y="300">8</text>

  </g>


  <path id="lineGraph" class="line" d=""/>

  <g id="dots"></g>

  <circle id="highlightDot" class="highlight" r="0" cx="0" cy="0" opacity="0"/>


  <script>
    const dataPoints = [];
    for (let i = 0; i <= 90; i++) {
      const price = 20 - 12 * Math.exp(-0.1 * i); // Convex curve formula
      dataPoints.push({ x: 50 + (500 / 90) * i, y: 350 - (300 / 20) * price });
    }

    let linePath = "M" + dataPoints[0].x + "," + dataPoints[0].y;
    dataPoints.forEach((point, index) => {
      linePath += " L" + point.x + "," + point.y;
    });

    document.getElementById("lineGraph").setAttribute("d", linePath);

    const dotsGroup = document.getElementById("dots");
    dataPoints.forEach(point => {
      const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      dot.setAttribute("class", "dot");
      dot.setAttribute("cx", point.x);
      dot.setAttribute("cy", point.y);
      dotsGroup.appendChild(dot);
    });


    const highlightDot = document.getElementById("highlightDot");
    document.getElementById("lineGraph").addEventListener("mousemove", (event) => {
      const point = findNearestPoint(event.offsetX, event.offsetY);
      highlightDot.setAttribute("cx", point.x);
      highlightDot.setAttribute("cy", point.y);
      highlightDot.setAttribute("r", 5);
      highlightDot.setAttribute("opacity", 1);
    });

    document.getElementById("lineGraph").addEventListener("mouseout", () => {
      highlightDot.setAttribute("r", 0);
      highlightDot.setAttribute("opacity", 0);
    });


    function findNearestPoint(x, y) {
      let minDistance = Infinity;
      let nearestPoint = null;
      dataPoints.forEach(point => {
        const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
        if (distance < minDistance) {
          minDistance = distance;
          nearestPoint = point;
        }
      });
      return nearestPoint;
    }
  </script>

</svg>