Hi I’m trying to make a white background color between my two paths and I want to make it perfectly line-aligned and that’s why I’m stuck, I don’t know how to do it. Do I have to do a different path or what?
If someone helps I will be very happy!
Thanks a lot <3
<section style="height: 150vh; background-color: black;">
<div id="svg-container2">
<svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
<path id="my-path-2" class="path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
</svg>
</div>
<svg viewBox="0 0 1440 320">
<path id="my-path" class="path-" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
</svg>
</section>
svg {
width: 100%;
height: 30%;
z-index: -1;
}
path {
stroke: #0099ff;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
fill: none;
}
const path1 = document.querySelector("#my-path");
const pathLength1 = path1.getTotalLength();
path1.style.strokeDasharray = pathLength1;
path1.style.strokeDashoffset = pathLength1;
const path2 = document.querySelector("#my-path-2");
const pathLength2 = path2.getTotalLength();
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;
window.addEventListener("scroll", () => {
const scrollTop = window.pageYOffset;
const scrollHeight = document.body.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / scrollHeight;
const drawLength1 = pathLength1 * scrollFraction;
path1.style.strokeDashoffset = pathLength1 - drawLength1;
let drawLength2 = pathLength2 * scrollFraction;
let offset2 = pathLength2 - drawLength2;
if (scrollFraction === 1) {
offset2 = pathLength2 - 1;
}
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = offset2;
if (drawLength2 <= 0) {
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;
}
});