JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">


myData = 'M-9.3590822,119.086998L56.637619,21.5918713l43.4978256,95.9952011L161.63237,33.5912704l34.4982758,94.4952774l68.9965515-139.4930267l70.49646,155.9922028l58.4971008-122.9938507l28.4985657,101.9948959l31.4984131-46.497673l31.4984436,37.4981232l43.4978333-29.998497l25.4987183,31.4984207L599.6104736,60.58992l61.4969482,61.4969254L719.6044922,8.0925455l32.9983521,115.4942245c0,0,50.9974365-52.4973755,55.4971924-52.4973755s68.996582,73.4963303,68.996582,73.4963303L932.593811,27.5915699l109.4945679,88.495575l56.9970703-149.9924927l154.4923096,163.4918213l67.496582-83.9958038l74.9963379,68.9965515l136.4931641-131.9933929L1579.0615234,100l56.9970703-67.9086533l23.9989014,46.497673l40.4979248-49.4975243L1781.5513916,100l62.9968262-52.9094048l49.4975586,58.4970741l37.4980469-112.4943771l53.9973145,97.4951248l35.998291-68.9965439';

var path = new Path(myData);
path.strokeColor = '#000';


window.addEventListener("resize", myFunction);
myFunction();

function myFunction() {    
    redrawCanvas();
}

function redrawCanvas(){
    var oh=$('#myCanvas').height(), ow=$('#myCanvas').width()
    var linePropWidth = view.bounds.width, //2000 is actual width proportion
        lineProHeight = linePropWidth / 6.5; //100 is actual height proportion
     
    //path.strokeWidth = lineProHeight/40; //dynamic stroke size
    
    path.bounds.width = linePropWidth;
    path.bounds.height = lineProHeight;
    path.bounds.x = view.bounds.x;
    path.bounds.y = view.bounds.y + lineProHeight*2;
    
    reCreate();
}

function reCreate(){
	var data = path.exportJSON();
  var c = document.getElementById("myCanvas1");
	var ctx = c.getContext("2d");
  
  var img = new Image();
  img.src = path.importJSON(data);
  img.onload = function(){ ctx.drawImage(img, 0, 0); }
  
  
}



</script>











<canvas id="myCanvas" style="height:500;...

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/*********

  STYLES

*********/

canvas {
  width: 100%;
  height: 100%
}