Svg Animation : dashed line start to stop issue

I'm trying to create a svg dashed line animation, but it's not getting as the way i wan't given below is the code which i have tried

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

the above one in running but i want it to start from 0;

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

but when trying that the dashed line is not working

how can it be done

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

Try from {stroke-dashoffset: -3000; } to {stroke-dashoffset: 0; } or from {stroke-dashoffset: 3000; } to {stroke-dashoffset: 6000; }

– enxaneta
Nov 16 '18 at 8:40

add a comment |

I'm trying to create a svg dashed line animation, but it's not getting as the way i wan't given below is the code which i have tried

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

the above one in running but i want it to start from 0;

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

but when trying that the dashed line is not working

how can it be done

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

Try from {stroke-dashoffset: -3000; } to {stroke-dashoffset: 0; } or from {stroke-dashoffset: 3000; } to {stroke-dashoffset: 6000; }

– enxaneta
Nov 16 '18 at 8:40

add a comment |

I'm trying to create a svg dashed line animation, but it's not getting as the way i wan't given below is the code which i have tried

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

the above one in running but i want it to start from 0;

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

but when trying that the dashed line is not working

how can it be done

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

I'm trying to create a svg dashed line animation, but it's not getting as the way i wan't given below is the code which i have tried

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

the above one in running but i want it to start from 0;

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

but when trying that the dashed line is not working

how can it be done

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 8,12;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  .path {

    stroke-dasharray: 3000;

    stroke-dashoffset: 3000;

    animation: dash 4s linear 0s forwards;

}



@keyframes dash {

    from {

        stroke-dashoffset: 3000;

    }



    to {

        stroke-dashoffset: 0;

    }

}



    </style>

    <title>Path 5</title>

    <desc>Created with Sketch.</desc>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

            <path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>

</svg>

css css3 animation svg svg-animate

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

asked Nov 16 '18 at 5:00

Aashiq Rathnadas

284216

Try from {stroke-dashoffset: -3000; } to {stroke-dashoffset: 0; } or from {stroke-dashoffset: 3000; } to {stroke-dashoffset: 6000; }

– enxaneta
Nov 16 '18 at 8:40

add a comment |

Try from {stroke-dashoffset: -3000; } to {stroke-dashoffset: 0; } or from {stroke-dashoffset: 3000; } to {stroke-dashoffset: 6000; }

– enxaneta
Nov 16 '18 at 8:40

Try from {stroke-dashoffset: -3000; } to {stroke-dashoffset: 0; } or from {stroke-dashoffset: 3000; } to {stroke-dashoffset: 6000; }

– enxaneta
Nov 16 '18 at 8:40

add a comment |

1 Answer
1

active

oldest

votes

Got the answers as

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53331707%2fsvg-animation-dashed-line-start-to-stop-issue%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Got the answers as

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

add a comment |

Got the answers as

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

add a comment |

Got the answers as

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

Got the answers as

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->

    <style>

  

      .dashed-path {

        stroke-dasharray: 3000;

        stroke-dashoffset: 3000;

        animation: dashed-line 6s linear alternate 1;

      }



      @keyframes dashed-line {

        from {

          stroke-dashoffset: 0;

        }

        to {

          stroke-dashoffset: 3000;

        }

      }



    </style>

    <g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">

        <g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">

          <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>

          <path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>

        </g>

    </g>







</svg>

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

answered Nov 16 '18 at 8:47

Aashiq Rathnadas

284216

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky