Make SVG path take full width and height of screen - html

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>

Related

CSS transition-property for rotate3d does not work on SVGs

I'm having trouble using a transition-property for rotate3d. It works with all but not with rotate or rotate3d.
Is there any way to single out rotate or rotate3d so I can use other transforms without easing?
.lock-animation {
width:6em;
margin:2em auto;
overflow:visible;
}
.lock-animation svg {
overflow:visible;
}
.lock-animation g#lock-top{
transition: rotate 0.3s ease-in-out;
}
.lock-animation:hover g#lock-top {
transform: translateX(150%) rotate3d(0, 1, 0, -180deg);
}
<div class="lock-animation">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 448 512" enable-background="new 0 0 448 512" xml:space="preserve">
<g id="lock-bottom" focusable="false">
<g>
<path fill="none" d="M224,48c-52.9,0-96,43.1-96,96v48h192v-48C320,91.1,276.9,48,224,48z"/>
<path fill="none" d="M48,464h352V240H48V464z M196,320c0-15.5,12.5-28,28-28s28,12.5,28,28v64c0,15.5-12.5,28-28,28
s-28-12.5-28-28V320z"/>
<path d="M224,412c15.5,0,28-12.5,28-28v-64c0-15.5-12.5-28-28-28s-28,12.5-28,28v64C196,399.5,208.5,412,224,412z"/>
<path d="M400,192h-32h-48H128H80H48c-26.5,0-48,21.5-48,48v224c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V240
C448,213.5,426.5,192,400,192z M400,464H48V240h352V464z"/>
</g>
</g>
<g id="lock-top">
<path d="M223.7,0C303.2-0.2,368,64.5,368,144v48h-48v-46.8c0-52.8-42.1-96.7-95-97.2c-53.4-0.6-97,42.7-97,96v56
c0,13.3-10.7,24-24,24s-24-10.7-24-24v-54.6C80,65.8,144,0.2,223.7,0z"/>
</g>
</svg>
</div>

You need to adjust the transform-origin then you can get rid of the translate and apply transition to transform that contains only rotate
.lock-animation {
width: 6em;
margin: 2em auto;
overflow: visible;
}
.lock-animation svg {
overflow: visible;
}
.lock-animation g#lock-top {
transition: transform 0.3s ease-in-out;
transform-origin: 90% 0;
transform-box: fill-box;
}
.lock-animation:hover g#lock-top {
transform: rotate3d(0, 1, 0, -180deg);
}
<div class="lock-animation">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 448 512" enable-background="new 0 0 448 512" xml:space="preserve">
<g id="lock-bottom" focusable="false">
<g>
<path fill="none" d="M224,48c-52.9,0-96,43.1-96,96v48h192v-48C320,91.1,276.9,48,224,48z"/>
<path fill="none" d="M48,464h352V240H48V464z M196,320c0-15.5,12.5-28,28-28s28,12.5,28,28v64c0,15.5-12.5,28-28,28
s-28-12.5-28-28V320z"/>
<path d="M224,412c15.5,0,28-12.5,28-28v-64c0-15.5-12.5-28-28-28s-28,12.5-28,28v64C196,399.5,208.5,412,224,412z"/>
<path d="M400,192h-32h-48H128H80H48c-26.5,0-48,21.5-48,48v224c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V240
C448,213.5,426.5,192,400,192z M400,464H48V240h352V464z"/>
</g>
</g>
<g id="lock-top">
<path d="M223.7,0C303.2-0.2,368,64.5,368,144v48h-48v-46.8c0-52.8-42.1-96.7-95-97.2c-53.4-0.6-97,42.7-97,96v56
c0,13.3-10.7,24-24,24s-24-10.7-24-24v-54.6C80,65.8,144,0.2,223.7,0z"/>
</g>
</svg>
</div>

Reverse start and end point of animation in CSS

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>

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>