JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="bacterium"></canvas>

<canvas id="bacterium"></canvas>

<canvas id="bacterium"></canvas>

<canvas id="bacterium"></canvas>

<canvas id="bacterium"></canvas>

CSS

#bacterium, #bacterium-2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

JavaScript

(function($){

	"use strict";

	var mypaper;

	$(document).ready(function() {

		// initialize the paper animation
		mypaper = new PaperWrap( $('#bacterium')[0] );

		
	});

	function fitPaperWraps() {
		mypaper.fit();
	}

	$(window).resize(function() {

		waitForFinalEvent(function(){
			
			fitPaperWraps();

		}, 50, "resizing-papers");

	});

	var waitForFinalEvent = (function () {
		var timers = {};
			return function (callback, ms, uniqueId) {
		if (!uniqueId) {
			uniqueId = "Don't call this twice without a uniqueId";
		}
		if (timers[uniqueId]) {
			clearTimeout (timers[uniqueId]);
		}
		timers[uniqueId] = setTimeout(callback, ms);
		};
	})();

	function PaperWrap( canvasElement ) {

		var mypaper = new paper.PaperScope();
		mypaper.setup( canvasElement );

		var view = mypaper.view,
			Point = mypaper.Point,
			Path = mypaper.Path,
			Group = mypaper.Group;

		// adjustable variables
		var mouseForce = 0.1;
		// other variables
		var mousePoint = new Point(-1000, -1000);

		function Bacterium(center, size, color) {
			this.build(center, size, color);
		}

		Bacterium.prototype = {
			build: function(center, radius, color) {
				var padding = Math.min(view.size.width, view.size.height) * 0.2;

				
				var timeScale = 1;
				var maxWidth = view.size.width - padding * 2;
				var maxHeight = view.size.height - padding * 2;
				var w = maxWidth * timeScale;
				var h = maxHeight * timeScale;

				this.fitRect = new Path.Rectangle({
					point: [view.size.width / 2 - w / 2, view.size.height / 2 - h / 2],
					size: [w, h]
				});

				this.circlePath = new Path.Circle(center, radius);

				this.group = new Group([this.circlePath]);
				//this.group.strokeColor = "black";
				this.group.position = view.center;

				this.circlePath.fillColor = color;
				this.circlePath.fullySelected = false;
				
				// Mausdistanz
				this.threshold = radius * 1.4;
				this.center = center;
				// Elemente hinzufügen
				this.circlePath.flatten(radius * 1.5);
				// wieder zum...