JSFiddle - React, Tailwind, and code Playground
HTML
<center><div style="font-size:25px;text-alighn:center;padding-top:20%;">IMAPO.RU</div></center>
JavaScript
(function () {
if (document.createElement('canvas').getContext) {
if (document.readyState === 'complete') snow();
else window.addEventListener('DOMContentLoaded', snow, false);
} else {
return;
}
var deg = Math.PI / 180;
var maxflakes = 505;
var flakes = [];
var scrollspeed = 1;
var snowspeed = 0;
var canvas, sky;
var snowingTimer;
var invalidateMeasure = false;
var strokes = ["#6cf", "#9cf", "#99f", "#ccf", "#66f", "#3cf"];
function rand(n) {
return Math.floor(n * Math.random());
}
// Запуск снегопада
function snow() {
canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.zIndex = '-10';
document.body.insertBefore(canvas, document.body.firstChild);
sky = canvas.getContext('2d');
ResetCanvas();
snowingTimer = setInterval(createSnowflake, 2000);
setInterval(moveSnowflakes, 55);
window.addEventListener('resize', ResetCanvas, false);
}
// Сброс размеров Canvas
function ResetCanvas() {
invalidateMeasure = true;
canvas.width = document.body.offsetWidth;
canvas.height = window.innerHeight;
}
// Отрисовка кривой Коха
function leg(n, len) {
sky.save(); // Сохраняем текущую трансформацию
if (n == 0) { // Нерекурсивный случай - отрисовываем линию
sky.lineTo(len, 0);
} else {
sky.scale(1 / 3, 1 / 3); // Уменьшаем масштаб в 3 раза
leg(n - 1, len);
sky.rotate(60 * deg);
leg(n - 1, len);
sky.rotate(-120 * deg);
leg(n - 1, len);
sky.rotate(60 * deg);
leg(n - 1, len);
}
sky.restore(); // Восстанавливаем трансформацию
sky.translate(len, 0); // переходим в конец ребра
}
// Отрисовка...