Здравствуйте!
На сайте использую SVG filter (как вид заднего фона), но он жутко нагружает процессор и тормозит во всех браузерах (кроме оперы)
Пытался изменить разные значения в opacity ---> filter="url(#filter0_f)" opacity="0.9" но безрезультатно, подскажите как убрать сильную нагрузку но при этом оставить фильтр размытия?
Вот код примера
<div class="ba-page-bg">
<svg class="ba-bg-line show-for-large" height="400" viewbox="0 0 10 400" width="10" xmlns="https://www.w3.org/2000/svg">
<path class="ba-bg-line__path" d="M5 400L5 -1.19209e-05" opacity="0.4" stroke="url(#bg_line_paint)" stroke-dasharray="1 5" stroke-width="10"></path>
<path class="ba-bg-line__path ba-bg-line__path--serv" d="M5 400L5 -1.19209e-05" opacity="0.4" stroke="url(#bg_line_paint_serv)" stroke-dasharray="1 5" stroke-width="10"></path>
<path class="ba-bg-line__path ba-bg-line__path--bus" d="M5 400L5 -1.19209e-05" opacity="0.4" stroke="url(#bg_line_paint_bus)" stroke-dasharray="1 5" stroke-width="10"></path>
<path class="ba-bg-line__path ba-bg-line__path--tech" d="M5 400L5 -1.19209e-05" opacity="0.4" stroke="url(#bg_line_paint_tech)" stroke-dasharray="1 5" stroke-width="10"></path>
<defs>
<lineargradient gradientunits="userSpaceOnUse" id="bg_line_paint" x1="5" x2="5" y1="400" y2="0">
<stop offset="0" stop-color="#5FC9F8" stop-opacity="0"></stop>
<stop offset="0.497958" stop-color="#5FC9F8"></stop>
<stop offset="1" stop-color="#5FC9F8" stop-opacity="0"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="bg_line_paint_serv" x1="5" x2="5" y1="400" y2="0">
<stop offset="0" stop-color="#7DDB32" stop-opacity="0"></stop>
<stop offset="0.497958" stop-color="#7DDB32"></stop>
<stop offset="1" stop-color="#7DDB32" stop-opacity="0"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="bg_line_paint_bus" x1="5" x2="5" y1="400" y2="0">
<stop offset="0" stop-color="#FFB31F" stop-opacity="0"></stop>
<stop offset="0.497958" stop-color="#FFB31F"></stop>
<stop offset="1" stop-color="#FFB31F" stop-opacity="0"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="bg_line_paint_tech" x1="5" x2="5" y1="400" y2="0">
<stop offset="0" stop-color="#AD7BFF" stop-opacity="0"></stop>
<stop offset="0.497958" stop-color="#AD7BFF"></stop>
<stop offset="1" stop-color="#AD7BFF" stop-opacity="0"></stop>
</lineargradient>
</defs>
</svg>
<svg class="ba-bg-line ba-bg-line--right show-for-large" height="400" viewbox="0 0 10 400" width="10" xmlns="https://www.w3.org/2000/svg">
<path d="M5 400L5 -1.19209e-05" opacity="0.4" stroke="url(#bg_line_paint)" stroke-dasharray="1 5" stroke-width="10"></path>
</svg>
<div class="ba-shape show-for-medium">
<svg class="ba-shape__svg" data-bg-shape="" height="682" style="fill: var(--color, #5FC9F8);" viewbox="0 0 1121 682" width="1121" xmlns="https://www.w3.org/2000/svg">
<g filter="url(#filter0_f)" opacity="0.9">
<path d="M247 586.501C162.2 619.301 117 540.168 105 496.501C116.5 479.168 158.5 430.201 234.5 373.001C329.5 301.501 280 223.001 354.5 141.001C429 59.001 581.554 248.652 686 209.001C1010 86.001 915.855 266.784 949.5 357.001C996 499.001 1030.37 559.555 963.5 580.501C873.108 608.817 626 349.501 542.5 326.001C459 302.501 353 545.501 247 586.501Z" data-bg-shape-path></path>
</g>
<defs>
<filter color-interpolation-filters="sRGB" filterunits="userSpaceOnUse" height="714.054" id="filter0_f" width="1135.85" x="-15" y="0.203125">
<feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
<feblend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"></feblend>
<fegaussianblur result="effect1_foregroundBlur" stddeviation="60"></fegaussianblur>
</filter>
</defs>
</svg>
</div>
<svg class="ba-grid" height="720" width="1280"><use xlink:href="#bg-grid"></use></svg>
</div>
Средний
