JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined JavaScript -->
<script type="text/javascript">
// Make the paper scope global, by injecting it into window:
paper.install(window);
window.onload = function() {
	// Setup directly from canvas id:
	paper.setup('myCanvas');
  // Define two points which we will be using to construct
  // the path and to position the gradient color:
  var point1 = [0,350];
  var point2 = [350, 0];
	console.log(Path.Line);
  // Create a line between point1 and point2 points:
  var path = new Path({
      // Fill the line stroke with a gradient of two color stops
      strokeColor: {
          gradient: {
              stops: ['blue', 'red']
          },
                  //origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
          origin: [0,200], //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
          destination: [0,0]
      },
      strokeWidth: 5
  });
  var path = new Path();
  path.strokeColor = {
          gradient: {
              stops: ['blue', 'red']
          },
                  //origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
          origin: new Point(350, 0), //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
          destination: new Point(0, 350)
      };
  path.strokeWidth = 5;
  path.add(new Point(350, 0));
  path.add(new Point(0, 350));
  
	view.draw();
}
</script>
</head>
<body>
	<canvas id="myCanvas" resize></canvas>
</body>
</html>