Сделать анимированный SVG фон из квадратов

#javascript #svg #анимация

Необходимо написать скрипт, который создаёт фон из квадратов похожих цветов, со случайным
поворотом.

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

Ответы

Ответ 1

Решение на основе библиотеки SVG.js



/* компоненты базового цвета */
var rgb = [255,201,218];

/* получаем холст */
var svg = document.getElementById("svg1");

/* добавляем квадрат с задаными параметрами */
function AddRect(x, y, width, height) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  /* вычисляем случайную компоненту цвета близкую к базовой */
  function randomColorComponent(start,dist) {
     var rez = start + Math.floor(Math.random() * dist);
     if(rez > 255) {
       rez = 255;
     }
     return rez;
  }

  /* создаём случайный цвет близкий к базовому */
  var rgb2 = rgb.map(x => randomColorComponent(x, 30));
  var color = `rgb(${ rgb2.join(",") })`;

  rect.setAttribute("fill", color);
  /* кастомный атрибут, для восстановления цвета */
  rect.setAttribute("mycolor", color);
  rect.setAttribute("stroke", "silver");
  rect.setAttribute("x", x);
  rect.setAttribute("y", y);
  rect.setAttribute("width", width);
  rect.setAttribute("height", height);
  rect.setAttribute("class", "rect1");

  /* случайный поворот */
  var rot = Math.random() * 360;
  rect.setAttribute(
    "transform",
    " rotate(" + rot + " " + (x + width / 2) + " " + (y + height / 2) + ")"
  );

  /* вешаем обработчик */
  rect.addEventListener("mouseover", mouseOverSquare);

  /* добавляем на холст */
  document.getElementById("svg1").appendChild(rect);
}

/* обработчик наведения мыши на квадрат */
function mouseOverSquare() {
  /* получаем объект SVG.js из текущего */
  var rect1 = SVG.adopt(this);

  /* останавливаем анимацию которая могла быть запущена ранее с сохранением параметров  */
  rect1.finish();

  /* перемещаем квадрат наверх холста для большей красоты анимации */
  this.remove();
  svg.append(this);

  var rot = (Math.random() - 0.5) * 90;

  /* извлекаем цвет для возврата из кастомного атрибута */
  var color = this.getAttribute("mycolor");

  /* заполняем новым цветом */
  rect1.fill("rgb(87, 86, 255)");

  /* анимируем варщение и возвращение цвета */
  rect1.animate(1100, "-").rotate(rot).attr({
    "fill": color
  });
}

/* заполнение холста квадратами */
function FillArea() {
  var style = window.getComputedStyle(svg);

  var width = parseInt(style.width);
  var height = parseInt(style.height);

  var rectWidth = 24;
  var rectHeight = 24;

  var vxx = 27;
  var vyy = 27;

  for (var x = -7; x < width; x += vxx) {
    for (var y = -7; y < height; y += vyy) {
      AddRect(x, y, rectWidth, rectHeight);
    }
  }
}



FillArea();
#svg1 {
  width: 100%;
  height: 175px;
  background-color: rgb(255,201,218);
}







Полный код примера - ссылка