html,
body {
  width: 100%;
  height: 100%;
}
html  {
  background: black;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(240,70%,30%,.75);
}


my-random-draw {
  width: 90%;
  height: 90%;
  display: block;
}

import vivus from 'https://cdn.skypack.dev/vivus@v0.4.5';

const template = document.createElement("template");
template.innerHTML = `<style>svg {cursor: pointer; width: 100%; height: 100%; fill: none;}</style>
  <svg><path id="path" stroke="hsla(60,80%,70%,.65)" stroke-width=".35px" /></svg>`;

class MyRandomDraw extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  toRadians(angle) {
    return angle * (Math.PI / 180);
  }

  connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.render();
    document.body.addEventListener('click', () => this.render());
  }

  render() {
    this.count = 0;
    this.r = this.rnd(100, 400);
    this.rx = this.r;
    this.ry = this.r;
    this.deg = this.rnd(0, 360);
    this.dx = this.rnd(-1, 1);
    this.dy = this.rnd(-1, 1);
    this.cx = window.innerWidth / 2;
    this.cy = window.innerHeight / 2;
    this.d = "M ";
    
    let mi_x = 10000,
      ma_x = -1000,
      mi_y = 10000,
      ma_y = -1000;
    let step = parseInt(this.rnd(10,200));
    let end = this.deg + 360 * 100;
    for (let d = this.deg; d < end; d += step) {
      let r = this.toRadians(d);
      let x = parseInt(Math.cos(r) * this.rx + this.cx);
      let y = parseInt(Math.sin(r) * this.ry + this.cy);
      mi_x = Math.min(mi_x, x);
      mi_y = Math.min(mi_y, y);
      ma_x = Math.max(ma_x, x);
      ma_y = Math.max(ma_y, y);
      this.d += `${x} ${y} `;
      if (d === this.deg) {
        this.d += "L ";
      }
      // change
      this.rx += this.dx;
      this.ry += this.dy;
    }
    let path = this.shadowRoot.getElementById("path");
    path.setAttribute("d", this.d);
    this.shadowRoot.querySelector("svg").setAttribute(
      "viewBox",
      `${mi_x} ${mi_y} ${Math.abs(ma_x - mi_x)} ${Math.abs(ma_y - mi_y)}`
    );
    new vivus(this.shadowRoot.querySelector("svg"), {duration: 40}, () => {});
  }

  rnd(mi, ma) {
    let diff = ma - mi;
    return Math.random() * diff + mi;
  }
}

customElements.define("my-random-draw", MyRandomDraw);