Как улучшить производительность очень медленного, анимированного фона SVG? ⇐ Html

[Anonymous]

Я создал интересную анимацию SVG, имитируя светящиеся лифты, летящие вверх и вниз на заднем плане. Этот SVG изготовлен из определенного размера, затем он повторяется с помощью Facy Repeat CSS. Я
Анимация, когда при этом, в ходе хрома, на всей странице, в хромах и абсолютно непригодна для Firefox (где, кажется, не имеет какого-либо ускорения GPU)
У вас есть предложения. CPU & GPU, здесь:
https://codepen.io/helpingothers/pen/myymgpy
i am:

• minififing the svg с помощью: https://jakearchibrald.github.io/svgomgbomg/> SVG в действительную фоновую строку с: https://codepen.io/yoksel/pen/mwkekk

Вот весь Svg

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

.container {
z-index: -1;
position: absolute;
top: 0;
margin: -1rem; // This is to compensate 1rem of padding on body
height: -webkit-fill-available;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
background: #000;
svg {
position: absolute;
height: 100%;
width: 100%;
}
}
.lines {
opacity: 0.05;
}
.line {
fill-rule: evenodd;
clip-rule: evenodd;
fill: var(--color-accent-darker);
}
.lights {
opacity: 0.9;
}
.light {
fill-rule: evenodd;
clip-rule: evenodd;
fill: var(--color-accent-lighter);
// All animations are linear and loop forever.
animation-timing-function: linear;
animation-iteration-count: infinite;
}

// Helper function to return a random integer between $min and $max (inclusive)
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}

// Total number of light elements (adjust as needed)
$light-count: 17;

// Keyframe animations
@keyframes animateDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(100%);
}
}
@keyframes animateUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(-100%);
}
}

// Assign a random animation-duration to each light element.
// (This loop assumes that all .light elements are direct children of .lights.)
.lights {
@for $i from 1 through $light-count {
.light:nth-child(#{$i}) {
// Generates a random duration between 1 and 20 seconds.
animation-duration: #{random_range(30, 160)}s;
//transform: translateZ(#{random_range(1000, 2000)}px) scale(5);
}
}
}

// Now assign the proper animation-name based on the direction.
// In your original JS, itemsDown and itemsUp correspond to different sets of elements.
// Here we assume that the down-moving lights have an extra class of .down and up-moving lights .up.

.light.down {
animation-name: animateDown;
}

.light.up {
animation-name: animateUp;
}









































< /code>
 Здесь неофилифицированная автономная версия с Svg-in-css с грубым счетчиком FPS:  < /h3>









style="
position: fixed;
background: canvastext;
color: canvas;
border: .5rem solid canvastext;
overflow: hidden;
">
?



let frame_counter = 0;
let last_sec = performance.now();
let last_dpx = '';
function fps() {
++frame_counter;
let now = performance.now();
let oversec = now - last_sec - 1000;
if(oversec >= 0) {
el_fps.value = frame_counter + ' fps';
let new_dpx = dpx();
fpsgraph.insertAdjacentHTML(
'afterbegin',
`      width: ${frame_counter}px;
border:1px solid canvas;">

${ last_dpx != new_dpx
? '@ ' + (last_dpx = new_dpx).toLocaleString()+' dpx'
: ''}
`
);
frame_counter = 0;
last_sec = now - oversec;
}
requestAnimationFrame(fps);
}
onload = fps;
function dpx() {
return Math.round(devicePixelRatio**2 * window.innerWidth * window.innerHeight);
}

Подробнее здесь: https://stackoverflow.com/questions/795 ... background