Reverse start and end point of animation in CSS - html

I need help, I use this animation for line and now I need to reverse start and end point. Now, where the draw start I need end and where now draw line end I need start, basically reverse start and end point of draw line in animation which I use.
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>

reverse the stroke-dashoffset like this add a from and to
from {
stroke-dashoffset: -1000;
}
to {
stroke-dashoffset: 0;
}
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: -1000;
}
to {
stroke-dashoffset: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
</body>
</html>

Related

Unable to apply line drawing and filling it animation in svg

I want a line drawing animation and I tried to follow some youtube tutorials and I want something like this https://codepen.io/shshaw/pen/Hjyio which first draw the logo then fills it. Till now I tried this but failed miserably. I searched every other question on stack overflow question everyone tell about only line drawing animation but I want to fill it also.
Also I don't draw any line animation.
Any suggestion of where I am wrong and also adding px unit don't help at all ?
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style>
path {
stroke:#000;
stroke-dasharray: 2500;
stroke-width:3;
animation: my_animation 100s;
}
#keyframes my_animation{
0%{
stroke-dashoffset: 0;
}
50%{
stroke-dashoffset: 2500;
}
100%{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
</body>
</html>
Just use your keyframes. In this example, I have made the stroke animation run from time 0% to 80%. Then I make the fill fade in using fill-opacity from time 80% to 100%.
path {
stroke:#000;
stroke-dasharray: 2072;
stroke-width:3;
animation: my_animation 4s;
animation-fill-mode: forwards;
fill: red;
}
#keyframes my_animation{
0%{
stroke-dashoffset: 2072;
fill-opacity: 0;
}
80%{
stroke-dashoffset: 0;
fill-opacity: 0;
}
100%{
fill-opacity: 1;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M479 320L639 0L318.99 0L-1 0L158.98 320L318.99 640L479 320Z" id="aLRf203Rm"></path><path d="M301.47 203.41L401.95 0L200.97 0L0 0L100.48 203.41L200.97 406.83L301.47 203.41Z" id="a1ManYbeyy"></path></defs><g><g><use xlink:href="#aLRf203Rm" opacity="1" fill="#ff0043" fill-opacity="1"></use><g><use xlink:href="#aLRf203Rm" opacity="1" fill-opacity="0" stroke="#ff0043" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#a1ManYbeyy" opacity="1" fill="#00ffda" fill-opacity="1"></use><g><use xlink:href="#a1ManYbeyy" opacity="1" fill-opacity="0" stroke="#00ffda" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>

i want to animate this logo but for some reason it doesn't work

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<defs>
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<title>logo</title>
<path class="path" d="M115.59,123.26l39.56-31c0.63-.5-0.26-1.38-0.88-0.88l-39.56,31c-0.63.5,0.26,1.38,0.88,0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M94.71,73.09l35.54-.51a0.63,0.63,0,0,0,0-1.25l-35.54.51a0.63,0.63,0,0,0,0,1.25h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M95.1,121.61l0-86.41V22.81a0.63,0.63,0,0,0-1.25,0l0,86.41v12.39a0.63,0.63,0,0,0,1.25,0h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M155.15,91.35l-15.9-19.21c-0.51-.62-1.39.27-0.88,0.88l15.9,19.21c0.51,0.62,1.39-.27.88-0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M154.57,52.56L138.36,72.14c-0.51.62,0.37,1.5,0.88,0.88l16.21-19.58c0.51-.62-0.37-1.5-0.88-0.88h0Z" transform="translate(-93.82 -21.1)" />
<path class="path" d="M114.71,22.13l39.56,31c0.63,0.49,1.52-.39.88-0.88l-39.56-31c-0.63-.49-1.52.39-0.88,0.88h0Z" transform="translate(-93.82 -21.1)" />
</svg>
i want this svg logo to looks like its drawn with css animation. can someone help me fix this problem. its already on the page it doesn't animate
Currently, your svg doesn't have a stroke (what you see is actually the fill). Remove the fill and add a stroke, and your animation will kick in:
.path {
stroke: black;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}

my svg stops at some point with the animation

I have the SVG element (see below) that animates but after some time it stops animating. I would like that the animation continues like this jsfiddle.
.path {
stroke-dasharray: 20;
animation: dash 10s linear;
}
#keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-width="2"
d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</svg>
All you're missing is the infinite keyword. Refer to the docs for more.
.path {
stroke-dasharray: 20;
animation: dash 10s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-width="2"
d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</svg>

Scaling of a svg

When I try to scale an SVG by using the transform function the SVG also translates as it is being scaled. Is there way to apply only scaling on the SVG while it remains in a fixed position.
jsFiddle
SVG code
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#207589;
position:fixed;
transform: scale(1,2);
animation: dash 4s linear forwards;}
#-webkit-keyframes dash {
0% {
transform: scale(1,1) ;
}
100% {
transform: scale(1,2);
}}
.st1{fill:#E0674B;}
.st2{fill:#4DF464;}
.st3{fill:#A53A59;}
</style>
<rect x="544.2" y="404.3" class="st0" width="85.5" height="111.5"/>
<polygon class="st1" points="544.2,404.3 544.2,489.7 629.7,489.7 "/>
<path class="st2" d="M544.2,515.8c0,0,25.5-23.1,25.5-65.6v65.6H544.2z"/>
<path class="st2" d="M629.7,515.8c0,0-25.5-23.1-25.5-65.6v65.6H629.7z"/>
<circle class="st3" cx="586.9" cy="459.3" r="36.1"/>
</svg>
Yes! but you will need some js!
This demo
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
/* .st0{
fill:#207589;
position:fixed;
transform: scale(1,2);
animation: dash 4s linear forwards;
}
*/
/* #-webkit-keyframes dash {
0% {
transform: scale(1,1) ;
}
100% {
transform: scale(1,2);
}
}*/
.st1{fill:#E0674B;}
.st2{fill:#4DF464;}
.st3{fill:#A53A59;}
</style>
<rect x="544.2" y="404.3" class="st0" width="85.5" height="111.5"/>
<polygon class="st1" points="544.2,404.3 544.2,489.7 629.7,489.7 "/>
<path class="st2" d="M544.2,515.8c0,0,25.5-23.1,25.5-65.6v65.6H544.2z"/>
<path class="st2" d="M629.7,515.8c0,0-25.5-23.1-25.5-65.6v65.6H629.7z"/>
<circle class="st3" cx="586.9" cy="459.3" r="36.1"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax();
// settings ...
tl.set(".st0", {
fill:"#207589",
position:"fixed",
transformOrigin : "50% 50%"
});
tl.fromTo(".st0",4,{
scale: (1,1)
}, {
scale: (1,2)
});
</script>
</body>
</html>

Make SVG path take full width and height of screen

I have an inline SVG path that animates a dash to look like the snake game. Now my question is how to get this path to take up the full width and height of the screen and act responsive if the screen goes smaller or bigger.
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve">
<path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z"
stroke-dasharray="2042 300"
stroke-dashoffset="2342" />
</svg>
CSS
.path {
animation: dash 10s linear infinite;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Here is a fiddle with the code I have.
http://jsfiddle.net/c3ar6e5o/
You have to tell the SVG not to maintain its aspect ratio with preserveAspectRatio="none" in the SVG code..then it's just CSS.
JSfiddle Demo
html,
body {
margin: 0;
height: 100%;
}
svg {
display: block;
}
.path {
animation: dash 10s linear infinite;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none">
<path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" />
</svg>