JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<canvas width=500 height=500></canvas>

CSS

canvas {
  background-color: #274494;
  border-radius: 30px;
  display: block;
  margin: 0 auto;
}

Babel + JSX

function easeOutQuart(t, b, c, d) {
	t /= d;
	t--;
	return -c * (t*t*t*t - 1) + b;
};


class Shape {
	constructor() {
		this.ctx = null;
	}

	setContext(ctx) {
		this.ctx = ctx;
	}
}

class Line extends Shape {
	constructor (start, end, color, lineWidth, timer, duration) {
		super()
		this.start = start;
		this.end = end;
		this.color = color;
		this.lineWidth = lineWidth;
		this.timer = timer;
		this.duration = duration;
	}

	draw(time) {
		if (time >= this.timer) {
			const ctx = this.ctx;
			let t = (time - this.timer);
			if (t > this.duration) {
				t = this.duration
			}
			ctx.beginPath();
			ctx.strokeStyle = this.color;
			ctx.lineWidth = this.lineWidth;
			let endX = easing(t, this.start[0], this.end[0] - this.start[0], this.duration),
			endY = easing(t, this.start[1], this.end[1] - this.start[1], this.duration);

			ctx.moveTo(this.start[0], this.start[1]);
			ctx.lineTo(endX, endY);
			ctx.stroke();
			ctx.closePath();
		}
	}

	drawBack(time) {
		if (time <= this.duration) {
			const ctx = this.ctx;
			ctx.beginPath();
			ctx.strokeStyle = this.color;

			let startX = easing(time, this.start[0], this.end[0] - this.start[0], this.duration),
			startY = easing(time, this.start[1], this.end[1] - this.start[1], this.duration);
			ctx.moveTo(startX, startY);
			ctx.lineTo(this.end[0], this.end[1]);
			ctx.stroke();
			ctx.closePath();
		}
	}
}

class Arc extends Shape {
	constructor (center, radius, start, length, color, lineWidth, timer, duration) {
		super();

		this.center = center;
		this.radius = radius;
		this.start = start; 
		this.length = length;
		this.color = color;
		this.lineWidth = lineWidth;
		this.timer = timer;
		this.anticlockwise = false;
		this.fill = false;
		this.duration = duration;
	}

	draw(time) {
		if (time >= this.timer) {
			const ctx = this.ctx;
			let t = (time - this.timer);
			if (t > this.duration) {
				t = this.duration;
			}

			const angle = easing(t, 0, this.length, this.duration),
				endPath = this.start +...