I am currently working on animating stroke-dashoffset for two different paths to create a drawing effect. There are buttons provided to adjust the stroke-dashoffset values.
My goal is to ensure that the filled paths align vertically as they progress. Is this achievable?
https://i.sstatic.net/PIhiI.png
However, in the current demo, the stroke-dashoffsets of the two paths do not match because the jagged path is longer.
I would like to find a solution that does not involve simply placing one path over the other, as it would eliminate the unique "drawing" animation look and both paths have rounded ends.
const btnAdd = document.querySelector(".btn-add");
const btnSub = document.querySelector(".btn-sub");
const line = document.querySelector(".line");
const jaggedLine = document.querySelector(".jagged-line");
const lineLength = line.getTotalLength();
const jaggedLineLength = jaggedLine.getTotalLength();
line.setAttribute("stroke-dasharray", lineLength);
jaggedLine.setAttribute("stroke-dasharray", jaggedLineLength);
line.setAttribute("stroke-dashoffset", lineLength);
jaggedLine.setAttribute("stroke-dashoffset", jaggedLineLength);
let progress = 0;
const updateSVG = () => {
line.setAttribute("stroke-dashoffset", lineLength - progress);
jaggedLine.setAttribute("stroke-dashoffset", jaggedLineLength - progress);
};
btnAdd.addEventListener("click", () => {
progress++;
updateSVG();
});
btnSub.addEventListener("click", () => {
progress--;
updateSVG();
});.svg {
margin-top: 50px;
} <button class="btn-add">+</button>
<button class="btn-sub">-</button>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.76 45.715" height="172.781" width="278.7779">
<g fill="none" stroke="#00aad4" stroke-linecap="round">
<path
d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
opacity=".165" stroke-width=".965" stroke-linejoin="round" />
<path d="M.8825.8825h71.995" opacity=".1648" stroke-width=".965" />
<path class="jagged-line"
d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
stroke-width="1.765" stroke-linejoin="round" />
<path class="line" d="M.8825.8825h71.995" stroke-width="1.765" />
</g>
</svg>
</div>