JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='cvs' width=900 height=750></canvas>

CSS

body {
 background-color : green
}

JavaScript

void function (canvas_element) {
 var ctx = canvas_element.getContext('2d')
 var animation_time_ms = 4000
 var max_length = 3150
 var a = 0
 // Total time taken is 25ms * max_length / tick_speed.
 var tick_speed = 25 * max_length / animation_time_ms
 var dash_interval = setInterval (function () {
  a += tick_speed
  if (a < 0) {clearInterval (dash_interval); return}
  
  ctx.clearRect (0, 0, cvs.width, cvs.height)
  ctx.setLineDash ([10, 10])
  ctx.lineWidth = 3
  ctx.globalCompositeOperation = "source-over"
  make_curve ()
  ctx.setLineDash ([max_length - a, a])
  ctx.lineWidth = 6
  ctx.globalCompositeOperation = "destination-out"
  make_curve ()
  
  function make_curve () {
   ctx.save ()
   ctx.beginPath ()
   ctx.moveTo (0,0)
   ctx.lineTo (900,0)
   ctx.lineTo (900,750)
   ctx.lineTo (0,750)
   ctx.closePath ()
   ctx.clip ()
   ctx.strokeStyle = 'rgba(0,0,0,0)'
   ctx.lineCap = 'butt'
   ctx.lineJoin = 'miter'
   ctx.miterLimit = 4
   ctx.translate (-7.5,-265.45)
   ctx.fillStyle = "rgba(0, 0, 0, 0)"
   ctx.strokeStyle = "black"
   ctx.lineCap = "butt"
   ctx.lineJoin = "miter"
   ctx.miterLimit = 4
   ctx.beginPath ()
   ctx.moveTo (8,966)
   ctx.bezierCurveTo (45,964,246,989,440,862.5)
   ctx.bezierCurveTo (664.42781,706,640,357,327,375)
   ctx.bezierCurveTo (58,400,-22,948,595,961.5)
   ctx.bezierCurveTo (984,944,991,466.5,595,266)
   ctx.fill ()
   ctx.stroke ()
   ctx.restore ()
  }
 }, 25)
} (document.getElementById('cvs'))