Svg Stroke-Dasharray Offset Not Consistent

Animating svg with stroke-dashoffset doesn't go smooth

You miscalculated the length of the perimeter of the rectangle

If it's rough, then you need to consider this (width +height) * 2 = 1952px

The JS method getTotalLength() will help you calculate exactly the perimeter, taking into account the roundings.

Happened with rounding ~= 1946px

.modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        
        border-radius: 3px;
        }
        rect {
            stroke: silver;
            stroke-width: 6px;
            stroke-dasharray: 1946; // total of dialog width and height (not sure what value to add)
            stroke-dashoffset: 1946;
            animation: sketchIn 5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
            }
        @keyframes sketchIn {
    0% {
        stroke-dashoffset: 1946;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
    

<div id="modal-close-default" class="uk-modal">
   <div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
   
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 600 376" width="600" height="376"  >
         <rect id="rect" x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
      </svg>
   </div>
</div> 
<script>
let total = rect.getTotalLength();
console.log(total)
</script>

stroke-dashoffset doesnt work for me

The animation of stroke-dashoffset works together with stroke-dasharray and you are also missing the @keyframes to actual have the animation:

path {
  stroke-dasharray: 6630;
  stroke-dashoffset: 6630;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Here is the update to your codepen:

https://codepen.io/anon/pen/mMgQMY

Specific Path Not Animating Using Dashoffset as Expected

You will need to set the fill:none to the svg to aniamtion take place...also a stroke and stroke-width...

...actually the idea is here to animate your stroke

Stack Snippet

svg {  padding: 20px;}
path {  stroke-dasharray: 415.9850769042969;  stroke-dashoffset: 415.9850769042969;  animation: letterB 5s linear forwards infinite;  -webkit-animation: letterB 5s linear forwards infinite;}
@keyframes letterB {  0% {    stroke-dashoffset: 415.9850769042969;  }  100% {    stroke-dashoffset: 0;  }}
@-webkit-keyframes letterB {  0% {    stroke-dashoffset: 415.9850769042969;  }  100% {    stroke-dashoffset: 0;  }}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.67 67.06">  <path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"  fill="none" stroke-width="2" stroke="#000000"></path></svg>

svg stroke-dashoffset animation not working in firefox

https://jsfiddle.net/19jdbu3f/

i reduced the problem to focus on the animated stroke, worked on firefox without prefixes

@keyframes draws {
    0% {
        stroke-dashoffset: -6000;
    }

    100 {
        stroke-dashoffset: 0;
    }
}

Stroke animation not happening

As other answers have hinted, but not really explained, the problem is that your path is not in the correct form required to do stroke animation.

SVG paths can have "strokes" and "fills". The "stroke" is a line drawn around the outside of a shape. The "fill" is what the inside of the shape is filled with.

This animation technique operates on the stroke of a shape. But your shape doesn't have a stroke. It just has a black fill. What appears to be a line, is actually a long thin shape that looks like a line.

To see what I mean, hover over your zoomed in shape below to see what it looks like when we add a red stroke.

svg:hover path {  stroke: red;}

<svg viewBox="438 402 170 40">  <path fill="black" d="M590.94,410.83c-0.27-0.11-0.56-0.16-0.85-0.14l-18.37,1.11l-18.77-5.92 c-0.64-0.2-1.33-0.06-1.83,0.37l-18.61,15.82l-21.47-8.61c-0.36-0.15-0.76-0.18-1.15-0.09l-23.31,5.27 c-0.23,0.05-0.44,0.14-0.63,0.27l-21.47,14.11l-21.42,4.45c-1.03,0.21-1.69,1.21-1.47,2.23s1.23,1.67,2.26,1.45l21.78-4.52 c0.24-0.05,0.46-0.14,0.67-0.28l21.49-14.13l22.38-5.07l21.99,8.82c0.66,0.27,1.43,0.14,1.97-0.32l18.68-15.89l18.09,5.71 c0.23,0.07,0.46,0.1,0.7,0.09l18.29-1.1l15.67,6.38l0.68-3.8L590.94,410.83z"/></svg>

---

Related Topics