saiyan101
Reputation: 620
SVG CSS Multiple animations
I have created a treasure map animation, first, it will display the path in light grey but as animation begins I would like the light grey dashes to disappear or turn to a black color as the fill animation ".road" kicks in. I am struggling to get the light grey dashes ".steps" to disappear as the fill animations go over that position.
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.road {
stroke-dasharray: 744;
stroke-dashoffset: -744;
animation: draw-road 10s infinite;
}
.steps {
stroke-dasharray: -744;
stroke-dashoffset: 744;
animation: draw-steps 10s reverse;
}
@keyframes draw-road {
0% {
stroke-dashoffset: 744;
stroke: #000000;
}
100% {
stroke-dashoffset: 0;
stroke: #000000;
}
}
@keyframes draw-steps {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<g id="Layer_1">
<path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
<path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" class="road" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073"/>
<path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
<path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073" class="steps"/>
<path class="st0" d="M273.84 65.49c1.64-.16 3.3-.32 4.98-.48"/>
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>Upvotes: 7
Views: 607
Answers (2)
Alexandr_TT
Reputation: 14545
Solution using CSS
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:black;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
}
.steps{
fill:none;
stroke:#999;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
mask:url(#msk1);
}
#stepMask{
fill:none;
stroke:black;
stroke-width:2;
stroke-dashoffset: 744;
stroke-dasharray:744,744;
animation: draw-steps 10s linear infinite;
}
@keyframes draw-steps {
100% {stroke-dashoffset:0;}
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
</mask>
</defs>
<g id="Layer_1">
<path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="steps" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>Solution using SVG mask.
- Below is a black line
class="road" - Above is a gray line
class="steps" - A mask is applied to the gray line which, when moving, erases the gray line showing the black line
This creates the effect of filling the gray line with black
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:black;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
}
.steps{
fill:none;
stroke:#999;
stroke-dasharray:10 10;
stroke-dashoffset:0;
stroke-width:2;
animation: draw-steps 10s reverse;
}
#stepMask{
fill:none;
stroke:black;
stroke-width:2;
stroke-dashoffset: 744;
stroke-dasharray:744,744;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<style>
.st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
</style>
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" >
<animate attributeName="stroke-dashoffset" begin="0s" dur="20s" values="744;0;744" repeatCount="indefinite"/>
</path>
</mask>
</defs>
<g id="Layer_1">
<path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="steps" mask="url(#msk1)" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
<path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
</g>
</svg>Upvotes: 4
Alexandr_TT
Reputation: 14545
Treasure seeker animation on the road
The author will probably want to add a map or landscape below the treasure hunt route. For the route and image to be adaptive, and the layout not to be violated when changing the screen resolution, you need to add the image inside SVG
<image xlink:href="https://i.sstatic.net/ncK6A.jpg" width="100%" height="100%" />
I added an animated figure of a man walking along the road
<use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:#990E0E; fill:black;">
<animateMotion id="an2"
begin="0s"
dur="40s"
repeatCount="indefinite" >
<mpath xlink:href="#steps"/>
</animateMotion>
</use>
Coordination of the road coloring animation and the human movement animation is achieved by the same time duration of both animations.
.container {
width:100%;
height:100%;
}
svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.road{
fill:none;
stroke:blue;
stroke-dasharray:12 10;
stroke-dashoffset:0;
stroke-width:3;
}
#steps{
fill:none;
stroke:white;
stroke-dasharray:12 10;
stroke-dashoffset:0;
stroke-width:3;
}
#stepMask{
fill:none;
stroke:black;
stroke-width:3;
stroke-dashoffset: 1887;
stroke-dasharray:1887,1887;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 890" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<path id="stepMask" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" >
<animate attributeName="stroke-dashoffset" begin="0s" dur="40s" values="1887;0" repeatCount="1" fill="freeze"/>
</path>
</mask>
<g id="Man" transform="translate(0,0) scale(1,-1)">
<path fill="none">
<animate
attributeName="d"
begin="0s"
dur="0.4s"
repeatCount="indefinite"
values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
</path>
</g>
</defs>
<image xlink:href="https://i.sstatic.net/Gmr13.jpg"
width="100%" height="100%" />
<g id="Layer_1">
<path class="road" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
<path id="steps" mask="url(#msk1)" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
</g>
<use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:blue; fill:black;">
<animateMotion id="an2"
begin="0s"
dur="40s"
repeatCount="1" >
<mpath xlink:href="#steps"/>
</animateMotion>
</use>
</svg>
</div>Upvotes: 2
Related Questions
- Animating SVGs Via CSS
- linking multiple svg css animations using java script
- SVG animation in CSS
- Multiple animations in CSS - Only repeats the seconds animation
- Keyframes animation with svg
- svg plus css animation
- SVG image CSS3 animation
- Simple SVG and CSS Animation
- SVG Animation with CSS
- Multiple animations on SVG element