trail.html

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

<script>
	var mouseX = 0
	var mouseY = 0

	canvas.onmousemove = function (e) {
		mouseX = e.offsetX
		mouseY = e.offsetY
	}

	var ctx = canvas.getContext('2d')
	var trail1 = { x: 0, y: 0 }
	var trail2 = { x: 0, y: 0 }
	var trail3 = { x: 0, y: 0 }

	function rotate (p, a) {
		var s = Math.sin(a)
		var c = Math.cos(a)
		return {
			x: p.x * c - p.y * s,
			y: p.x * s + p.y * c
		}
	}

	function draw () {
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		trail1.x += (mouseX - trail1.x) * 0.1
		trail1.y += (mouseY - trail1.y) * 0.1
		trail2.x += (mouseX - trail2.x) * 0.2
		trail2.y += (mouseY - trail2.y) * 0.2
		trail3.x += (mouseX - trail3.x) * 0.3
		trail3.y += (mouseY - trail3.y) * 0.3
		var a = Math.atan2(trail2.y - trail1.y, trail2.x - trail1.x)
		var b = Math.atan2(trail3.y - trail1.y, trail3.x - trail1.x)
		var c = Math.atan2(mouseY - trail1.y, mouseX - trail1.x)
		var trail1a = rotate({ x: 2, y: 0 }, a + 90 * Math.PI / 180)
		var trail1b = rotate({ x: 2, y: 0 }, a - 90 * Math.PI / 180)
		var trail2a = rotate({ x: 4, y: 0 }, b + 90 * Math.PI / 180)
		var trail2b = rotate({ x: 4, y: 0 }, b - 90 * Math.PI / 180)
		var trail3a = rotate({ x: 8, y: 0 }, c + 90 * Math.PI / 180)
		var trail3b = rotate({ x: 8, y: 0 }, c - 90 * Math.PI / 180)
		ctx.beginPath()
		ctx.moveTo(trail1.x, trail1.y)
		ctx.lineTo(trail2.x + trail1a.x, trail2.y + trail1a.y)
		ctx.lineTo(trail3.x + trail2a.x, trail3.y + trail2a.y)
		ctx.lineTo(mouseX + trail3a.x, mouseY + trail3a.y)
		ctx.lineTo(mouseX + trail3b.x, mouseY + trail3b.y)
		ctx.lineTo(trail3.x + trail2b.x, trail3.y + trail2b.y)
		ctx.lineTo(trail2.x + trail1b.x, trail2.y + trail1b.y)
		ctx.lineTo(trail1.x, trail1.y)
		ctx.fill()
		requestAnimationFrame(draw)
	}

	requestAnimationFrame(draw)
</script>