I'm basically trying to use CSS to make this SVG signature animation happen for my own SVG signature: https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846
I've got it close, but for some reason it's drawing the outline of the SVG image, instead of the strokes of the SVG itself? I'm not sure what I'm doing wrong. Here's what I've got:
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
#keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}
<div class="signature">
<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 591.3 429.4" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c53.5-7.3,104.9-28.2,148.7-59.7c44.1-31.7,79.6-74.2,104.2-122.5c13.8-27.1,24.2-55.8,31.5-85.4
c-1-0.1-2-0.3-2.9-0.4c-6.4,51.9-10.7,109.6,24.8,152.7c1.1,1.3,3.2-0.4,2.4-1.8c-9.3-16.7-25.7-27.6-42.3-36.3
c-19.1-10.1-39.2-18.9-59.5-26.3C169.2,83.5,125.8,75.6,84.4,87c-19.4,5.3-37.9,14.9-51.4,30c-1.3,1.4,0.8,3.6,2.1,2.1
c24.6-27.5,64.8-36.2,100.4-34.4c43.3,2.2,84.9,19.5,123.4,38.3c18.8,9.2,38.6,20.4,49.1,39.3c0.8-0.6,1.6-1.2,2.4-1.8
c-34.9-42.3-30.2-99.6-23.9-150.5c0.2-1.7-2.5-2-2.9-0.4c-13,52.7-36.2,103-70.3,145.4c-33,41-75.7,73.6-123.8,95
c-28,12.5-57.8,20.9-88.2,25.1C-0.8,275.2,0,278.1,1.9,277.9L1.9,277.9z"/>
</g>
</g>
<g>
<g>
<path class="stroke-mber" d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9c3,1.4,6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2c-12.1-15.7,11.2-29.8,21.6-37.6
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>
As far as i can see it, the problem is your svg-file.
Just go back to your illustration-tool and recreate your signature with just a colored path and no fill. Then your animation will just move along this path and not around it.
I did just with the "A" in the example below.
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
#keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}
<div class="signature">
<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 591.3 429.4" style="enable-background:new 0 0 591.3 429.4;" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c0,0,217-19.4,281.7-268.3c0,0-14.1,118,27,151.2c0,0-158.3-140.8-277.6-43.8"/>
</g>
</g>
<g>
<g>
<path
class="stroke-mber"
d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9s6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2C536.3,104.9,559.6,90.8,570,83
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>
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 am following this codepen to create a dialog animation. But the animation doesn't seem to go smooth like the reference when I set the bigger dialog width and height. It seems like the issue is with svg stroke-dashoffset values but I am not sure what values do I need to set. Here is the codepen that I reproduced.
<div id="modal-close-default" class="" uk-modal>
<div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
..
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
</svg>
</div>
</div>
#modal-close-default {
.uk-modal-dialog.custom-modal {
..
}
.modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
rect {
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 976; // total of dialog width and height (not sure what value to add)
stroke-dashoffset: 976;
}
}
&.uk-open>.uk-modal-dialog.custom-modal {
..
.modal-svg {
rect {
animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
}
}
}
}
#keyframes sketchIn {
0% {
stroke-dashoffset: 976;
}
100% {
stroke-dashoffset: 0;
}
}
You miscalculated the length of the perimeter of the rectangle
If it's rough, then you need to consider this (width +height) * 2 = 1952px
The JS method getTotalLength() will help you calculate exactly the perimeter, taking into account the roundings.
Happened with rounding ~= 1946px
.modal-svg {
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}
rect {
stroke: silver;
stroke-width: 6px;
stroke-dasharray: 1946; // total of dialog width and height (not sure what value to add)
stroke-dashoffset: 1946;
animation: sketchIn 5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
}
#keyframes sketchIn {
0% {
stroke-dashoffset: 1946;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="modal-close-default" class="uk-modal">
<div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 376" width="600" height="376" >
<rect id="rect" x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
</svg>
</div>
</div>
<script>
let total = rect.getTotalLength();
console.log(total)
</script>
svg stroke animate start from right, but i want to stroke that animate form left to right. After animating stroke remain stands. can add any animate css class like fadeIn during the animation
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>
You can make the stroke-dashoffset a negative value:
.cls-1 {
fill: none;
stroke: #00a139;
stroke-miterlimit: 10;
}
svg {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
background: #1e1e1e;
}
#Path_70 {
stroke-dasharray: 1800;
stroke-dashoffset: -1800;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
<defs>
</defs>
<g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
<path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
</g>
</svg>
I'm trying to create a animation of a svg path and is working well on chrome/firefox but on edge/IE is not.
The code is the follow:
.pathNivel1, .pathNivel2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-ms-transform: dash 2s forwards infinite;
animation: dash 2s forwards infinite;
}
#-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.cls-2, .cls-3, .cls-4, .cls-7, .cls-8 {
fill: none;
}
.cls-2 {
stroke: #497faa;
}
.cls-3 {
stroke: #69c;
}
.cls-2, .cls-3, .cls-4, .cls-8 {
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-2, .cls-3, .cls-4 {
stroke-width: 65px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="275" height="470.85">
<g>
<path class="cls-3 pathNivel2" d="m39.200012,153.566565a82.68,82.68 0 0 1 82.67,82.68" />
</g>
</svg>
What is wrong or missing?
Thx,
Best regards
...........................................................................
I found a solution on css-tricks on comment of Amelia BR.
.path {
stroke-dasharray: 0 1000;
/*stroke-dashoffset: 1000; /* NOT NEEDED */
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dasharray: 0 1000; /* zero-length stroke,
1000-length gap */
}
to {
stroke-dasharray: 1000 0;/* 1000-length stroke,
zero-length gap */
}
}
<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>
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';
}
}