Question 210672 in CSS Question posted in
Some basic documentation can be found here.

CSS set the appropriate dasharray value on this animation

I would like to know how to set the appropiate value on dasharray to have the signature wrote from left to right and without overrun the SVG length… Is there a wasy aprt to check out different values?

/* take a bunch of the svg attributes and place them here for the sake of dryness */

path,
line {
  fill: none;
  stroke: #2a3745;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.stroke-ec {
  stroke-dasharray: 330;
  animation: write2 5s infinite linear;
}


/*  keyframes */

@keyframes write2 {
  0% {
    stroke-dashoffset: 340;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg id="signature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 100" xml:space="preserve">
    
    <path class="stroke-ec" d="M112.1,46.8c-10.1,3.1-20.7,4.4-31.3,4c-5.3-0.2-10.6-0.9-15.9-2c-1.2-0.3-2.4-0.5-3.6-0.8 c-0.6-0.2-1.2-0.3-1.8-0.5c-0.1,0-0.7-0.1-0.9-0.2c-0.3,0-0.4-0.2-0.3-0.5c-0.1-0.4,0-0.7,0.4-0.8c2.1-1.4,4.6-2.3,6.9-3.3 c9.6-4.2,19.9-7.2,30.4-7.4c8.3-0.2,18.3,1.2,23.8,8.2c3.4,4.2,4.1,10.3,1.7,15.2c-2.2,4.7-7.1,7.8-12.2,8.1 c0.2,0.3,0.4,0.5,0.6,0.8c3.3-8.4,8-16.1,13.8-23.1c2.8-3.4,5.9-6.7,8.9-10c3.1-3.2,6.1-6.5,9.5-9.4c4-3.4,8.4-6.2,12.9-9 c-0.3-0.3-0.5-0.7-0.8-1c-8.6,9-17.2,18-25.9,27.1c-0.3,0.3-0.3,0.8,0.1,1c1.6,0.7,3,0.1,4.4-0.5c2.2-0.9,4.3-1.9,6.5-2.9 c4.3-1.9,8.5-3.7,12.8-5.6c0.7-0.3,0.2-1.3-0.5-1.1c-6.1,1.5-11.5,5.1-15.3,10.2c-0.3,0.4,0.1,0.9,0.5,0.9 c18.2,1.3,36.4,1.9,54.7,1.8c5.2,0,10.4-0.1,15.6-0.2c0.8,0,0.8-1.3,0-1.2c-18.2,0.5-36.5,0.3-54.7-0.6 c-5.2-0.3-10.4-0.6-15.6-0.9c0.2,0.3,0.4,0.6,0.5,0.9c3.5-4.8,8.7-8.2,14.5-9.6c-0.2-0.4-0.3-0.8-0.5-1.1c-3.7,1.6-7.3,3.2-11,4.8 c-1.8,0.8-3.6,1.6-5.4,2.4c-0.9,0.4-1.8,0.8-2.7,1.2c-1,0.4-2.3,1.2-3.4,0.6c0,0.3,0.1,0.7,0.1,1c8.6-9,17.2-18,25.9-27.1 c0.5-0.5-0.1-1.4-0.8-1c-3.9,2.4-7.7,4.9-11.3,7.7c-3.7,2.9-7,6.3-10.2,9.7c-6.3,6.7-12.5,13.5-17.4,21.3 c-2.7,4.3-4.9,8.8-6.7,13.5c-0.1,0.4,0.2,0.8,0.6,0.8c4.6-0.3,9-2.5,11.8-6.2c3-4,3.9-9.5,2.3-14.2c-2.9-9-12.9-12.5-21.5-13.3 c-11.6-1-23.3,1.8-34,6.2c-2.7,1.1-5.3,2.3-7.9,3.5c-1.2,0.6-4.5,2-3,3.9c0.6,0.8,1.9,0.9,2.8,1.1c1.5,0.4,3,0.8,4.5,1.1 c2.8,0.6,5.7,1.1,8.6,1.4c13.2,1.6,26.7,0.4,39.5-3.4C113.2,47.8,112.9,46.6,112.1,46.8L112.1,46.8z"/>
</svg>

The stroke must be filled once and then animation restarts from left

Tags:

2

Answers


  1. 0

    To set the appropriate value for the stroke-dasharray property in order to have the signature wrote from left to right without exceeding the SVG length, you need to consider the length of the path.

    In the provided SVG code snippet, the stroke-dasharray property is set to 330, and the animation is defined to write the signature over a duration of 5s. However, the length of the path is not known from the given code. To determine the exact length of the path, you can use JavaScript or external tools. Here’s an example of how you can calculate the length of the path using JavaScript:

    // Get the length of the path 
const signaturePath = document.querySelector('#signature path');
const pathLength = signaturePath.getTotalLength();
console.log(pathLength); // Display the path length in the console
    <svg id="signature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 100" xml:space="preserve"> <!-- Add your SVG path here --> </svg>

    Once you have the length of the path, you can adjust the stroke-dasharray value accordingly to ensure the signature is written without exceeding the length of the path. The stroke-dasharray property defines the length of dashes and gaps in the stroke. To achieve the desired effect, you can experiment with different values until you find one that suits your needs.

    For example, if the calculated path length is 500, you could set stroke-dasharray to a value like 500 or 500 1000 to control the length of dashes and gaps in the stroke animation. Remember to update the CSS code in the SVG accordingly with the new stroke-dasharray value:

    By adjusting the stroke-dasharray value and experimenting with different lengths, you can achieve the desired effect of writing the signature from left to right without exceeding the length of the SVG.

    // Get the length of the path 
const signaturePath = document.querySelector('#signature path');
const pathLength = signaturePath.getTotalLength();
console.log(pathLength);
    .stroke-ec {
  stroke-dasharray: 500;
  /* Adjust the value as per your needs */
  animation: write2 5s infinite linear;
}
    <svg id="signature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 100" xml:space="preserve"> <!-- Add your SVG path here --> </svg>

    Once you have the length of the path, you can adjust the stroke-dasharray value accordingly to ensure the signature is written without exceeding the length of the path. The stroke-dasharray property defines the length of dashes and gaps in the stroke. To achieve the desired effect, you can experiment with different values until you find one that suits your needs. For example, if the calculated path length is 500, you could set stroke-dasharray to a value like 500 or 500 1000 to control the length of dashes and gaps in the stroke animation. Remember to update the CSS code in the SVG accordingly with the new stroke-dasharray value:

        .stroke-ec { 
    stroke-dasharray: 500; 
    /* Adjust the value as per your needs */ 
    animation: write2 5s infinite linear; 
    }

    By adjusting the stroke-dasharray value and experimenting with different lengths, you can achieve the desired effect of writing the signature from left to right without exceeding the length of the SVG.

    Login or Signup to reply.
  2. 0

    Your <path> is an outline: so it contains inner and outer contours

    signature

    So your animation will appear to run twice.
    You’ll need to draw a "inner/center" path for the stroke animation.

    <pathLength>: set relative/computed length

    From mdn docs

    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 way we can use relative dash-array values like so

    <path pathLength="100" d="" />  

stroke-dashoffset:100

    path,
line {
  fill: none;
  stroke: #2a3745;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.stroke-ec {
  stroke-dasharray: 100 100;
  animation: write2 5s infinite linear;
}

@keyframes write2 {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 100 100;
  }
}
    <svg id="signature" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 100" xml:space="preserve">

  <clipPath id="clip">
      <path  d="M207.1 44.6c-18.2 0.5-36.5 0.3-54.7-0.6c-4.8-0.3-9.6-0.6-14.4-0.8c1.7-2.2 3.7-4 6-5.4c2.4-1.1 4.9-2.2 7.3-3.3c0.2 0 0.3-0.1 0.5-0.1c0 0 0 0 0-0.1c0.1 0 0.2-0.1 0.3-0.1c0.7-0.3 0.2-1.3-0.5-1.1c-3.1 0.8-6 2.1-8.6 3.8c-0.9 0.4-1.8 0.8-2.7 1.2c-1.8 0.8-3.6 1.6-5.4 2.4c-0.9 0.4-1.8 0.8-2.7 1.2s-1.7 0.8-2.6 0.8c8.4-8.7 16.7-17.4 25.1-26.2c0.1-0.1 0.2-0.1 0.3-0.2s0-0.1-0.1-0.1c0.2-0.4-0.2-1-0.7-0.9c0 0 0 0 0 0s0 0 0 0s-0.1 0.1-0.2 0.1c-3.9 2.4-7.7 4.9-11.3 7.7s-7 6.3-10.2 9.7c-3.7 3.9-7.4 7.9-10.8 12.1c-3.9-6.7-12.6-9.5-20.1-10.2c-11.6-1-23.3 1.8-34 6.2c-2.7 1.1-5.3 2.3-7.9 3.5c-1.2 0.6-4.5 2-3 3.9c0.6 0.8 1.9 0.9 2.8 1.1c1.5 0.4 3 0.8 4.5 1.1c2.8 0.6 5.7 1.1 8.6 1.4c13.2 1.6 26.7 0.4 39.5-3.4c1.1-0.5 0.8-1.7 0-1.5c-10.1 3.1-20.7 4.4-31.3 4c-5.3-0.2-10.6-0.9-15.9-2c-1.2-0.3-2.4-0.5-3.6-0.8c-0.6-0.2-1.2-0.3-1.8-0.5c-0.1 0-0.7-0.1-0.9-0.2s-0.4-0.2-0.3-0.5c-0.1-0.4 0-0.7 0.4-0.8c2.1-1.4 4.6-2.3 6.9-3.3c9.6-4.2 19.9-7.2 30.4-7.4c8.3-0.2 18.3 1.2 23.8 8.2c0.5 0.6 0.9 1.3 1.3 2c-2.1 2.7-4.2 5.5-6 8.4c-2.7 4.3-4.9 8.8-6.7 13.5c-0.1 0.4 0.2 0.8 0.6 0.8c4.6-0.3 9-2.5 11.8-6.2c3-4 3.9-9.5 2.3-14.2c-0.2-0.6-0.4-1.2-0.7-1.7c0.4-0.5 0.9-1.1 1.3-1.6c2.8-3.4 5.9-6.7 8.9-10s6.1-6.5 9.5-9.4c2.7-2.3 5.5-4.2 8.4-6.1c-7.4 7.7-14.7 15.4-22.2 23.2c-0.3 0.3-0.3 0.8 0.1 1c1.6 0.7 3 0.1 4.4-0.5c2.2-0.9 4.3-1.9 6.5-2.9c0.1 0 0.1-0.1 0.2-0.1c-1.2 1.1-2.2 2.3-3.2 3.6c-0.3 0.4 0.1 0.9 0.5 0.9c18.2 1.3 36.4 1.9 54.7 1.8c5.2 0 10.4-0.1 15.6-0.2c0.8 0 0.8-1.3 0-1.2zm-85.6 14.1c-2.1 4.4-6.5 7.4-11.2 8c2.9-7.1 6.8-13.7 11.5-19.8c1.6 3.7 1.5 8.1-0.3 11.8z" />
  </clipPath>
  
  <path pathLength="100" clip-path="url(#clip)" class="stroke-ec" id="stroke" d="M112.9 47.4c-24.7 8.3 -56.1 1.9 -56.1 -0.3s22.5 -12.2 40.9 -12.2c22.1 0 25.8 11.9 25.8 17.2c0 12.6 -11.5 15 -14 15c0 0 5.1 -15.7 20.4 -31c8.1 -8 23.2 -21.4 24.4 -20.3s-27.2 27.6 -25.4 27.6c1.1 0 21.1 -9.3 22.4 -9.6c1.3 -0.3 -12.6 4.5 -14.4 9.7c0 0 18.4 1.9 34.8 1.9s36.4 -0.3 36.4 -0.3" />
  

</svg>

    The solid outline path can be used as a clip-path to emulate variable stroke widths.
    For a perfect result you’ll need to tweak the animated "center" stroke to prevent undesired effects.

    Further reading

    See ccprog’s great tutorial on css-tricks "Animate Calligraphy with SVG"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search