CODEWITHSUNDEEP
javascripthtmlcsssvg
Caleb Taylor
Caleb Taylor

Reputation: 3230

SVG Matching stroke-dashoffset from two different paths

I have two different paths where I'm animating the stroke-dashoffset, which gives the drawing effect. There's two buttons that increase/decrease the stroke-dashoffset.

What I'm trying to achieve is by matching the filled paths aligned vertically throughout the whole progression. Is this even possible?

enter image description here

Currently in the demo, the stroke-dashoffsets from both paths don't match since the jagged path has greater length.

I would like the avoid the solution where it involves placing a main path on top of the other two, since it would get rid of the "drawing" animation look on the jagged line 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>

Upvotes: 0

Views: 610

Answers (1)

Paulie_D
Paulie_D

Reputation: 115066

There is an SVG attribute pathLength which allows us to set the path length.

The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength/(computed value of path length).

This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. stroke-dasharray, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.

MDN

If we set the same pathLength to both the animation become simple.

.svg {
  display: inline-block;
  margin: 1em;
}

.line,
.jagged-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<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" pathLength="100"/>
        <path class="line" d="M.8825.8825h71.995" stroke-width="1.765" pathLength="100"/>
      </g>
    </svg>
</div>

Upvotes: 2

Related Questions