Прелоадер с текстом или логотипом

<!--Прелоадер с текстом или логотипом
https://sonneto-design.ru/-->
<div class="tistols-pre03-wrap">
<svg id="svg-bg" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<path id="svg" d="M0,1005S175,995,500,995s500,5,500,5V0H0Z"></path>
</svg>
<!-- Указываем ссылку на логотип -->
<div class="tistols-pre03-wrap-heading">
<span class="tistols-logo"><h2><img id='img' src='https://static.tildacdn.com/tild6133-3538-4562-b434-323935376133/svgexport-1_66_1.svg' style='left: 50%;top:50%;'></h2></span>
</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>

<style>


.tistols-pre03-wrap-heading span {
overflow: hidden;
/*display: block;*/
position: absolute;
top: 50%;
height: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
}
.tistols-pre03-wrap {
position: absolute;
z-index: 10000;
height: 100vh;
width: 100%;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
background: transparent;
}
.tistols-pre03-wrap svg {
position: absolute;
top: 0;
width: 100vw;
height: 110vh;
}

.tistols-pre03-wrap svg path {
fill:#E1FC52;
}

.tistols-pre03-wrap .tistols-pre03-wrap-heading h1 {
font-size: 120px;
z-index: 10001;
color: #E1FC52;/* Цвет фона */
text-transform: uppercase;
font-weight: lighter;
font-family: 'Ogg';
white-space: nowrap;
}

.tistols-pre03-wrap .tistols-pre03-wrap-heading h2 img {
max-width: 600px;
width: 85%;
margin: 0 auto;
}


</style>

<script>
/** @format */
const svgpic = document.getElementById('svg');
const tl2 = gsap.timeline({
onComplete: () => {
document.body.style.overflowY = 'visible';
},
});

const curve2 = 'M0 502S175 272 500 272s500 230 500 230V0H0Z';
const flat2 = 'M0 2S175 1 500 1s500 1 500 1V0H0Z';

tl2.from('.tistols-pre03-wrap-heading h2', {
delay: 0.5,
y: 1000,
skewY: 20,
}).to('.tistols-pre03-wrap-heading h2', {
delay: 0.5,
y: -1000,
skewY: 20,
});
tl2.to(svgpic, {
duration: 0.8,
attr: { d: curve2 },
ease: 'power2.easeIn',
}).to(svgpic, {
duration: 0.8,
attr: { d: flat2 },
ease: 'power2.easeOut',
});
tl2.to('.tistols-pre03-wrap', {
y: -1500,
});
tl2.to('.tistols-pre03-wrap', {
zIndex: -1,
display: 'none',
});
tl2.from(
'.container',
{
y: 100,
opacity: 0,
},
'-=1.5'
);
tl2.from(
'nav',
{
duration: 1,
opacity: 0,
},
'-=1.2'
);

</script>