Почему border-image + анимированный SVG лагает!?

Question

[vahromeevilya-widestudio]

По ТЗ нужно, чтобы синие линии у карточки моргали, но когда я их анимировал ( в svg ), то жутко начинает лагать компьютер/телефон с открытой вкладкой сайта, где происходит анимация.

Пощупать здесь
https://codepen.io/vahromeevilya-widestudio/pen/oNEPwZX

Подскажите как можно избавиться от лагов и при этом сохранить функционал.

Answer 1

[RAX7]

Убирай всю анимацию и фильтры из svg и переноси в css.
Примерно так:

Comments

[vahromeevilya-widestudio]

А можете пожалуйста ссылку скинуть, а то не грузится здесь почему то

[RAX7]

vahromeevilya-widestudio,

// This is how we allow editing the SVG source in Codepen and jsfiddle.net:
const svg = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M624 453.026L535.735 530L238.694 530L159.677 461.09L4.00049 461.09L4.00004 -1.95293e-06L624 6.10351e-05L624 453.026Z" fill="#00C3FF" fill-opacity="0.1" />
  <path d="M624 453.026L624.657 453.779L625 453.48L625 453.026L624 453.026ZM535.735 530L535.735 531L536.11 531L536.393 530.754L535.735 530ZM238.694 530L238.037 530.754L238.319 531L238.694 531L238.694 530ZM159.677 461.09L160.334 460.337L160.051 460.09L159.677 460.09L159.677 461.09ZM4.00049 461.09L3.00049 461.09L3.00049 462.09L4.00049 462.09L4.00049 461.09ZM4.00004 -1.95293e-06L4.00004 -1L3.00004 -1L3.00004 -9.95551e-07L4.00004 -1.95293e-06ZM624 6.10351e-05L625 6.06919e-05L625 -0.999939L624 -0.999939L624 6.10351e-05ZM623.343 452.272L535.078 529.246L536.393 530.754L624.657 453.779L623.343 452.272ZM535.735 529L238.694 529L238.694 531L535.735 531L535.735 529ZM239.351 529.246L160.334 460.337L159.019 461.844L238.037 530.754L239.351 529.246ZM159.677 460.09L4.00049 460.09L4.00049 462.09L159.677 462.09L159.677 460.09ZM5.00049 461.09L5.00004 -2.91031e-06L3.00004 -9.95551e-07L3.00049 461.09L5.00049 461.09ZM4.00004 0.999998L624 1.00006L624 -0.999939L4.00004 -1L4.00004 0.999998ZM623 6.13784e-05L623 453.026L625 453.026L625 6.06919e-05L623 6.13784e-05Z" fill="white" />
  <path d="M223.331 530.023L182.562 530.023L112.461 471.068L153.231 471.068L223.331 530.023Z" fill="#00C3FF" />
  <path d="M169.133 530.023L128.364 530.023L58.2633 471.068L99.0324 471.068L169.133 530.023Z" fill="#00C3FF" />
  <path d="M115.727 530.023L74.9579 530.023L4.85752 471.068L45.6267 471.068L115.727 530.023Z" fill="#00C3FF" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M34.3616 30L34.3616 441L37.5983 441V440.996L166.941 440.996L235.009 499.486L235.009 499.691L543.652 499.691L543.652 499.62L624.984 428L625.236 428L625.236 427.778L625.262 427.755L625.236 427.726L625.236 86.9949L622 86.9949L622 426.419L542.466 496.454L236.334 496.454L167.983 437.721L167.951 437.76L37.5983 437.76L37.5983 33.2368L592.117 33.2368L592.117 141.763L129.299 141.763L129.299 145L592.117 145L595.354 145L595.354 30L592.117 30L37.5983 30L34.3616 30Z" fill="#00C3FF" />
</svg>
`;

// A dirty trick to load the above SVG into the document
const blob = new Blob([svg], {type: 'image/svg+xml'})
const svgUrl = URL.createObjectURL(blob);
document.querySelectorAll('.test').forEach(item => {
  item.style.setProperty('--border-image-url', `url(${svgUrl})`);
});

body {
  background: #001031;
}

.tests {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.test {
  position: relative;
	width: 620px;
	height: 530px;
}

.test::before,
.test::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-image: var(--border-image-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  z-index: -1;
  animation: opacity 3s infinite
}

.test::before {
  filter: blur(5px);
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[vahromeevilya-widestudio]

RAX7, Огромное спасибо, а если не сложно могли бы вы допилить пример, чтобы только линия моргала? Будет вообще идеально, а то я пока сам не знаю как это сделать

[RAX7]

vahromeevilya-widestudio,
https://jsfiddle.net/sf1qkbgx/1/

// This is how we allow editing the SVG source in Codepen and jsfiddle.net:
const svg1 = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M624 453.026L535.735 530L238.694 530L159.677 461.09L4.00049 461.09L4.00004 -1.95293e-06L624 6.10351e-05L624 453.026Z" fill="#00C3FF" fill-opacity="0.1" />
  <path d="M624 453.026L624.657 453.779L625 453.48L625 453.026L624 453.026ZM535.735 530L535.735 531L536.11 531L536.393 530.754L535.735 530ZM238.694 530L238.037 530.754L238.319 531L238.694 531L238.694 530ZM159.677 461.09L160.334 460.337L160.051 460.09L159.677 460.09L159.677 461.09ZM4.00049 461.09L3.00049 461.09L3.00049 462.09L4.00049 462.09L4.00049 461.09ZM4.00004 -1.95293e-06L4.00004 -1L3.00004 -1L3.00004 -9.95551e-07L4.00004 -1.95293e-06ZM624 6.10351e-05L625 6.06919e-05L625 -0.999939L624 -0.999939L624 6.10351e-05ZM623.343 452.272L535.078 529.246L536.393 530.754L624.657 453.779L623.343 452.272ZM535.735 529L238.694 529L238.694 531L535.735 531L535.735 529ZM239.351 529.246L160.334 460.337L159.019 461.844L238.037 530.754L239.351 529.246ZM159.677 460.09L4.00049 460.09L4.00049 462.09L159.677 462.09L159.677 460.09ZM5.00049 461.09L5.00004 -2.91031e-06L3.00004 -9.95551e-07L3.00049 461.09L5.00049 461.09ZM4.00004 0.999998L624 1.00006L624 -0.999939L4.00004 -1L4.00004 0.999998ZM623 6.13784e-05L623 453.026L625 453.026L625 6.06919e-05L623 6.13784e-05Z" fill="white" />
  <path d="M223.331 530.023L182.562 530.023L112.461 471.068L153.231 471.068L223.331 530.023Z" fill="#00C3FF" />
  <path d="M169.133 530.023L128.364 530.023L58.2633 471.068L99.0324 471.068L169.133 530.023Z" fill="#00C3FF" />
  <path d="M115.727 530.023L74.9579 530.023L4.85752 471.068L45.6267 471.068L115.727 530.023Z" fill="#00C3FF" />
</svg>`;

const svg2 = `
<svg width="630" height="535" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.3616 30L34.3616 441L37.5983 441V440.996L166.941 440.996L235.009 499.486L235.009 499.691L543.652 499.691L543.652 499.62L624.984 428L625.236 428L625.236 427.778L625.262 427.755L625.236 427.726L625.236 86.9949L622 86.9949L622 426.419L542.466 496.454L236.334 496.454L167.983 437.721L167.951 437.76L37.5983 437.76L37.5983 33.2368L592.117 33.2368L592.117 141.763L129.299 141.763L129.299 145L592.117 145L595.354 145L595.354 30L592.117 30L37.5983 30L34.3616 30Z" fill="#00C3FF" />
</svg>`;

// A dirty trick to load the above SVG into the document
const blob1 = new Blob([svg1], {type: 'image/svg+xml'});
const blob2 = new Blob([svg2], {type: 'image/svg+xml'});

const svg1Url = URL.createObjectURL(blob1);
const svg2Url = URL.createObjectURL(blob2);

document.querySelectorAll('.test').forEach(item => {
  item.style.setProperty('--border-image-1-url', `url(${svg1Url})`);
  item.style.setProperty('--border-image-2-url', `url(${svg2Url})`);
});

body {
  background: #001031;
}

.tests {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.test {
  position: relative;
	width: 620px;
	height: 530px;
}

.test::before,
.test::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-image: var(--border-image-1-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  z-index: -1;
  
}

.test::before {
  filter: drop-shadow(0 0 4px #00C3FF);
  border-image: var(--border-image-2-url) 152 10 110 595 fill / 152px 10px 110px 595px;
  animation: opacity 3s infinite;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[vahromeevilya-widestudio]

RAX7, Вы волшебник, а я неделю пытался сам найти решение. Еще раз огромная благодарность

[RAX7]

vahromeevilya-widestudio, я месяц назад видел ваш вопрос с этим дизайном карточек https://qna.habr.com/q/1154278
Тогда же сделал набросок на js, но показывать не стал, думал может дизайнер одумается и сделает чего попроще.

Кстати, сочетание анимации и backdrop-filter приводят к повышенному жору GPU, так что советую не увлекаться свестоперделками.

[vahromeevilya-widestudio]

RAX7, Дизайнер не то что не поменял мнение, а местами даже усложнил задачу xD, но вы мне сейчас настолько сильно помогли, что даже не знаю как отблагодарить. Потому что позиционирование линий относительно блока никогда не получалось идеально, все время пиксель там пиксель тут. А этот код пен что вы сейчас скинули, даже не могу представить откуда у вас такие знания и где вы этому научились, по любому в Хогвардсе ) Если у меня будут еще трудности можно вас приглашать как эксперта?

[RAX7]

vahromeevilya-widestudio, у меня призывалка в качестве эксперта отключена =) Задавайте новые вопросы как обычно, а я если буду проходить мимо обязательно помогу чем смогу.

[vahromeevilya-widestudio]

RAX7, Отлично =D

Answer 2

[imko]

Вот почему :D

Comments

[imko]

Урезай визуал, фильтры и так далее

[vahromeevilya-widestudio]

imko, Так в том то и проблема, что визуал резать нельзя. Мне необходимо сохранить все полностью как есть, за исключением лагов xD. Я пробовал убирать все кроме данной линии, но тоже не сильно помогало. Вот если бы был какой нибудь аналог свойства border-image и при этом с нормально работающей анимацией... Есть еще варианты как это исправить не убавляя визуал?

[imko]

vahromeevilya-widestudio, поставить статичную картинку, с уже зарендереными эффектами и просто менять ей opacity

[vahromeevilya-widestudio]

imko, так и делал, убирал анимацию из svg, оставлял все остальное, затем сверху доп элементом делал эту самую линию и позиционировал. И вот тут вторая проблема. Не получается во всех случаях попасть пиксель в пиксель, иногда это просто невозможно иногда трудно, а иногда получается. В общем достаточно криво получается вставить полоску.