Related
I'm trying to reproduce this piece of code (animated button using SVG and CSS):
https://codepen.io/jscottsmith/pen/azRObp/
To keep the code clean, I wanted to use xlink with that. My current code looks as follows:
#import "compass/css3";
body {background:violet}
#keyframes spin {
to { transform: rotate(360deg); }
}
.stroke-dotted {
opacity: 0;
stroke-dasharray: 4,5;
stroke-width: 1px;
transform-origin: 50% 50%;
animation: spin 4s infinite linear;
transition: opacity 1s ease,
stroke-width 1s ease;
}
.stroke-solid {
stroke-dashoffset: 0;
stroke-dashArray: 300;
stroke-width: 4px;
transition: stroke-dashoffset 1s ease,
opacity 1s ease;
}
.icon {
transform-origin: 50% 50%;
transition: transform 200ms ease-out;
}
#play:hover .stroke-dotted {
stroke-width: 4px;
opacity: 1;
}
#play:hover .stroke-solid {
opacity: 0;
stroke-dashoffset: 300;
}
#play:hover .icon {
transform: scale(1.05);
}
#PlayNow {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width:10em;
height:auto;
display:block;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" id="PlayNow" viewBox="0 0 100 100" x="0px" y="0px" ><use xlink:href="#play" id="playTrailerButton" /></svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="play" viewBox="0 0 100 100">
<path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</symbol>
</svg>
But the animation doesn't work.. Any ideas or hints - why? jsfiddle is here:
https://jsfiddle.net/4ztwr3c9/6
You have this:
#PlayNow {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width:10em;
height:auto;
display:block;
}
There is no element with the id #PlayNow. The example below has #PlayNow selector replaced by the original #play and your changes have been added, and I removed the Compass as well which I guess you can add it back, just be mindful of each change and retest so it's easier to debug and backtrack.
#keyframes spin {
to {
transform: rotate(360deg);
}
}
.stroke-dotted {
opacity: 0;
stroke-dasharray: 4, 5;
stroke-width: 1px;
transform-origin: 50% 50%;
animation: spin 4s infinite linear;
transition: opacity 1s ease, stroke-width 1s ease;
}
.stroke-solid {
stroke-dashoffset: 0;
stroke-dashArray: 300;
stroke-width: 4px;
transition: stroke-dashoffset 1s ease, opacity 1s ease;
}
.icon {
transform-origin: 50% 50%;
transition: transform 200ms ease-out;
}
#play:hover .stroke-dotted {
stroke-width: 4px;
opacity: 1;
}
#play:hover .stroke-solid {
opacity: 0;
stroke-dashoffset: 300;
}
#play:hover .icon {
transform: scale(1.05);
}
html {
height: 100%;
}
body {
height: 100%;
/*background-color: #30FF98;
background: radial-gradient(#71edb5, #30ff98);*/
}
#play {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Your Changes */
width:10em;
height:auto;
display:block;
}
body {background:violet}
<svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</svg>
You can change/override some properties of a <use> element - provided these are not already set in your <symbol> element (see first example).
Since you need to change the dash-array values for different elements you can use css variables, that could be changed on hover.
body {
background: violet;
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
:root {
--fill: #fff;
--strokeWidth: 4px;
--scale: 1;
--strokeDashOffset: 10;
--strokeDashArray: 4 5;
--opacity: 0;
--strokeDashArraySolid: 300;
--strokeDashOffsetSolid: 0;
--opacitySolid: 1;
}
.PlayNow {
display: inline-block;
height: 10em;
}
.PlayNow2 {
--fill: #ccc;
--strokeWidth: 6px;
--scale: 1.5;
}
.PlayNow:hover {
--scale: 1.05;
--strokeDashOffset: 10;
--strokeDashArray: 4 5;
--strokeDashArraySolid: 300;
--strokeDashOffsetSolid: 300;
--opacity: 1;
--opacitySolid: 0;
}
#playTrailerButtonSimple:hover {
fill: green!important;
stroke: green!important;
stroke-dasharray: 10 5;
}
<a href="#">
<svg class="PlayNow PlayNowSimple" xmlns="http://www.w3.org/2000/svg" id="PlayNowSimple" viewBox="0 0 100 100">
<use href="#playSimple" id="playTrailerButtonSimple" stroke-width="4" fill="red" stroke="red"/>
</svg> Simple icon
</a>
<a href="#">
<svg class="PlayNow" xmlns="http://www.w3.org/2000/svg" id="PlayNow" viewBox="0 0 100 100">
<use href="#play" id="playTrailerButton" />
</svg>
</a>
<a href="#">
<svg class="PlayNow PlayNow2" xmlns="http://www.w3.org/2000/svg" id="PlayNow2" viewBox="0 0 100 100">
<use href="#play" id="playTrailerButton" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="circle">
<path fill="none" style="stroke:var(--fill)" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5" />
</symbol>
<symbol id="play" viewBox="0 0 100 100">
<use href="#circle" transform-origin="center" class="stroke-solid" style="stroke-width: var(--strokeWidth); stroke-dasharray: var(--strokeDashArraySolid); stroke-dashoffset: var(--strokeDashOffsetSolid); opacity:var(--opacitySolid); transition: stroke-dashoffset 1s ease, opacity 1s ease;" />
<use href="#circle" transform-origin="center" class="stroke-dotted" style="stroke-width: var(--strokeWidth); stroke-dasharray: var(--strokeDashArray); stroke-dashoffset: var(--strokeDashOffset); opacity:var(--opacity); animation: spin 4s infinite linear; transition: opacity 1s ease, stroke-width 1s ease;" />
<path class="icon" transform-origin="center" style="fill:var(--fill);transform:scale(var(--scale));transition:0.3s" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z" />
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="circle2">
<path fill="none" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5" />
</symbol>
<symbol id="playSimple" viewBox="0 0 100 100">
<use href="#circle2" transform-origin="center" class="stroke-solid" />
<path stroke-width="0" class="icon" transform-origin="center" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z" />
</symbol>
</svg>
External <use> reference
To some extent, you could also use external svg files like so:
<a href="#">
<svg class="svgBtn" xmlns="http://www.w3.org/2000/svg" id="PlayNow" viewBox="0 0 100 100" x="0px" y="0px">
<use href="button.svg#play" id="playTrailerButton" style="transition:0.3s"/>
</svg>
</a>
** Drawback:** Your animations/transitions won#t work in most browsers (Firefox can render them)
I have this SVG arrow that is consist of a path and a polygon. I want to animate the path and the polygon along the path.
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397" width="242.66" height="397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85"/>
<polygon points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
I have tried this css, and it animates the path.
path {
stroke: #000000;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 4s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397" width="242.66" height="397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85"/>
<polygon points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
However, I can not figure how to move the polygon along the path with the same pace.
I have used this code that does not work.
polygon {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2.1s linear forwards infinite;
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
How to animate the polygon along the same path?
The arrow will get rotated and positioned according to the offset-path.
css offset-path or svg SMIL <mpath> expect your animated element to point at the x/y origin of your svg like so:
Your arrow element is already placed on the path – the browser will add the current x/y values to the coordinates on your motion path.
In this case: your arrow disappears due to huge offsets. (see left example.)
.wrp {
padding: 1em;
//border: 1px solid #ccc;
display: inline-block;
}
svg {
display: inline-block;
width: 10em;
overflow: visible;
border: 1px solid #ccc;
}
.motionPath {
stroke: #000;
stroke-dasharray: 0 100;
animation: dash 2s linear forwards infinite;
}
.arrow {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2s linear forwards infinite;
}
polygon {
offset-distance: 0%;
offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
animation: move 2s linear forwards infinite;
}
#keyframes dash {
to {
stroke-dasharray: 100 100;
}
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<div class="wrp">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397">
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: bevel;
stroke-width: 4px;
}
</style>
<path class="cls-1 motionPath" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85" pathLength="100" />
<path class="arrow" stroke="red" fill="none" stroke-width="4" d="M-12.5 -12.5 l 12.5 12.5 l-12.5 12.5"></path>
</svg>
</div>
<div class="wrp">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397">
<style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}</style>
<path class="cls-1 motionPath" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85" pathLength="100"/>
<polygon fill="red" style="transform:translate(-25px, -300px)" points="0 384.74 2.04 381.29 19 391.37 27.81 373.72 31.39 375.51 20.65 397 0 384.74"/>
</svg>
</div>
I have replaced your arrow with another <path> element but you can reposition your original arrow polygon in an editor like inkscape to get the right coordinates and rotation.
You will also need to set a pathLength or calculate the exact pathLength with js like path.getTotalLength()
Otherwise you can't synchronize your stroke animation with the arrow movement.
After an odd issue I had a few moments ago, I kept on my CSS animations experiments with SVG, but now, regarding colourizing.
My initial idea was to apply the animation rules directly over the <g> tag grouping all <path>, hoping it would work "automagically". Yeah, right...
After convincing myself that I would really need to define the rules directly over the <path> inside, I thought I'd have to play around with timings, so the first shape would start with a colour and fades to the start colour of the second. Then the second shape would end with the colour of the first shape, simulating a back-and-forth effect.
Here:
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.left path {
animation: colorize-left 6s linear infinite;
animation-delay: 4s;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right path {
animation: colorize-right 8s linear infinite;
animation-delay: 6s;
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes colorize-left {
0% {
fill: #0f68e0;
}
100% {
fill: #1998ea;
}
}
#keyframes colorize-right {
0% {
fill: #1998ea;
}
100% {
fill: #0f68e0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<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="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g id="shapes">
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
But I obviously failed as the transitions aren't smooth as intended. Could anyone help me out here?
Note: If needed, a small explanation would be nice because this SVG is just a fragment of the real thing, meaning more shapes will participate this timed transition
You are almost good, the issue is that the last state of the animation is different from the first and since you made the animation to be infinite you will have a jump.
An idea to avoid this is to make the animation alternate. You need to also make both animation with the same duration and add a delay to only one element.
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.left path {
animation: colorize-left 4s linear infinite alternate;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right path {
animation: colorize-right 4s linear infinite alternate;
animation-delay: 2s;
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes colorize-left {
0% {
fill: #0f68e0;
}
100% {
fill: #1998ea;
}
}
#keyframes colorize-right {
0% {
fill: #1998ea;
}
100% {
fill: #0f68e0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<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="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g id="shapes">
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
I have animated a svg path but I need some help. I want to know if it's possible to animate the path at a certain speed and then an other speed. Here is a JSFIDDLE for more explanation.
I want the line to go fast and then the text to be less fast.
HTML
<svg class="svg-path" 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 2238.6 153.7" enable-background="new 0 0 2238.6 153.7" xml:space="preserve">
<path class="path" stroke-width="2" fill="none" stroke="#000000" d="M0,149.5c0.6,0,1629.7,0,1631,0c2.7,0,10.6,0,12.4,0c3.3,0,5.9,0,8.2,0c4.1,0,8.1,0,10.9,0
c3.8,0,5.3,0,8.7,0c3.9,0,3.6,0.1,8.1,0c6.3-0.2,8.2-0.9,12.7-2.6c4.5-1.7,8.3-4.1,11.4-7.1c3.1-3,5.5-6.6,7.1-10.7
c1.6-4.1,2.4-8.5,2.4-13.2c0-5.1-1-9.3-3.1-12.6c-2.1-3.3-4.8-6.1-8.2-8.3c-3.4-2.2-7.3-4.1-11.6-5.6c-4.3-1.5-8.8-3-13.3-4.4
c-4.6-1.4-9-3-13.3-4.8c-4.3-1.8-8.2-4-11.6-6.8c-3.4-2.8-6.1-6.2-8.2-10.3c-2.1-4.1-3.1-9.3-3.1-15.5c0-4.8,0.9-9.5,2.8-14
s4.5-8.5,8.1-11.9c3.5-3.4,7.9-6.2,13.1-8.3c5.2-2.1,11.1-3.1,17.8-3.1c7.5,0,19.1,0,25.5,0c7.5,0,22.4,0,35.9,0v140.5l44.4,0
L1788,9.6l66.3,110.3l64.5-109.8l-0.2,140.9h87.1c0,0,64.7,0,64.7-76.9c0-72-63.3-69.4-63.3-69.4s-60.7-2.7-60.7,69.2
c0,77,56.8,76.9,61,77c0.2,0,89.6,0,93.9,0V13.5l104.7,137.3l0-143.7l32.7,0 M1946.3,73.9 M2070.3,74.1"/>
</svg>
CSS
svg{
&.svg-path{
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
.path {
stroke-dasharray: 3800;
stroke-dashoffset: 0;
animation: dash 3.5s linear reverse;
}
}
#keyframes dash {
to {
stroke-dashoffset: 3800;
}
}
Is that possible to do this with one svg path ?
use this example http://jsfiddle.net/wxx5o9ms/1/
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
70% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
I've animated a SVG and I want to use keyframe to set the speed but I'm not able to achieve what I want. I want that the line go fast and then the text to be less fast. But I don't really understand how it's work.
Here is a Jsfiddle for better explanation.
<svg class="svg-path" 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="-195.9 282.3 995.9 35.5" enable-background="new -195.9 282.3 995.9 35.5" xml:space="preserve">
<path class="path" stroke-width="1" fill="none" stroke="#000000" d="M-195.9,316.9c0.1,0,853.9,0,854.2,0c0.6,0,2.5,0,2.9,0c0.8,0,1.4,0,1.9,0c1,0,1.9,0,2.5,0
c0.9,0,1.2,0,2,0c0.9,0,0.8,0,1.9,0c1.5,0,1.9-0.2,3-0.6c1-0.4,1.9-1,2.7-1.7c0.7-0.7,1.3-1.5,1.7-2.5c0.4-1,0.6-3,0.6-4.1
c0-1.2-0.3-2.1-0.7-2.9c-0.4-0.8-1-1.4-1.9-1.9c-0.8-0.5-1.7-1-2.7-1.3s-2.1-0.7-3.1-1c-1.1-0.3-2.1-0.7-3.1-1.1
c-1-0.4-1.9-0.9-2.7-1.6c-0.8-0.7-1.4-1.4-1.9-2.4c-0.5-1-0.7-2.2-0.7-3.6c0-1.1,0-1.5,0.5-2.5c0.4-1,1.4-2.1,2-2.7
c0.8-0.8,1.9-1.2,3.1-1.7c1.2-0.5,2.6-0.7,4.2-0.7c1.7,0,4.5,0,5.9,0c1.7,0,5.2,0,8.4,0v32.8h10.4l0-32.9l15.5,25.7l15-25.6l0,32.9
h20.3c0,0,15.1,0,15.1-17.9c0-16.8-14.8-16.2-14.8-16.2s-14.2-0.6-14.2,16.2c0,18,13.2,17.9,14.2,18c0,0,20.9,0,21.9,0v-32l24.4,32
v-33.5h7.6"/>
</svg>
CSS
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
50% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
Can you try to elaborate on, what you're trying to achieve?
If you want the line to slow down in the end to write out the letters in a slower fashion, you would just allocate more time to complete the animation from about stroke-dashoffset by making it go from 0-2000 in the beginning 5% of the animation, and then reserving the rest of it for the remainder of the time, like this:
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
5% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
But I'm not really sure I understood correctly, so I'm not sure this is what you're trying to achieve.