JSFiddle - React, Tailwind, and code Playground

by Ivan Vasilyev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
<img src="https://s3-eu-west-1.amazonaws.com/media.ticketscloud/production/map/2015-10/562f74479cb5384ec5074358-562f74479cb5384ec5074357.svg" alt="">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
		<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
	</svg>
	<canvas id="canvas" width="595px" height="841px"></canvas>

CSS

img {
  display: none;
}

svg {

}

JavaScript

var url = document.querySelector('img').getAttribute('src');
var svg = document.querySelector('svg')
var canvas = document.getElementById('canvas');
		// Create an empty project and a view for the canvas:
paper.setup(canvas);

function SVGSymbol(elem){
  var a = new paper.Symbol(paper.project.importSVG(svg));
  return a;
}
var a = SVGSymbol(document.getElementById('svg'));
svg.parentNode.removeChild(svg);
var n = 20;
while(n--){
  var p = a.place();
  p.position = new paper.Point(n * 40, 100);
  p.scale(0.25 + Math.random() * 0.75);
}