I have the following SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg style="transform: rotate(90deg)" width="190px" height="200px" viewBox="0 0 190 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>9C2F36FF-8DCA-4802-94A6-CB492649C17A</title>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="56.8668386%" id="linearGradient-1">
            <stop stop-color="#EB6150" offset="0%"></stop>
            <stop stop-color="#D55848" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g style="position: absolute; z-index: 3" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
            <g id="Experienced" transform="translate(116.000000, 2812.000000)">
                <path class="draw1" d="M1115.20958,68.2095765 L1121.83952,74.839525 L1127.47671,80.476715 C1133.7251,86.7251037 1143.85574,86.7251037 1150.10413,80.476715 L1191.47671,39.104132 C1197.7251,32.8557433 1197.7251,22.7251037 1191.47671,16.476715 C1188.47613,13.4761329 1184.40647,11.7904235 1180.16301,11.7904235 L1138.79042,11.7904235 L1138.79042,11.7904235" id="Fore-Copy-2" transform="translate(1167.000000, 51.790423) scale(-1, -1) rotate(90.000000) translate(-1167.000000, -51.790423) "></path>
            </g>
        </g>
    </g>
    
    <g style="position: absolute; z-index: -1" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
            <g id="Experienced" transform="translate(116.000000, 2812.000000)">
                <polyline class="draw2" id="Back-Copy" transform="translate(1155.209577, 131.790423) scale(-1, -1) rotate(90.000000) translate(-1155.209577, -131.790423) " points="1127 103.580847 1167.01603 143.596878 1183.41915 160"></polyline>
            </g>
        </g>
    </g>
</svg> 

I have added animation to the stroke path as bellow

.arrow-bottom
  margin-top: -50px
  .draw1
    animation: animate 1s linear infinite 
    stroke-dasharray: 100
    stroke-dashoffset: 100
  .draw2
    animation: animate 1.5s linear 0.9s infinite
    stroke-dasharray: 190
    stroke-dashoffset: 190  

@keyframes animate 
  to 
    stroke-dashoffset: 0 

Animation works. but when it starts loop I can see two SVG's seperately, there's no flow. Also I want id=Back-Copy SVG element (2nd) hidden behind a div like this enter image description here Can anyone suggest a way of doing this?

CodePudding user response：

Run this code snippet and let me know if this is what you were trying to achieve.

• I set stroke-dashoffset the same for both .draw1 and .draw2
• Animation delay only works on the initial animation vs every cycle of the animation, so I created a new keyframe and added the delay in for each animation cycle. animate1 starts when animate2 ends.

.arrow-bottom {
  margin-top: 50px;
}
.arrow-bottom .draw1,
.arrow-bottom .draw2 {
    stroke-dasharray: 200 200;
    stroke-dashoffset: 200;
}
.arrow-bottom .draw1 {
  animation: animate1 2s linear 0s forwards infinite;

}
.arrow-bottom .draw2 {
  animation: animate2 2s linear 0s forwards infinite;
}

@keyframes animate1 {
  from, 20% {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 10;
  }
}

@keyframes animate2 {
  from {
    stroke-dashoffset: 200;
  }
  49%, to {
    stroke-dashoffset: 10;
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<svg class="arrow-bottom" style="transform: rotate(90deg)" width="190px" height="200px" viewBox="0 0 190 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>9C2F36FF-8DCA-4802-94A6-CB492649C17A</title>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="56.8668386%" id="linearGradient-1">
            <stop stop-color="#EB6150" offset="0%"></stop>
            <stop stop-color="#D55848" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g style="position: absolute; z-index: 3" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
            <g id="Experienced" transform="translate(116.000000, 2812.000000)">
                <path class="draw1" d="M1115.20958,68.2095765 L1121.83952,74.839525 L1127.47671,80.476715 C1133.7251,86.7251037 1143.85574,86.7251037 1150.10413,80.476715 L1191.47671,39.104132 C1197.7251,32.8557433 1197.7251,22.7251037 1191.47671,16.476715 C1188.47613,13.4761329 1184.40647,11.7904235 1180.16301,11.7904235 L1138.79042,11.7904235 L1138.79042,11.7904235" id="Fore-Copy-2" transform="translate(1167.000000, 51.790423) scale(-1, -1) rotate(90.000000) translate(-1167.000000, -51.790423) "></path>
            </g>
        </g>
    </g>
    
    <g style="position: absolute; z-index: -1" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
            <g id="Experienced" transform="translate(116.000000, 2812.000000)">
                <polyline class="draw2" id="Back-Copy" transform="translate(1155.209577, 131.790423) scale(-1, -1) rotate(90.000000) translate(-1155.209577, -131.790423) " points="1127 103.580847 1167.01603 143.596878 1183.41915 160"></polyline>
            </g>
        </g>
    </g>
</svg>