JS для написания (и самостирания) веб-страницы ⇐ CSS

[Anonymous]

Мне было интересно, как я могу создать что-то похожее на эффект каракули (и самостирания), который можно найти на этом сайте?
Пример: https://www.bornfight.studio /
Спасибо!
Я нашел похожие скрипты, но ничего такого, что я не понимаю, как заставить каракули самоисчезать после нескольких строк.
Аналогичный пример: https://jsfiddle.net/loktar/dQppK/23/

Код: Выделить всё

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 0,
lineThickness = 1;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
painting = true;
ctx.fillStyle = "#ffffff";
lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
painting = false;
}

canvas.onmousemove = function(e) {
if (painting) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;

// find all points between
var x1 = mouseX,
x2 = lastX,
y1 = mouseY,
y2 = lastY;

var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
if (steep){
var x = x1;
x1 = y1;
y1 = x;

var y = y2;
y2 = x2;
x2 = y;
}
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;

var y = y1;
y1 = y2;
y2 = y;
}

var dx = x2 - x1,
dy = Math.abs(y2 - y1),
error = 0,
de = dy / dx,
yStep = -1,
y = y1;

if (y1 < y2) {
yStep = 1;
}

lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
if(lineThickness < 1){
lineThickness = 1;
}

for (var x = x1; x < x2; x++) {
if (steep) {
ctx.fillRect(y, x, lineThickness , lineThickness );
} else {
ctx.fillRect(x, y, lineThickness , lineThickness );
}

error += de;
if (error >= 0.5) {
y += yStep;
error -= 1.0;
}
}

lastX = mouseX;
lastY = mouseY;

}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/784 ... a-web-page