SVG line animation - html

I am trying to use this trick to animate an svg picture:
http://css-tricks.com/svg-line-animation-works/
Here I created a codepen with my own version, but no matter what I do I can't seem to make it work. As far as I can see the only difference between my version and the one on css tricks is that I am using line elements instead of paths.
http://codepen.io/webconsult/pen/HgIsk
Additionally, can someone tell me how to accomplish this without using an inline svg?
CSS:
svg {
width: 100%;
}
svg .line {
stroke-dasharray: 1300;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}
SVG:
<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="1920px" height="640px" viewBox="0 0 1920 640" enable-background="new 0 0 1920 640" xml:space="preserve">
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
[...]
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
</svg>

On chrome (or other), css animation needs to be written with vender prefix yet.
So, you should rewrite the code like this.
svg {
width: 100%;
}
svg .line {
stroke-dasharray: 1300;
animation: dash 5s linear alternate infinite;
-webkit-animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}

Related

Issue with SVG path not animating

I have an SVG I'm trying to animate, but it is not working for some reason.
This is my component where I'm loading the svg
import { JapanMap } from "../illustrations/japanMap";
export default function Home() {
return (
<>
<JapanMap />
</>
);
}
And this is the svg itself and the css:
#japanMap {
stroke-dasharray: 31818.841796875;
stroke-dashoffset: 31818.841796875;
animation: draw 6s ease;
animation-fill-mode: forwards;
}
#keyframes draw {
to {
stroke-dash-offset: 0;
}
}
import React from "react";
export const JapanMap = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="2338971"
viewBox="0 0 2270.4019 2838.8689"
height="801.19189"
width="640.75787"
>
<g transform="translate(563.71426,965.56689)" id="2398">
<path
id="japanMap"
stroke="#000000"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
d="m 1705.6746,-614.68501 c -1.7675,4.9831 -4.7911,8.4043 -7.4279,8.4043 -1.3295,0 -1.961,0.6807 -1.961,2.1138 0,6.3193 -8.9706,15.0674 -14.5534,14.1926 -1.6206,-0.2539 -3.8466,-0.5178 etc..."
></path>
</g>
</svg>
);
};
What could be the reason that it's not animating? I'm not too familiar with CSS.
Might just be the typo in your animation.
there's should be no - between dash and offset.
stroke-dash-offset: 0; becomes:
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
Example
svg {
stroke-dasharray: 20;
stroke-dashoffset: 200;
stroke-width: 5;
animation: draw 3s ease alternate infinite;
animation-fill-mode: forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

HTML SVG reduce circle size

I have found animated circle made with svg but I need to reduce the circle size
How can I modify the code please?
#keyframes dash {
from {
stroke-dashoffset: 816;
}
to {
stroke-dashoffset: 0;
}
}
.progress-circle path {
stroke-dasharray: 816;
stroke-dashoffset: 0;
animation: dash 2s linear;
animation-delay: 0.3s;
}
<svg class="progress-circle" width="70" height="70">
<path
d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
stroke="#000" stroke-width="1" fill="transparent" />
</svg>
You need to change the width and height and then add the viewbox atrribute with the original size:
#keyframes dash {
from {
stroke-dashoffset: 816;
}
to {
stroke-dashoffset: 0;
}
}
.progress-circle path {
stroke-dasharray: 816;
stroke-dashoffset: 0;
animation: dash 2s linear;
animation-delay: 0.3s;
}
<svg class="progress-circle" width="30" height="30" viewBox="0 0 70 70">
<path
d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
stroke="#000" stroke-width="1" fill="transparent" />
</svg>
add viewBox= "0 0 50 50" in svg tag and reduce svgwidth and height

SVG arrow wrong sync animation

why doesn't the arrow start along with the line?
Is it not synchronized?
I would like the arrow to leave together with the line.
.box{
width:100%;
padding:0px;
background-color: black;
}
.squiggle {
stroke-dasharray: 498.181;
stroke-dashoffset: 498.181;
animation: draw 10s linear infinite;
}
#keyframes draw {
from {
stroke-dashoffset: 498.181;
}
to {
stroke-dashoffset: 0;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 215 66" preserveAspectRatio="xMidYMid meet">
<g id="layer1" transform="translate(-68.19229,10.180375)">
<g id="g38" transform="matrix(0.26458333,0,0,0.26458333,54.727655,-107.07271)">
<g>
<path id="path22" class="squiggle"
style="fill:none;
stroke:orange;
stroke-width:3px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-opacity:1"
d="M 653.40952,459.58095 C 539.70759,242.15840999999995 379.43686,703.6978899999999 252.34286,526.62857"/>
<use href="#path22"/>
<path fill="red" d="M -9.5357143,-9.9107143 10,0 -10,10 -3.3928571,-0.17857143 Z">
<animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
<mpath href="#path22"/>
</animateMotion>
</path>
</g>
</g>
</g>
</svg>
</div>
</body>
</html>
look at this, This may be helpful:
#desc {
max-width: 700px;
margin-top: 100px;
color: #b3b3b3;
font-size: 11px;
font-family: sans-serif;
}
#desc li {
margin-bottom: 1em;
}
#desc p {
padding: 20px 0 0 40px;
}
#doubled-separate {
width: 110px;
}
#doubled-separate #over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal linear infinite forwards;
}
#keyframes reveal {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker {
width: 88px;
position: relative;
top:-4px;
}
#separate-marker .just-line {
fill: none;
stroke-dashoffset: 0;
animation: 10s reveal2 linear infinite forwards;
}
#keyframes reveal2 {
100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker {
width: 110px;
}
#doubled-separate-marker .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 3s reveal3 linear infinite forwards;
}
#keyframes reveal3 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker-2 {
width: 110px;
}
#doubled-separate-marker-2 #arrow3 path {
opacity: 0;
animation: 10s revealarrow linear infinite forwards;
}
#keyframes revealarrow {
0%, 50% {
opacity: 0;
}
60%, 100% {
opacity: 1;
}
}
#doubled-separate-marker-2 .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal4 linear infinite forwards;
}
#keyframes reveal4 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker-2 {
width: 88px;
position: relative;
top:-4px;
}
<svg viewBox="0 0 44 97" preserveAspectRatio="xMinYMin meet" id="separate-marker-2">
<defs>
<marker id="arrow4" viewBox="0 0 13 13" refX="11" refY="8" markerWidth="13" markerHeight="13" markerUnits="userSpaceOnUse" orient="auto-start-reverse" preserveAspectRatio="xMinYMin meet">
<path d="M3.66332316,0.125850427 L3.75090984,0.194245468 L12.2529105,7.89856961 C12.6592041,8.26674392 12.5414228,8.91869993 12.063138,9.1358919 L11.9627228,9.17332054 L0.963626457,12.4383634 C0.566538833,12.5562375 0.149079906,12.3298902 0.0312058479,11.9328025 C-0.0768453724,11.5688056 0.10434498,11.187691 0.441152309,11.0359066 L0.536766731,11.0003819 L10.2568836,8.11360225 L2.74367477,1.30576583 C2.46464034,1.05291103 2.41998014,0.63794112 2.62313708,0.333974789 L2.69153212,0.246388115 C2.94438692,-0.0326463148 3.35935683,-0.0773065179 3.66332316,0.125850427 L3.66332316,0.125850427 Z" fill="#B3B3B3" fill-rule="nonzero"></path>
</marker>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 1.000000)">
<path d="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" class="just-line" stroke="#B3B3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4" marker-end="url(#arrow4)">
<animate attributeName="d" from="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" to="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C15.4626235,81.4917594 26.2993953,89.006995 41,91" dur="1.5s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
<div id="desc">
<ol>
<li>Line and arrowhead are two paths grouped together, with an identical (but wide and white) line path on top that animates to reveal.</li>
<li>Line path with arrowhead path attached as a marker. dash-offset animates on line path to add movement.</li>
<li>Fusion of 1 and 2. Line path with arrowhead as marker, white line path animating on top. Shows that path+marker connection is much smoother than path+path, and that butt linecaps create a smoother animation finish than square or round (although it required moving the white path start-point a step or two to cover the marker).</li>
<!-- figuring out CSS animation on an SVG marker was a JOURNEY -->
<li>Adaptation of 3. The arrowhead SVG marker has CSS animation applied. Since it doesn't appear until after the line path is fully visible, the white line path on top has a narrower stroke since it doesn't need to cover the marker. The animation timings are synced up via keyframe percentages.</li>
<li>native SVG animate!</li>
</ol>
<p>DISCLAIMER: honestly no idea about browser support for any of this</p>
</div>

SVG straight line animation CSS

I am trying to achieve this (the picture below) in using SVG path for animation in a website. I saw this https://css-tricks.com/svg-line-animation-works/ and wanted to try it. But i am not sure how do i create the path out and the animation. Please do help me! Thanks
You can use svg code for animation. You can use CSS animation on svg paths.
.st0{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;
}
.st1{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 200;
stroke-dashoffset: 200;
-webkit-animation: draw2 3s linear 2s forwards;
animation: draw2 3s linear 2s forwards;
}
#-webkit-keyframes draw1{
to {stroke-dashoffset: 0;}
}
#keyframes draw1{
to {stroke-dashoffset: 0;}
}
#-webkit-keyframes draw2{
to {stroke-dashoffset: 0;}
}
#keyframes draw2{
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"
viewBox="0 0 614 53" style="enable-background:new 0 0 614 53;" xml:space="preserve">
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/>
<line class="st1" x1="307" y1="53" x2="307" y2="0"/>
</svg>
SVG solution
The animation uses the attribute <stroke-dashoffset> - the indent from the beginning of the line. At the maximum value of <stroke-dashoffset> the visible line is zero.
With the value of <stroke-dashoffset ="0"> the line acquires the maximum size.
It is necessary to accurately calculate the length of the line to avoid unpredictable effects in the animation.
In this example, the length of <line> is 53px, for <polyline> is 680px.
<style>
.st0{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 680; stroke-dashoffset: 680;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 53; stroke-dashoffset: 53;}
</style>
<svg version="1.1" viewBox="0 0 614 53" >
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 " >
<animate
attributeName="stroke-dashoffset"
from="680"
to="0"
dur="2s"
fill="freeze" />
</polyline>
<line class="st1" x1="307" y1="53" x2="307" y2="0">
<animate
attributeName="stroke-dashoffset"
from="53"
to="0"
dur="2s"
fill="freeze" />
</line>
</svg>

CSS Discrepancy for animating svg paths

I'm currently trying out to animate some SVG paths and there is something I don't understand. I'm using the same CSS animation to animate 2 different paths (different length) but they don't finish at the same time. How can make them finish together independently of their length?
That's my code:
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
.path {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<body bgcolor="#000000">
<svg>
<path id="path1" class="path" stroke="#039EE3" stroke-width="1.8" fill="none" d="M10 10 H 190" />
<path id="path2" class="path" stroke="#039EE3" stroke-width="1.8" fill="none" d="M100 20 H 190 " />
</svg>
</body>