JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<section>
    <div style="position:absolute;left:50%;transform:translateX(-50%);top:-150px;z-index:-1;">
      <canvas id="canvas" width="710" height="740" style="transform: scale(0.5);">
        <p>Update your browser my guy (づ￣ ³￣)づ</p>
      </canvas>
    </div>
    <div style="margin-top: 450px;">
      <h1>“One must not commit adultery my child” <em>-jesus</em></h1>
      <div class="menu-items">
        <a class="btn-A" href="/apps/blog/">Blog</a>
        <a class="btn-A" href="/bookmarks.html">Bookmarks</a>
        <a class="btn-A" href="/portfolio.html">Portfolio</a>
      </div>
      <h2>Services</h2>
      <div class="menu-items">
        <a class="btn-A" href="/apps/proxy">Proxy Scraper</a>
        <a class="btn-A" href="/apps/discord">Discord Self Bot</a>
        <a class="btn-A" href="/apps/aurora">Aurora Service</a>
        <a class="btn-A" href="/anonymity.html">Anonymity Test</a>
      </div>
      <h2>About / Contact</h2>
      <div class="menu-items">
        <a class="btn-A" href="#" onclick="fadeInOut(event,document.getElementById('whoami'),document.getElementsByTagName('section')[0]);">Whoami</a>
        <a class="btn-A" href="#" onclick="fadeInOut(event,document.getElementById('discord'),document.getElementsByTagName('section')[0]);">Discord</a>
        <a class="btn-A" href="#" onclick="fadeInOut(event,document.getElementById('matrix'),document.getElementsByTagName('section')[0]);">Matrix</a>
      </div>
      <br><br><br>
    </div>
  </section>
  <center id="discord">
    <a class="btn-B" href="#" onclick="fadeInOut(event,document.getElementsByTagName('section')[0],document.getElementById('discord'));">Take me back</a>
    <h2>Enter the cesspool and become a member of the Christian Hacking Club.</h2>
    <iframe src="https://discordapp.com/widget?id=709921316647469086&theme=dark" width="40%" height="500px" allowtransparency="true" frameborder="0"></iframe>
  </center>
  <center id="matrix">
    <div>
      <h2>Join our official matrix...

CSS

@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro&display=swap');@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');:root{--primary:#00ff7a;--primary-variant:#23d35b;--secondary:#03dac6;--secondary-variant:#018786;--tertiary:#6200ee;--tertiary-variant:#3700b3;--background:#131313;--background-variant:#212121;--surface:#1c1c1c;--text-on-dark:#fff;--text-on-light:#2d2d2d;--shadow:2px 2px 3px rgba(10, 10, 10, 0.8);--shadow-hov:2px 2px 7px rgba(0, 0, 0, 0.8);}*{box-sizing:border-box;margin:0;padding:0;}body{font-family:'Anonymous Pro', monospace;line-height:1.4;background-color:var(--background);color:var(--text-on-dark);}header{padding:50px 5vw;background:url('/assets/backgroundB.png');background-size:cover;background-attachment:fixed;}.info{padding:50px 5vw;background:url('/assets/tile4.png');background-attachment:fixed;}a{color:var(--primary);transition:color .2s;}a:hover, a:active{color:var(--primary-variant);}nav.global{background-color:var(--surface);display:flex;flex-direction:row;justify-content:center;}nav.global a{padding:20px;display:block;color:var(--text-on-dark);text-decoration:none;text-align:center;box-shadow:inset 0 0 0 0 var(--background-variant);transition:box-shadow .4s;font-family:'Montserrat', sans-serif;}nav.global a:hover{box-shadow:inset 0 0 0 30px var(--background-variant);}button{cursor:pointer;width:22ch;text-align:center;font-family:'Montserrat', sans-serif !important;text-decoration:none;display:table;background:none;border:2px solid;margin:0.5em;padding:1em 2em;transition:0.25s;color:var(--primary);box-shadow:0.3em 0.3em 0 0 var(--primary), inset 0.3em 0.3em 0 0 var(--primary);font-weight:bold;}button:hover,button:focus{color:var(--text-on-light);border-color:var(--primary-variant);box-shadow:0 0 0 0 var(--primary-variant), inset 6em 3.5em 0 0 var(--primary-variant);}

section{height:100vh;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,...

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  cords_short = [[155, 10], [335, 10], [565, 587], [663, 557], [699, 671], [487, 738], [352, 398], [146, 701], [4, 701], [292, 253], [253, 133], [155, 133], [155, 10]];

  // define the path to plot
  var vertices=[{x: 155, y: 10}, {x: 335, y: 10}, {x: 565, y: 587}, {x: 663, y: 557}, {x: 699, y: 671}, {x: 487, y: 738}, {x: 352, y: 398}, {x: 351, y: 398}, {x: 146, y: 701}, {x: 4, y: 701}, {x: 292, y: 254}, {x: 292, y: 252}, {x: 253, y: 133}, {x: 155, y: 133}, {x: 155, y: -4}];
  // calc waypoints traveling along vertices
  function calcWaypoints(vertices){
    var waypoints=[];
    for(var i=1;i<vertices.length;i++){
      var pt0=vertices[i-1];
      var pt1=vertices[i];
      var dx=pt1.x-pt0.x;
      var dy=pt1.y-pt0.y;
      for(var j=0;j<10;j++){
        var x=pt0.x+dx*j/10;
        var y=pt0.y+dy*j/10;
        waypoints.push({x:x,y:y});
      }
    }
    return(waypoints);
  }
  var points=calcWaypoints(vertices);
  var t=1;
  // start the animation
  setTimeout(function() {
    animate();
  },600);
  // animate();
  // incrementally draw additional line segments along the path
  function animate(){
    if(t<points.length-1){
      requestAnimationFrame(animate);
    }
    // draw a line segment from the last waypoint
    // to the current waypoint
    ctx.beginPath();
    ctx.strokeStyle = '#32de84';
    ctx.lineWidth = 6;
    ctx.moveTo(points[t-1].x,points[t-1].y);
    ctx.lineTo(points[t].x,points[t].y);
    ctx.stroke();
    // increment "t" to get the next waypoint
    t++;
  }

  var i = 0;
  function drawDots(coords, s=0) {
    setTimeout(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < coords.length; i++) {
        let v1 = coords[i][0];
        let v2 = coords[i][1];
        ctx.beginPath();
        ctx.fillStyle = '#32de84';
        ctx.arc(s*v1, s*v2, 5, 0, 2*Math.PI);
        ctx.fill();
       ...