Html Question posted in
Some basic documentation can be found here.

Html – I want a signature animation on my svg i have tried but only half of its is showing?

<svg xmlns="http://www.w3.org/2000/svg" width="282" height="122" viewBox="0 0 282 122" fill="none">
  <!-- Signature Path -->
  <path id="signature" d="M59.1294 91.0229C59.2018 87.6683 57.6122 84.619 56.5486 81.5202C54.828 76.5073 53.9153 71.3684 52.7901 66.1947C48.7362 47.5558 44.4087 28.9291 39.3774 10.5267C37.5692 3.91298 36.1171 8.64639 34.837 12.4986C32.4899 19.5623 30.9263 27.1572 29.0077 34.3523C27.1718 41.2371 26.3716 48.4466 24.7866 55.2446C22.84 63.5931 21.5986 72.0237 19.7423 80.3835C19.2622 82.5455 16.7243 96.5695 19.769 94.469C23.0249 92.2228 28.2772 89.4289 30.6095 86.3298C31.8945 84.6223 34.839 81.0546 34.0555 78.638C32.5327 73.9409 23.7549 70.6068 19.9807 68.2569C17.0475 66.4308 14.0207 65.0872 10.602 64.7279C9.42022 64.6036 6.21447 64.835 5.35755 63.9882C3.77332 62.4227 3.72734 61.5739 3.95931 59.3668C4.39759 55.1969 8.95733 56.1224 12.3685 56.4356C36.6373 58.664 62.3092 55.5404 86.4512 54.237C91.0087 53.991 83.1485 57.1707 81.2589 57.9302C72.4695 61.4631 75.2696 76.1022 84.2826 77.5587C92.4344 78.8761 91.2261 46.4935 93.3015 54.486C94.6132 59.5375 94.3991 65.1649 96.1407 70.0446C98.0208 75.3128 98.4224 77.5413 102.803 72.5345C105.274 69.71 107.509 66.7204 109.318 63.4227C110.749 60.8149 110.89 58.3282 110.411 62.8782C110.136 65.4934 112.298 71.1155 115.041 67.227C116.741 64.8169 118.59 62.7445 120.027 60.1209C121.567 57.3097 124.206 48.8542 125.079 51.9385C126.497 56.9508 123.207 66.179 122.294 70.8152C120.796 78.4209 119.437 85.9966 117.369 93.4705C117.068 94.5606 116.139 103.229 115.039 103.54C113.473 103.984 113.643 96.5553 113.692 96.1925C115.504 82.8536 128.178 71.8613 135.078 60.7609C136.73 58.1038 137.03 54.8922 138.487 52.0762C140.926 47.366 138.989 62.6726 139.172 67.9734C139.252 70.2984 139.272 72.9789 139.675 75.2796C139.897 76.5454 144.949 70.1681 145.296 69.7475C147.508 67.0664 149.036 64.7312 150.576 61.6362C151.051 60.6828 152.659 56.1636 152.326 59.3239C152.172 60.7933 152.528 65.7308 153.421 66.8335C154.488 68.151 157.987 65.1223 158.55 64.6408C165.462 58.7277 170.39 49.8993 171.962 40.9938C173.038 34.9029 171.412 38.249 171.178 41.2881C170.828 45.821 173.283 48.8052 174.722 52.8232C176.84 58.7344 179.086 62.841 178.41 69.2716C178.048 72.7147 165.219 73.5066 168.779 65.9044C170.633 61.945 173.034 67.942 174.183 69.157C178.176 73.3796 184.679 63.2939 186.274 60.7725C193.061 50.047 195.546 35.2885 196.86 22.7927" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="993" stroke-dashoffset="993"></path>

  <!-- Underline Path -->
  <path id="underline" d="M107.174 84.38C126.874 82.0661 146.518 78.1799 166.201 75.4771C172.549 74.6054 179.179 76.0337 185.54 76.1284C196.326 76.2889 207.718 76.4185 218.434 74.8892C223.233 74.2044 228.297 74.9395 232.951 74.0243C241.113 72.4192 249.851 71.8563 258.17 71.812" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="169" stroke-dashoffset="169"></path>

  <style>
    #signature{
      animation: drawSignature 3s linear forwards;
    }
    #underline {
      animation: drawUnderline 1s linear forwards;
      animation-delay: 3s; /* Delay to match signature duration */
    }

    @keyframes drawSignature {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes drawUnderline {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</svg>

dasharray & stroke-dashoffset are correct as i calculated it using javascript getTotalLength() for each path of signature and underline. i want effect in which first my signature is aniamted then underline
but from above code only half part of signature is being animated then underline path fix that?

I have tried above code and using ai still nothing working. I want first my signature path is animated then underline path so it creates a drawing signature effect

Tags:

2

Answers


  1. 0 
    <svg xmlns="http://www.w3.org/2000/svg" width="282" height="122" viewBox="0 0 282 122" fill="none">
  <!-- Signature Path -->
  <path id="signature" d="M59.1294 91.0229C59.2018 87.6683 57.6122 84.619 56.5486 81.5202C54.828 76.5073 53.9153 71.3684 52.7901 66.1947C48.7362 47.5558 44.4087 28.9291 39.3774 10.5267C37.5692 3.91298 36.1171 8.64639 34.837 12.4986C32.4899 19.5623 30.9263 27.1572 29.0077 34.3523C27.1718 41.2371 26.3716 48.4466 24.7866 55.2446C22.84 63.5931 21.5986 72.0237 19.7423 80.3835C19.2622 82.5455 16.7243 96.5695 19.769 94.469C23.0249 92.2228 28.2772 89.4289 30.6095 86.3298C31.8945 84.6223 34.839 81.0546 34.0555 78.638C32.5327 73.9409 23.7549 70.6068 19.9807 68.2569C17.0475 66.4308 14.0207 65.0872 10.602 64.7279C9.42022 64.6036 6.21447 64.835 5.35755 63.9882C3.77332 62.4227 3.72734 61.5739 3.95931 59.3668C4.39759 55.1969 8.95733 56.1224 12.3685 56.4356C36.6373 58.664 62.3092 55.5404 86.4512 54.237C91.0087 53.991 83.1485 57.1707 81.2589 57.9302C72.4695 61.4631 75.2696 76.1022 84.2826 77.5587C92.4344 78.8761 91.2261 46.4935 93.3015 54.486C94.6132 59.5375 94.3991 65.1649 96.1407 70.0446C98.0208 75.3128 98.4224 77.5413 102.803 72.5345C105.274 69.71 107.509 66.7204 109.318 63.4227C110.749 60.8149 110.89 58.3282 110.411 62.8782C110.136 65.4934 112.298 71.1155 115.041 67.227C116.741 64.8169 118.59 62.7445 120.027 60.1209C121.567 57.3097 124.206 48.8542 125.079 51.9385C126.497 56.9508 123.207 66.179 122.294 70.8152C120.796 78.4209 119.437 85.9966 117.369 93.4705C117.068 94.5606 116.139 103.229 115.039 103.54C113.473 103.984 113.643 96.5553 113.692 96.1925C115.504 82.8536 128.178 71.8613 135.078 60.7609C136.73 58.1038 137.03 54.8922 138.487 52.0762C140.926 47.366 138.989 62.6726 139.172 67.9734C139.252 70.2984 139.272 72.9789 139.675 75.2796C139.897 76.5454 144.949 70.1681 145.296 69.7475C147.508 67.0664 149.036 64.7312 150.576 61.6362C151.051 60.6828 152.659 56.1636 152.326 59.3239C152.172 60.7933 152.528 65.7308 153.421 66.8335C154.488 68.151 157.987 65.1223 158.55 64.6408C165.462 58.7277 170.39 49.8993 171.962 40.9938C173.038 34.9029 171.412 38.249 171.178 41.2881C170.828 45.821 173.283 48.8052 174.722 52.8232C176.84 58.7344 179.086 62.841 178.41 69.2716C178.048 72.7147 165.219 73.5066 168.779 65.9044C170.633 61.945 173.034 67.942 174.183 69.157C178.176 73.3796 184.679 63.2939 186.274 60.7725C193.061 50.047 195.546 35.2885 196.86 22.7927" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="993" stroke-dashoffset="993"></path>

  <!-- Underline Path -->
  <path id="underline" d="M107.174 84.38C126.874 82.0661 146.518 78.1799 166.201 75.4771C172.549 74.6054 179.179 76.0337 185.54 76.1284C196.326 76.2889 207.718 76.4185 218.434 74.8892C223.233 74.2044 228.297 74.9395 232.951 74.0243C241.113 72.4192 249.851 71.8563 258.17 71.812" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="169" stroke-dashoffset="169"></path>

  <style>
    #signature{
      animation: drawSignature 3s linear forwards;
    }
    #underline {
      animation: drawUnderline 1s linear forwards;
      animation-delay: 3s; /* Delay to match signature duration */
    }

    @keyframes drawSignature {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes drawUnderline {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</svg>

    views’100
    tik tok

    Login or Signup to reply.
  2. 0

    You do not have to calculate stroke-dasharray and stroke-dashoffset
    when you set the pathLength attribute (on the <path>)

    pathLength="1" means the whole path is 1 unit (for calculations)

    That means you can set: stroke-dasharray="1" and stroke-dashoffset="1"

    <svg xmlns="http://www.w3.org/2000/svg" width="282" height="122" viewBox="0 0 282 122" fill="none">
  <style>
    #signature, #underline {
      stroke: darkred;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      --duration: 1s;
    }
    #signature{
      animation: draw var(--duration) linear forwards;
    }
    #underline {
      animation: draw 1s linear forwards;
      animation-delay: var(--duration); /* Delay to match signature duration */
    }
    @keyframes draw { to { stroke-dashoffset: 0  } }
  </style>
  
  <path id="signature" pathLength="1" d="M59.1294 91.0229C59.2018 87.6683 57.6122 84.619 56.5486 81.5202C54.828 76.5073 53.9153 71.3684 52.7901 66.1947C48.7362 47.5558 44.4087 28.9291 39.3774 10.5267C37.5692 3.91298 36.1171 8.64639 34.837 12.4986C32.4899 19.5623 30.9263 27.1572 29.0077 34.3523C27.1718 41.2371 26.3716 48.4466 24.7866 55.2446C22.84 63.5931 21.5986 72.0237 19.7423 80.3835C19.2622 82.5455 16.7243 96.5695 19.769 94.469C23.0249 92.2228 28.2772 89.4289 30.6095 86.3298C31.8945 84.6223 34.839 81.0546 34.0555 78.638C32.5327 73.9409 23.7549 70.6068 19.9807 68.2569C17.0475 66.4308 14.0207 65.0872 10.602 64.7279C9.42022 64.6036 6.21447 64.835 5.35755 63.9882C3.77332 62.4227 3.72734 61.5739 3.95931 59.3668C4.39759 55.1969 8.95733 56.1224 12.3685 56.4356C36.6373 58.664 62.3092 55.5404 86.4512 54.237C91.0087 53.991 83.1485 57.1707 81.2589 57.9302C72.4695 61.4631 75.2696 76.1022 84.2826 77.5587C92.4344 78.8761 91.2261 46.4935 93.3015 54.486C94.6132 59.5375 94.3991 65.1649 96.1407 70.0446C98.0208 75.3128 98.4224 77.5413 102.803 72.5345C105.274 69.71 107.509 66.7204 109.318 63.4227C110.749 60.8149 110.89 58.3282 110.411 62.8782C110.136 65.4934 112.298 71.1155 115.041 67.227C116.741 64.8169 118.59 62.7445 120.027 60.1209C121.567 57.3097 124.206 48.8542 125.079 51.9385C126.497 56.9508 123.207 66.179 122.294 70.8152C120.796 78.4209 119.437 85.9966 117.369 93.4705C117.068 94.5606 116.139 103.229 115.039 103.54C113.473 103.984 113.643 96.5553 113.692 96.1925C115.504 82.8536 128.178 71.8613 135.078 60.7609C136.73 58.1038 137.03 54.8922 138.487 52.0762C140.926 47.366 138.989 62.6726 139.172 67.9734C139.252 70.2984 139.272 72.9789 139.675 75.2796C139.897 76.5454 144.949 70.1681 145.296 69.7475C147.508 67.0664 149.036 64.7312 150.576 61.6362C151.051 60.6828 152.659 56.1636 152.326 59.3239C152.172 60.7933 152.528 65.7308 153.421 66.8335C154.488 68.151 157.987 65.1223 158.55 64.6408C165.462 58.7277 170.39 49.8993 171.962 40.9938C173.038 34.9029 171.412 38.249 171.178 41.2881C170.828 45.821 173.283 48.8052 174.722 52.8232C176.84 58.7344 179.086 62.841 178.41 69.2716C178.048 72.7147 165.219 73.5066 168.779 65.9044C170.633 61.945 173.034 67.942 174.183 69.157C178.176 73.3796 184.679 63.2939 186.274 60.7725C193.061 50.047 195.546 35.2885 196.86 22.7927"> 
  </path>

  <path id="underline" pathLength="1" d="M107.174 84.38C126.874 82.0661 146.518 78.1799 166.201 75.4771C172.549 74.6054 179.179 76.0337 185.54 76.1284C196.326 76.2889 207.718 76.4185 218.434 74.8892C223.233 74.2044 228.297 74.9395 232.951 74.0243C241.113 72.4192 249.851 71.8563 258.17 71.812">
  </path>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search