svg rotate shape around its centre endlessly - javascript

I'm trying to rotate a svg shape around its centre endlessly.
This is what I have so far.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
xml:space="preserve">
<g>
<polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1
384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732
223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064
266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795
463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16
584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936 " transform="rotate(15, 40, 40)" dur="0.1s" calcMode="discrete" repeatCount="indefinite"/>
<circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>
…but can't get it to work.
Do I need to rotate it with javascript cause I think I've seen something similar using solely xml.
Also, the second shape should be in the centre of the first shape too.
Thanks for help!

Are you looking for something like this?
http://jsfiddle.net/t97w9cqm/7/
I'm just rotating it with CSS animations.
#Layer_1 {
transform-origin: 50% 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
The key is the transform-origin

You are missing the animation, add the animation and you should be set.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
xml:space="preserve">
<g>
<polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1
384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732
223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064
266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795
463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16
584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936" calcMode="discrete">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 398 639"
to="360 398 639"
dur="1s"
repeatCount="indefinite"/>
</polygon>
<circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>
Tested successfully in Chrome Version 46.0.2490.80 m on Windows 7. I have the 'star' spinning with the black ring toward the center of the star.

Related

change(edit) svg dashed line circle animate from hover run to infinite run

greeting
the next code(two circle) it was run when mouse pointer hover over it, so the circle color change from one to another. i edit it so it now look like fan or some rotation animation, but it still need mouse pointer to run.
i hope find help for edit it so it auto run, and keep repeat(loop).
<html>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<defs>
<style>
.another-circle {
stroke-dasharray: 10;
stroke-dashoffset: 500;
transition: stroke-dashoffset 1s linear ;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
</style>
</defs>
<circle cx="50" cy="50" r="36" fill="transparent" stroke="red" stroke-width="4" />
<circle transform="rotate(-90 40 40)" class="another-circle" cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
</body>
</html>
thanks in advance
What about using animation instead? It will run without hovering or using JavaScript.
Instead of animating the dasharray (dashoffset) I will go for transform/rotate. The dasharray is a bit tricky in this case because it is cut off.
.another-circle {
stroke-dasharray: 10;
transform-origin: center;
animation: rotateme 1s linear infinite;
}
#keyframes rotateme {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<circle cx="50" cy="50" r="36" fill="none" stroke="red" stroke-width="4" />
<circle class="another-circle" cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>

Drawing of SVG path does not start from 0

I am drawing some SVG-paths using CSS animations. It all works fine when drawing all the paths at the same time. When adding a delay to the animation, some of the parts of the paths are visible before starting the animation. They then suddenly disappear and the animation goes on just like I want it to.
Here is a codepen of it happening: Check here
// SVG code
var svgs = document.getElementsByTagName('svg');
function selfdraw(name){
for(var i=0; i<name.length; i++){
name[i].classList.add('draw');
}
}
/* SVG Styles */
svg *{
fill:none;
stroke:none;
stroke-dasharray: 0% 100%;
}
.draw .st0 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.draw .st1 {
stroke: #3DBAC4;
stroke-width:5;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 2s;
}
.draw .st2 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 3s;
}
.draw .st3 {
stroke: #8BD6DC;
stroke-width:3;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 4s;
}
#-webkit-keyframes self-draw{
0% { stroke-dasharray: 0% 100% }
100% { stroke-dasharray: 100% 0% }
}
<div style ="max-width:200px;">
<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 180 554" style="enable-background:new 0 0 180 554;" xml:space="preserve">
<path class="st0" d="M50.38,130.89l0.3-109.65l84.9,0.68l-0.3,109.65L50.38,130.89z"/>
<g>
<g>
<line class="st1" x1="69.19" y1="103.99" x2="116.08" y2="104.24"/>
</g>
<g>
<line class="st1" x1="69.28" y1="87.07" x2="116.17" y2="87.32"/>
</g>
<g>
<line class="st1" x1="69.37" y1="70.15" x2="116.26" y2="70.4"/>
</g>
<g>
<line class="st1" x1="69.46" y1="53.22" x2="116.35" y2="53.48"/>
</g>
</g>
<g>
<line class="st2" x1="82.77" y1="300.98" x2="79.54" y2="265.43"/>
</g>
<g>
<g>
<path class="st2" d="M104.68,507.15H85.32c-5.96,0-10.8-4.84-10.8-10.8v-20.83c-10.83-6.95-17.52-19.11-17.52-32
c0-20.95,17.05-38,38-38s38,17.05,38,38c0,12.89-6.68,25.05-17.52,32v20.83C115.48,502.31,110.64,507.15,104.68,507.15z"/>
</g>
</g>
<g>
<g>
<line class="st1" x1="73.82" y1="446.52" x2="116.13" y2="446.45"/>
</g>
</g>
<g>
<g>
<path class="st2" d="M104.62,518.15H85.38v-33.28h19.24V518.15z"/>
</g>
</g>
<polyline class="st1" points="80.36,432.84 92.5,484 97.5,484 110.06,432.39 "/>
<path class="st3" d="M94.86,143.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M94.86,337.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M142.84,376.94c-0.27,1.32-0.2,2.61-0.14,3.86c0.05,1.05,0.1,2.05-0.07,2.87c-0.2,0.93-1.31,1.81-3.15,2.45
c-2.43,0.85-5.19,1.82-6.37,4.26c-0.82,1.71-0.75,3.57-0.67,5.36c0.03,0.71,0.06,1.38,0.03,2.02c-0.06,1.31-0.81,2.4-2.02,2.93
c-0.58,0.25-1.2,0.47-1.86,0.69c-1.71,0.59-3.49,1.2-4.78,2.61"/>
<path class="st3" d="M170.49,420.46c-0.86,1.04-1.41,2.2-1.95,3.33c-0.45,0.95-0.88,1.85-1.42,2.5c-0.61,0.73-2.01,0.98-3.94,0.67
c-2.55-0.4-5.43-0.85-7.63,0.74c-1.53,1.12-2.34,2.79-3.12,4.41c-0.31,0.64-0.6,1.24-0.92,1.79c-0.67,1.12-1.85,1.73-3.16,1.63
c-0.63-0.05-1.28-0.16-1.97-0.27c-1.79-0.29-3.64-0.59-5.45,0.04"/>
<path class="st3" d="M169.88,474.23c-1.33,0.23-2.51,0.76-3.64,1.27c-0.96,0.43-1.87,0.84-2.7,0.98c-0.94,0.16-2.16-0.56-3.43-2.04
c-1.68-1.95-3.58-4.17-6.29-4.38c-1.89-0.14-3.59,0.61-5.24,1.33c-0.65,0.29-1.26,0.56-1.87,0.76c-1.24,0.42-2.53,0.12-3.46-0.81
c-0.45-0.45-0.87-0.95-1.33-1.48c-1.17-1.38-2.39-2.81-4.17-3.5"/>
<path class="st3" d="M21.69,479.37c0.92-0.98,1.55-2.11,2.16-3.2c0.51-0.92,0.99-1.79,1.57-2.4c0.66-0.69,2.07-0.85,3.97-0.42
c2.51,0.56,5.37,1.2,7.66-0.25c1.6-1.02,2.52-2.64,3.4-4.2c0.35-0.62,0.68-1.2,1.04-1.73c0.74-1.08,1.95-1.61,3.26-1.42
c0.63,0.09,1.27,0.24,1.95,0.39c1.77,0.41,3.59,0.82,5.44,0.31"/>
<path class="st3" d="M15.18,429.81c1.28-0.43,2.36-1.13,3.41-1.8c0.89-0.57,1.72-1.11,2.52-1.37c0.9-0.29,2.22,0.23,3.7,1.51
c1.95,1.68,4.16,3.59,6.87,3.4c1.89-0.14,3.46-1.13,4.98-2.1c0.6-0.38,1.16-0.74,1.73-1.03c1.16-0.6,2.48-0.5,3.54,0.29
c0.51,0.38,1,0.81,1.53,1.27c1.36,1.19,2.78,2.43,4.65,2.84"/>
<path class="st3" d="M41.1,379.47c1.25,0.5,2.53,0.68,3.77,0.84c1.04,0.14,2.03,0.27,2.81,0.59c0.88,0.36,1.54,1.62,1.84,3.54
c0.39,2.55,0.84,5.43,3.02,7.04c1.53,1.12,3.37,1.38,5.15,1.63c0.7,0.1,1.36,0.19,1.99,0.34c1.27,0.29,2.21,1.23,2.51,2.52
c0.14,0.62,0.24,1.27,0.34,1.96c0.27,1.79,0.54,3.65,1.7,5.18"/>
<line class="st2" x1="63" y1="243.52" x2="125" y2="243.52"/>
<polygon class="st2" points="131.5,214.5 56.5,214.5 52.5,243.5 61.5,243.5 70.27,325.92 117.74,325.92 126.41,243.5 135.5,243.5
"/>
</svg>
</div>
<button onclick="selfdraw(svgs)">CLICK ME</button>
I would like all the paths to be invisible from the start, and then draw themselves out nicely. I don't see what I have done wrong.

How can I put an animation in the path of my circular progress bar?

I have a circular progress bar that has two paths. On one of those paths increases in length as the data comes in, eventually turning the entire circle red.
SVG HTML
<path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" stroke-width="4" fill-opacity="0">
</path>
<path id="path2" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#EB483F" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.416, 295.416; stroke-dashoffset: 250"></path>
</svg>
CSS (Just makes loading of red path smoother)
#path2 {
-webkit-transition-property: stroke-dashoffset; /* Safari */
transition-property: stroke-dashoffset;
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 0.3s;
}
.viewbox {
width: 50%;
}
https://jsfiddle.net/z5yb5kr9/
I would like for the remaining gray portion to have an animation such as a small div running through it lighting it up. Something similar to this
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
I believe that I need to add some sort of keyframe animation and put the div inside the Path of the svg but I am not sure exactly what the method for doing so is.
Here's one way you could do the pulsing anumation on a circular progress bar.
In order to get the pulse effect showing inside a growing progress bar, the most obvious way is to create the pulse effect as it's own animation, then mask it with the actually progress arc.
Firstly, let's start with the plain red progress bar. I've added a grow animation for testing.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#EB483F" stroke-width="6" fill="none"/>
</svg>
Next, let's create our pulse animation which mimics the example you gave in an answer that was deleted.
.viewbox {
width: 50%;
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</svg>
It's just a translucent circle (with a dash animation) on a red background.
The penultimate step is to convert the first example into the form we need for a mask. In masks, black is transparent and white is opaque.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</svg>
The final step is to combine the last two steps. We turn the previous step into a proper <mask> and use it to mask the pulse animation.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<defs>
<mask id="progress-as-mask" >
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</mask>
</defs>
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<g mask="url(#progress-as-mask)">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</g>
</svg>
You weren't entirely clear on what you wanted. But hopefully, this has at least got you started.

Repeat SVG horizontally infinitely

I am looking to create an infinite (repeating) animation of a car going horizontally, with landscape (different layers, SVG) passing by.
I couldn't find how to repeat my SVG landscape layers along the X-axis so when I play the animation, it just keeps repeating.
My animation is done with CSS keyframes and translateX (not sure if it's the best solution though).
The idea here is that you wish to 'mimic' the background into repeating. I'm not sure this is the best solution, it's just one that I have used in the past and am very fond of.
First, we'll duplicate the background svg with the same properties and call it #back instead of #front.
keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
Next, we're setting another animation that has exactly the same properties, except it moves from -100% to 0% while the original one goes from 0% to100%`.
If we all wrap it together, the following happens:
body {
margin : 0;
overflow : hidden;
}
#front {
position : absolute;
left :0;
right:0;
bottom:0;
z-index : 9;
-webkit-animation: frontScroll 2.5s linear infinite;
animation: frontScroll 2.5s linear infinite;
}
#back {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 9
-webkit-animation: backScroll 2.5s linear infinite;
animation: backScroll 2.5s linear infinite;
}
keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
#-webkit-keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
#-webkit-keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
<div id="back">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
</g>
<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
</g>
</g>
</g>
</svg>
</div>
<div id="front">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
</g>
<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
</g>
</g>
</g>
</svg>
</div>
Now we can easily position a car or something on top of the land and voila, an never-ending driving car.

How to do line animation using CSS and SVG

My goal is to create scrolling lines similar to this site. I have started using a simple SVG shape to try and get it to work. I can do a simple animation, but not sure how to fill a specific color from start to finish.
My SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75px" height="100px" viewBox="0 -450 1230 1640" preserveAspectRatio="xMidYMid meet">
<path class="path" d="M131.2,-318.8a672.4,672.4,0,0,1,0,1344.8" stroke="black" id="e7_circleArc" style="fill: none; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 5px, 5px;" />
My CSS
.path {
stroke-dasharray: 500;
stroke-dashoffset: 5000;
animation: dash 2s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
You can see the working fiddle here - https://jsfiddle.net/cbd9L2L3/
I used the same method as the link you posted - animating the 'bottom' value of clip: rect() with jquery. With the difference that I went and used SVG shapes (one for the background and one for the one to be animated) Just a note that clip is apparently deprecated and has been replaced with clip-path. I tried with clip-path but couldn't achieve the same result.
Absolutely position both lines on top of one another if it's not obvious:
$('#line1-overlay').animate({
fontSize: 515 //some unimportant CSS to animate so we get some values - and height of the line
}, {
duration: 2000,
step: function (now, fx) { //now is the animated value from initial css value
$(this).css('clip', 'rect(0px, 217px, ' + now + 'px, 0px)')
}
});
.line-container {
position: relative;
}
.line {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line-container">
<svg version="1.1" class="line" id="line1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
<path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
</svg>
<svg version="1.1" class="line" id="line1-overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
</svg>
</div>
Also: JSFiddle DEMO
Thanks partly to this answer.

Categories