Живые и интерактивные SVG-круги

Добро пожаловать в захватывающий мир SVG-графики! Сегодня мы погрузимся в создание динамичных и интерактивных кругов с помощью SVG и JavaScript, которые оживят ваш веб-сайт и привлекут внимание посетителей.

SVG (Scalable Vector Graphics) – это формат векторной графики, который позволяет создавать масштабируемые и четкие изображения, независимо от размера экрана. В отличие от растровых изображений, SVG-графика основана на математических формулах, что обеспечивает ее высокую четкость при масштабировании.

Демонстрация

В этом примере мы создадим анимацию, где круги будут появляться и исчезать, создавая эффект движения и глубины. Давайте разберемся, как это работает.

Начнем с HTML-разметки:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Живые SVG-круги</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            transition: background-color 0.5s;
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            fill: blue;
            stroke-width: 5;
            stroke-dasharray: 20;
            transition: fill 0.5s;
        }

        path {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <svg></svg>
</body>
</html>

Здесь мы создаем базовую структуру с тегом <svg> внутри <body>. CSS-стили устанавливают фон страницы, позиционируют SVG и определяют переход цвета.

JavaScript-анимация

Теперь перейдем к JavaScript-части, которая добавляет анимацию и интерактивность:

function create(type) {
    return document.createElementNS("http://www.w3.org/2000/svg", type);
}

let w, h, diag, time = 0;
const init = Date.now();
const svg = create("svg");
let count = 5;

document.body.appendChild(svg);

function createCircle(cx, cy, r) {
    return `M ${cx} ${cy} m ${-r} 0 a ${r},${r} 0 1,1 ${r * 2},0 a ${r},${r} 0 1,1 ${-r * 2},0`;
}

const path = create('path');
path.setAttribute('fill-rule', 'evenodd');
svg.appendChild(path);

const radius = 100;

function draw() {
    const circles = [];
    for (let i = 0; i < count; i++) {
        const ii = i / count + time / count * 2 / 3;
        const ang = ii * Math.PI * 2;
        const cos = Math.cos(ang) * 2;
        const sin = Math.sin(ang) * 2;
        const c = 1 / Math.tan(ang / 2);
        const x = cos * radius;
        const y = sin * radius;
        circles.push([w / 2 + x, h / 2 + y, 30 * c]);
    }
    path.setAttribute("d", circles.map(c => createCircle(...c)).join(' '));
}

function loop() {
    time = (Date.now() - init) / 1000;
    draw();
    window.requestAnimationFrame(loop);
}

function resize() {
    w = window.innerWidth;
    h = window.innerHeight;
    diag = Math.hypot(w, h);
    draw();
}

window.addEventListener('resize', resize);
resize();
loop();

В этом коде мы используем функцию create для создания SVG-элементов, а затем создаем круги с помощью функции createCircle. Функция draw обновляет положение кругов, а loop обеспечивает плавную анимацию с помощью requestAnimationFrame.

Чтобы сделать нашу анимацию еще более интересной, добавим интерактивность:

window.addEventListener('wheel', e => {
    e.preventDefault();
    count = Math.max(1, count + Math.sign(e.deltaY));
    draw();
});

path.addEventListener('click', e => {
    e.stopPropagation();
    svg.style.fill = `hsl(${Math.random() * 360}, 100%, ${Math.random() * 20 + 30}%)`;
});

document.body.addEventListener('click', e => {
    e.stopPropagation();
    document.body.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, ${Math.random() * 20}%)`;
});

Теперь, при прокрутке колесика мыши, количество кругов будет изменяться. При клике на круги или фон, цвет SVG и фона будет случайным образом меняться, создавая уникальный визуальный эффект.

Используя SVG и JavaScript, мы создали захватывающую анимацию кругов, которая привносит динамику и интерактивность на ваш веб-сайт. Экспериментируйте с кодом, изменяйте цвета, размеры и добавляйте новые эффекты, чтобы создать уникальный дизайн. Живые SVG-круги – это отличный способ привлечь внимание пользователей и сделать ваш сайт запоминающимся!

Post Views: 38

Похожие записи