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>
Related
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
How can I animate the fill for gradient colors in SVG? I want the fill to operate from opacity 0 to opacity of 1.
.header-anim {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#logo-anim path:nth-child(1) {
stroke-dasharray: 1032;
stroke-dashoffset: 1032;
animation: line-anim 2s ease forwards, fill-black 0.5s ease forwards 2s;
}
#logo-anim path:nth-child(2) {
stroke-dasharray: 1056;
stroke-dashoffset: 1056;
animation: line-anim 2s ease forwards, fill-gradient 0.5s ease forwards 2s;
}
#keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}
#keyframes fill-black {
from {
fill: transparent;
}
to {
fill: black;
}
}
#keyframes fill-gradient {
from {
fill: transparent;
}
to {
fill: url(#paint0_linear_0_1);
}
}
<div class="header-anim">
<svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" />
<path d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" />
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="131.003"
y1="48.5"
x2="131.003"
y2="232.748"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A77027" />
<stop offset="0.53125" stop-color="#F1E189" />
<stop offset="1" stop-color="#A77027" />
</linearGradient>
</defs>
</svg>
</div>
codepen link for reproduced error.
Currently the gradient fill just snap into existence instead of slowly fading in like black fill. How can I achieve this animation? Thank you
You can't animate in "paint" fills, such as gradients, like you can with colours.
What you can do instead is animate the fill-opacity. And in fact it actually simplifies the SVG. Because use can use the same fill animation for both paths.
.header-anim {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#logo-anim path:nth-child(1) {
stroke-dasharray: 1032;
stroke-dashoffset: 1032;
fill: black;
fill-opacity: 0;
animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s;
}
#logo-anim path:nth-child(2) {
stroke-dasharray: 1056;
stroke-dashoffset: 1056;
fill: url(#paint0_linear_0_1);
fill-opacity: 0;
animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s;
}
#keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}
#keyframes fill-anim {
from {
fill-opacity: 0;
}
to {
fill-opacity: 1;
}
}
<div class="header-anim">
<svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" />
<path id="path-with-grad" d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" />
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="131.003"
y1="48.5"
x2="131.003"
y2="232.748"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A77027" />
<stop offset="0.53125" stop-color="#F1E189" />
<stop offset="1" stop-color="#A77027" />
</linearGradient>
</defs>
</svg>
</div>
I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
I am trying to fill the hearts with a linear-gradient color instead of the ##9356DC I am using in my code. Problem is, each time I am using the linear-gradient, the heart doesn't fill with any color anymore.
Thanks in advance for all the help you can provide to me!
.icon {
fill: transparent;
stroke: black;
stroke-width: 50;
cursor: pointer;
position: absolute;
right: 1.5rem;
bottom: 2rem;
}
.icon svg {
overflow: visible;
width: 1.6rem;
}
.icon .heart-main:active path {
animation: fill-animation 1.5s ease-in-out forwards;
stroke: #9356DC;
}
#keyframes fill-animation {
10% {
fill: #9356DC;
}
80% {
fill: #9356DC;
}
100% {
fill: #9356DC;
}
}
<div class="icon">
<svg class="heart-main" viewBox="0 0 512 512" width="100" title="heart">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
</svg>
</div>
To fill linear-gradient, you will have to add linearGradient node inside the definitions section of your SVG file like below: (Read More about Linear Gradient)
<defs>
<linearGradient id="FillGradient" gradientTransform="rotate(90)">
<stop offset="2%" stop-color="#FFF" />
<stop offset="95%" stop-color="#9356DC" />
</linearGradient>
</defs>
Make sure you are adding id attribute which is going to be used in CSS to fill the gradient like below:
#keyframes fill-animation {
0%{
fill-opacity: 0.1;
}
10% {
fill: url(#FillGradient);
fill-opacity: 0.1;
}
80% {
fill: url(#FillGradient);
fill-opacity: 1;
}
100% {
fill: url(#FillGradient);
fill-opacity: 1;
}
}
You can remove the fill-opacity and of course change the color of gradient in linearGradient node as per your need.
See the working Snippet below: (I have commented few styles just to make it big and clear)
.icon {
fill: transparent;
stroke: black;
stroke-width: 50;
cursor: pointer;
/* position: absolute;
right: 1.5rem;
bottom: 2rem;*/
}
.icon svg {
overflow: visible;
width: 5.6rem; /* changed from 1.6 to 5.6 */
}
.icon .heart-main:active path {
animation: fill-animation 1.5s ease-in-out forwards;
stroke: #9356DC;
}
#keyframes fill-animation {
0%{
fill-opacity: 0.1;
}
10% {
fill: url(#FillGradient);
fill-opacity: 0.1;
}
80% {
fill: url(#FillGradient);
fill-opacity: 1;
}
100% {
fill: url(#FillGradient);
fill-opacity: 1;
}
}
<div class="icon">
<svg class="heart-main" viewBox="0 0 512 512" width="300" title="heart">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
<defs>
<linearGradient id="FillGradient" gradientTransform="rotate(90)">
<stop offset="2%" stop-color="#FFF" />
<stop offset="98%" stop-color="#9356DC" />
</linearGradient>
</defs>
</svg>
</div>
you could use my code
#keyframes value {
0%{background-image: linear-gradient(90deg, red, purple, green);}
25%{background-image: linear-gradient(90deg, orange, yellow,blue);}
50%{background-image: linear-gradient(90deg, black, grey, white);}
100%{background-image: linear-gradient(90deg,lime,violet,magenta);}
}
then use
.icon{
animation-name: value;
animation-duration: 50s;
animation-iteration-count: infinite;
}
you could use background-image instead of fill and if that doesn't work you could use color instead.
i hope i helped but i am pretty new to css myself.
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>
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;
}
}