Autotel

Round sine anim

I made this to have some nice animation on the web index page.

    const target = document.getElementById("code-target");
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    target.appendChild(svg);
    svg.style.width = "100%";
    svg.style.height = svg.clientWidth + "px";
    svg.style.stroke = "white";
    let rds = [
      Math.random(),
      Math.random(),
      Math.random(),
    ];
    const gPos = document.getElementById("g-position");

    if (svg) {
      let viewWidth = 100;
      let viewHeight = 100;
      svg.setAttribute(
        "viewBox",
        `${-viewWidth / 2} ${-viewHeight / 2} ${viewWidth} ${viewHeight}`
      );
      const svgNameSpace = svg.namespaceURI;
      const oscilloscopeLine = document.createElementNS(svgNameSpace, "path");
      oscilloscopeLine.setAttribute("fill", "none");
      oscilloscopeLine.setAttribute("stroke-width", "0.23");

      setInterval(()=>{
        rds = [
          Math.random(),
          Math.random(),
          Math.random(),
        ];
      }, 10000);

      svg.appendChild(oscilloscopeLine);
      let pastValues = [];
      let index = 0;
      const animationFrame = (time) => {
        requestAnimationFrame(animationFrame);

        const maxVals = 600;
        for (let i = 0; i < maxVals; i += 1) {
          const vnow = (
            Math.sin(i * time / 140000 * rds[0]) * 1
            + Math.cos(i * time / 10000 * rds[1]) * .25
            + Math.cos(i * time / 5000 * rds[2]) * rds[2]
            // Math.cos(i * time / 134412.1249812) * 7
          )
          if (undefined === pastValues[i]) pastValues[i] = 0;

          pastValues[i] = vnow * 0.01 + pastValues[i] * 0.99;
        }
        let min = 0;
        let max = 0;
        pastValues.forEach((value) => {
          if (value > max) max = value;
          if (value < min) min = value;
        });

        const mult = 1;

        const mm1 = viewWidth * mult;
        const path = pastValues
          .map((value, index) => {
            if (!value) return;
            const window =
              Math.cos((index / pastValues.length - 0.5) * 2 * Math.PI) * 0.5 +
              0.5;
            const mm2 = mm1 * value;
            const x = Math.cos(index * 2 * Math.PI / maxVals) * mm2;
            const y = Math.sin(index * 2 * Math.PI / maxVals) * mm2;

            return `${x * window},${y * window}`;
          })
          .join(" ");
        oscilloscopeLine.setAttribute("d", `M ${path}`);
      };

      requestAnimationFrame(animationFrame);
    }