CSS Infinite Loop issue - css
I am happy with the current animation but Im having trouble getting the animation to start over from the beginning and looping infinitely. Can use some help on this one.I have also included the svg as well.I believe that the issue may be related to the forwards keyword as the animation runs sequentially from bar 1 to bar 7. Thanks again for the help as this has been a bit of a concern for a while now.
body {
background: #000;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
svg g path {
opacity: 0;
animation: fadeIn 1s ease-in-out 300ms forwards;
}
svg g path#bar1 {
animation-delay: 500ms;
}
svg g path#bar2 {
animation-delay: 1s;
}
svg g path#bar3 {
animation-delay: 2s;
}
svg g path#bar4 {
animation-delay: 3s;
}
svg g path#bar5 {
animation-delay: 4s;
}
svg g path#bar6 {
animation-delay: 5s;
}
svg g path#bar7 {
animation-delay: 6s;
}
<svg width="40pt" height="40pt" viewBox="0 0 236 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<g id="Group 2">
<g id="Group 1">
<g id="surface1">
<g id="Group">
<path id="bar7" d="M236 32.6488L214.5 5L193 32.6488H204.579V192.693H223.897V32.6488H236Z"
fill="white" />
</g>
<g id="Group_2">
<path id="bar6" d="M172 56V192.645H193.404V56H172Z" fill="white" />
</g>
<g id="Group_3">
<path id="bar5" d="M139 76V192.504H159.404V76H139Z" fill="white" />
</g>
<g id="Group_4">
<path id="bar4" d="M106 89V192.363H126.404V89H106Z" fill="white" />
</g>
<g id="Group_5">
<path id="bar3" d="M75 112V191.957H96.4042V112H75Z" fill="white" />
</g>
<g id="Group_6">
<path id="bar2" d="M43 130V192.957H64.4042V130H43Z" fill="white" />
</g>
<path id="bar1" d="M11 149V191.957H31V149H11Z" fill="white" />
</g>
</g>
</g>
</g>
</svg>
Check this out
#keyframes fadeIn {
0% {
opacity: 0;
}
50%{
opacity:1
}
100% {
opacity:0;
}
}
body {
background: #444;
}
path[class^="bar"] {
opacity: 0;
animation: fadeIn 5s ease;
animation-iteration-count: 10;
}
path.bar1 {
animation-delay: 500ms;
}
path.bar2 {
animation-delay: 1s;
}
path.bar3 {
animation-delay: 1.5s;
}
path.bar4 {
animation-delay: 2s;
}
path.bar5 {
animation-delay: 2.5s;
}
path.bar6 {
animation-delay: 3s;
}
path.bar7 {
animation-delay: 3.5s;
}
<body>
<svg width="40pt" height="40pt" viewBox="0 0 236 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<g id="Group 2">
<g id="Group 1">
<g id="surface1">
<g id="Group">
<path class="bar7" d="M236 32.6488L214.5 5L193 32.6488H204.579V192.693H223.897V32.6488H236Z"
fill="white" />
</g>
<g id="Group_2">
<path class="bar6" d="M172 56V192.645H193.404V56H172Z" fill="white" />
</g>
<g id="Group_3">
<path class="bar5" d="M139 76V192.504H159.404V76H139Z" fill="white" />
</g>
<g id="Group_4">
<path class="bar4" d="M106 89V192.363H126.404V89H106Z" fill="white" />
</g>
<g id="Group_5">
<path class="bar3" d="M75 112V191.957H96.4042V112H75Z" fill="white" />
</g>
<g id="Group_6">
<path class="bar2" d="M43 130V192.957H64.4042V130H43Z" fill="white" />
</g>
<path class="bar1" d="M11 149V191.957H31V149H11Z" fill="white" />
</g>
</g>
</g>
</g>
</svg>
</body>
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
svg g rect {
opacity: 0;
animation: fadeIn 1s ease-in-out 300ms infinite;
&#bar1 {
animation-delay: 500ms;
}
&#bar2 {
animation-delay: 1s;
}
&#bar3 {
animation-delay: 2s;
}
&#bar4 {
animation-delay: 3s;
}
&#bar5 {
animation-delay: 4s;
}
&#bar6 {
animation-delay: 5s;
}
&#bar7 {
animation-delay: 6s;
}
}
<svg><g>
<rect fill="#bb22930" width="100" height="100"></rect>
</g></svg>
The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping. Add the following to your svg g path CSS selector function animnation-iteration-count: infinite.
Related
SVG CSS animation smooth transition and point of origin
I have the following setup where multiple objects are zoomed out in a staggered delay. I am facing the following issues:
The zoom-out animation is set up to accelerate from 0% to 15% and then slow down the rest of the keyframes. But when the animation transitions from 15% to 16% the motion is visibly jarring. How can I make this transition smooth?
When the circles start out they appear from the left, not centered on their point of origin. How can I fix this?
HTML:
<div>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="blk" cx="10" cy="10" r="5"/>
<circle class="red" cx="20" cy="10" r="5" color="red" stroke="red" fill="red"/>
<circle class="green" cx="30" cy="20" r="5" color="red" stroke="green" fill="green"/>
</svg>
</div>
CSS:
.blk{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 2.5s;
}
.red{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 1.5s;
}
.green{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 0.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5,5);
}
15% {
transform: scale(2,2);
}
100% {
transform: scale(1,1);
}
}
One posible solution would be having the circles with cx="0" and cy="0" and using those circles with an x and y position like so:
circle {
animation-name: zoom-out;
animation-duration: 2s;
/*animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;*/
animation-iteration-count: infinite;
}
#blk {
animation-delay: 2.5s;
}
#red {
stroke: red;
fill: red;
animation-delay: 1.5s;
}
#green {
stroke: green;
fill: green;
animation-delay: 0.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5, 5);
}
15% {
transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
}
}
<div>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="blk" r="5" />
<circle id="red" r="5" />
<circle id="green" r="5" />
</defs>
<use xlink:href="#blk" x="10" y="10" />
<use xlink:href="#red" x="20" y="10" />
<use xlink:href="#green" x="30" y="20" />
</svg>
</div>
Also in order to make the transition smooth you may use animation-timing-function: linear; instead of ease-in-out
UPDATE
The OP is commenting:
As for the point of origin, the actual SVG I am using is an illustator vector and each object in it has multiple paths and shapes. So, the red circle would actually be an object with 50 paths/shapes. How would I zero out the coordinates for a collection of paths?
Next comes an example where I'm using a collection of paths:
let wrap = document.querySelector("#red .wrap")
let bb = wrap.getBBox();
wrap.setAttribute("transform",`translate(${-(bb.x + bb.width/2)}, ${-(bb.y + bb.height/2)})`)
g[id] {
animation-name: zoom-out;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
stroke: red;
fill: red;
animation-delay: 1.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5, 5);
}
15% {
transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
}
}
svg{border:solid}
<svg viewBox="0 0 1000 500">
<defs>
<g id="red">
<g class="wrap">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,108.953c3.145-2.115,5.896-3.967,8.624-5.802 c20.948,12.522,42.66,12.281,65.725,4.354c0.778,3.128,1.687,6.18,2.285,9.291c3.208,16.677,0.616,36.326-2.758,52.719
c0,0-152.162,0.035-154.82,0.035c8.408,10.604,18.647,16.674,31.173,16.227c15.059-0.536,30.099-2.491,45.07-4.433
c26.453-3.431,50.783,0.317,70.991,19.392c1.675,1.581,7.179,9.382,3.632,13.47c-3.524,4.062-12.062-1.289-13.795-3.036
c-10.215-10.294-22.693-16.145-37.008-15.98c-14.568,0.166-29.103,2.376-43.679,3.216c-11.405,0.656-22.888,1.255-34.268,0.634
c-9.862-0.538-18.646-5.258-25.691-12.131c-15.127-14.758-26.56-31.716-26.923-53.792c-0.396-24.125,17.008-44.198,40.835-48.153
c23.477-3.897,43.372,4.666,62.051,17.569C115.82,104.515,118.537,106.717,121.506,108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651c3.646,6.147,7.048,11.646,10.189,17.291
c1.404,2.523,2.761,3.481,5.888,2.718c14.09-3.439,28.227-3.932,42.396-0.046c1.308,0.358,3.815-0.733,4.608-1.923
c4.043-6.072,7.705-12.398,11.814-19.149c8.693,15.648,15.012,31.447,13.169,49.204c-1.48,14.266-9.114,24.946-22.028,31.172
c-17.641,8.503-35.969,9.511-54.067,1.823c-15.169-6.443-22.96-18.723-23.677-35.151C117.396,49.828,122.038,32.188,129.747,18.651z
M189.467,81.017c7.232,0.084,15.334-6.867,14.292-13.652c-0.832-5.418-11.566-6.019-11.732-6.025
c-7.238-0.308-13.768,6.133-14.144,13.949C177.731,78.444,182.773,80.938,189.467,81.017z M145.369,81.453
c3.597,0.294,11.258-2.441,11.324-6.992c0.079-5.443-3.357-10.158-8.897-12.255c-5.807-2.197-16.523,1.484-17.065,5.19
C129.692,74.494,138.107,81.089,145.369,81.453z"/>
</g>
</g>
</defs>
<use xlink:href="#red" x="300" y="175" />
</svg>
In order to zero out the coordinates for a collection of paths I'm using javaScript.
first I'm wrapping the paths in a group class="wrap"
I'm getting the bounding box of the wrap: let bb = wrap.getBBox();
I'm using the bounding box values to calculate the required translation and set the transform attribute of the wrap.
Awesome css animation not working on iOS even setting -webkit- on classes and #-webkit-keyframes
I have the following cshtml file content working perfectly on all browsers, except on my mobile (iPhone 8). On Android mobiles it works fine.
I've also added everywhere where necessary the prefix -webkits- on all #keyframesand on all classes as you can see in the following code-lines:
<div class="footer-top section bg-white m-0 p-0" id="footer">
<svg width="100%" height="100%" viewBox="0 0 100 25">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 13 -9" result="goo" />
<xfeBlend in="SourceGraphic" in2="goo" />
</filter>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
<use id="wave4" class="wave" xlink:href="#wave" x="0" y="2"></use>
<g class="gooeff" filter="url(#goo)">
<circle class="drop drop1" cx="20" cy="2" r="8.8" />
<circle class="drop drop2" cx="25" cy="2.5" r="7.5" />
<circle class="drop drop3" cx="16" cy="2.8" r="9.2" />
<circle class="drop drop4" cx="18" cy="2" r="8.8" />
<circle class="drop drop5" cx="22" cy="2.5" r="7.5" />
<circle class="drop drop6" cx="26" cy="2.8" r="9.2" />
<circle class="drop drop1" cx="5" cy="4.4" r="8.8" />
<circle class="drop drop2" cx="5" cy="4.1" r="7.5" />
<circle class="drop drop3" cx="8" cy="3.8" r="9.2" />
<circle class="drop drop4" cx="3" cy="4.4" r="8.8" />
<circle class="drop drop5" cx="7" cy="4.1" r="7.5" />
<circle class="drop drop6" cx="10" cy="4.3" r="9.2" />
<circle class="drop drop1" cx="1.2" cy="5.4" r="8.8" />
<circle class="drop drop2" cx="5.2" cy="5.1" r="7.5" />
<circle class="drop drop3" cx="10.2" cy="5.3" r="9.2" />
<circle class="drop drop4" cx="3.2" cy="5.4" r="8.8" />
<circle class="drop drop5" cx="14.2" cy="5.1" r="7.5" />
<circle class="drop drop6" cx="17.2" cy="4.8" r="9.2" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
</g>
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</g>
</svg>
and the related css style sheet:
.footer-top {
--col-deepblue: #4478e3;
width: 100vw;
height: auto;
overflow: auto;
position: relative;
margin: 0;
padding: 0;
}
svg {
width: 100%;
overflow: auto;
overflow-x: hidden;
}
.wave {
animation: wave 3s linear;
animation-iteration-count: infinite;
fill: #222222;
-webkit-animation: wave 3s linear;
-webkit-animation-iteration-count: infinite;
}
.drop {
fill: var(--col-deepblue);
xfill: #99000055;
animation: drop 3.2s linear infinite normal;
stroke: var(--col-deepblue);
stroke-width: 1;
transform: translateY(25px);
transform-box: fill-box;
transform-origin: 50% 100%;
/*-webkit-*/
-webkit-text-stroke: var(--col-deepblue);
-webkit-text-stroke-width: 1;
-webkit-animation: drop 3.2s linear infinite normal;
-webkit-transform: translateY(25px);
-webkit-transform-box: fill-box;
-webkit-transform-origin: 50% 100%;
}
.drop1 {
}
.drop2 {
animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 3s;
}
.drop3 {
animation-delay: -2s;
animation-duration: 3.4s;
-webkit-animation-delay: -2s;
-webkit-animation-duration: 3.4s;
}
.drop4 {
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
}
.drop5 {
animation-delay: 2.7s;
animation-duration: 3.1s;
-webkit-animation-delay: 2.7s;
-webkit-animation-duration: 3.1s;
}
.drop6 {
animation-delay: -2.1s;
animation-duration: 3.2s;
-webkit-animation-delay: -2.1s;
-webkit-animation-duration: 3.2s;
}
.gooeff {
filter: url(#goo);
-webkit-filter: url(#goo);
}
#wave2 {
animation-duration: 5s;
animation-direction: reverse;
-webkit-animation-duration: 5s;
-webkit-animation-direction: reverse;
opacity: .6
}
#wave3 {
animation-duration: 7s;
-webkit-animation-duration: 7s;
opacity: .3;
}
#wave4 {
animation-duration: 9s;
-webkit-animation-duration: 9s;
opacity: .5;
}
#keyframes drop {
0% {
transform: translateY(25px);
}
30% {
transform: translateY(-10px) scale(.1);
}
30.001% {
transform: translateY(25px) scale(1);
}
70% {
transform: translateY(25px);
}
100% {
transform: translateY(-10px) scale(.1);
}
}
#-webkit-keyframes drop {
0% {
-webkit-transform: translateY(25px);
}
30% {
-webkit-transform: translateY(-10px) scale(.1);
}
30.001% {
-webkit-transform: translateY(25px) scale(1);
}
70% {
-webkit-transform: translateY(25px);
}
100% {
-webkit-transform: translateY(-10px) scale(.1);
}
}
#keyframes wave {
to {
transform: translateX(-100%);
}
}
#-webkit-keyframes wave {
to {
-webkit-transform: translateX(-100%);
}
}
#supports (-webkit-backdrop-filter: blur(1px)) {
svg {
height: 100%;
}
}
The animation works well in all browsers except on iOS. I'm using an iPhone 8.
I've tried several suggestions, among them also this one. But it does not solve my problem.
On Android mobile it works fine.
Any idea?
Your code doesn't work not only in iOS but also in Safari on macOS, this is a strange problem, but an error in feColorMatrix, move values to one line <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 13 -9" result="goo" />
CSS that animate an SVG changes the animation sequence when the SVG is resized
I managed to create this animated check mark here by following a tutorial https://codepen.io/flaccuz/pen/MWaPmgg
#my-icon .circle {
animation: circle-animation 0.5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: center;
}
#keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#my-icon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 400;
stroke-dashoffset: 400;
stroke: #cfd8dc;
transform-origin: center;
}
#keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}
However, when I resized the checkmark and added an illustration to the background, the style of the animation changed — the checkmark isn't drawing itself anymore, it just kind of jumps up and down, as seen here: https://codepen.io/flaccuz/pen/MWaPmYg
Any idea why that is? I didn't change anything in the CSS at all.
you need to replace transform-origin: center; with transform-origin: 100.99px 106.52px; where 100.99px 106.52px; is the center of the circle. Also the length of the <polyline class="checkmark" is 16.97 not 400. Use this value in your css.
In order to know the length of a path you can use the getTotalLength method in Javascript.
svg{border:solid}
#my-icon .circle {
animation: circle-animation .5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: 100.99px 106.52px;
}
#keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#myicon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 16.97;
stroke-dashoffset: 16.97;
stroke: #cfd8dc;
transform-origin: 100.99px 106.52px;
}
#keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.78 126.7" width="200">
<g id="background">
<g>
<path d="M64.92,23.92A56.07,56.07,0,0,0,15.4,106.4h99a55.65,55.65,0,0,0,4.66-11.76A56.13,56.13,0,0,0,64.92,23.92Z" style="fill: #f6f8f6"/>
<g>
<circle cx="64.94" cy="21.42" r="16.52" style="fill: #fff"/>
<path d="M64.94,5.27A16.15,16.15,0,1,1,48.8,21.42,16.15,16.15,0,0,1,64.94,5.27m0-.75a16.9,16.9,0,1,0,16.9,16.9,16.92,16.92,0,0,0-16.9-16.9Z"/>
</g>
<line x1="35.47" y1="106.4" x2="114.37" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="15.21" y1="106.4" x2="44.47" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="6" y1="106.4" x2="11.12" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<g>
<path d="M64.94,33.19A11.78,11.78,0,1,1,76.72,21.42,11.78,11.78,0,0,1,64.94,33.19Z" style="fill: #ff5454"/>
<path d="M64.94,10a11.41,11.41,0,1,1-11.4,11.41A11.41,11.41,0,0,1,64.94,10m0-.75A12.16,12.16,0,1,0,77.1,21.42,12.17,12.17,0,0,0,64.94,9.26Z"/>
</g>
<g>
<path d="M60.78,28.76a1.18,1.18,0,0,1-.93-1.89A6,6,0,0,0,61.26,24H60.17a1.17,1.17,0,0,1,0-2.34h.91c-.1-.47-.23-1-.38-1.54l-.11-.44c-.89-3.47.74-5.52,2.56-6.28A5.16,5.16,0,0,1,65.21,13,5.57,5.57,0,0,1,70,15.58a1.18,1.18,0,0,1-.4,1.61,1.16,1.16,0,0,1-.6.17,1.18,1.18,0,0,1-1-.56,3.22,3.22,0,0,0-2.76-1.49,2.83,2.83,0,0,0-1.14.22c-1.23.51-1.65,1.77-1.2,3.54l.11.44c.19.74.37,1.44.5,2.12h4a1.17,1.17,0,1,1,0,2.34H63.62a6.49,6.49,0,0,1-.71,2.44h6.77a1.18,1.18,0,0,1,0,2.35Z" style="fill: #fff"/>
<path d="M65.21,13.33a5.22,5.22,0,0,1,4.44,2.45.81.81,0,0,1-.27,1.09A.78.78,0,0,1,69,17a.81.81,0,0,1-.69-.39,3.57,3.57,0,0,0-3.08-1.66,3.32,3.32,0,0,0-1.28.24c-1.4.59-1.92,2-1.42,4l.11.43c.22.87.42,1.65.54,2.4h4.29a.8.8,0,0,1,0,1.6H63.27a6.72,6.72,0,0,1-1,3.19h7.39a.8.8,0,0,1,0,1.59h-8.9a.8.8,0,0,1-.63-1.28,6,6,0,0,0,1.52-3.5h-1.5a.8.8,0,0,1,0-1.6h1.37c-.11-.59-.28-1.24-.47-2L61,19.56c-.82-3.24.67-5.14,2.35-5.85a4.86,4.86,0,0,1,1.91-.38m0-.75v0A5.65,5.65,0,0,0,63,13c-1.88.79-3.73,3-2.78,6.72l.11.45c.1.38.19.73.27,1.06h-.44a1.55,1.55,0,0,0,0,3.1h.64a6.58,6.58,0,0,1-1.25,2.29,1.54,1.54,0,0,0,1.22,2.49h8.9a1.55,1.55,0,0,0,0-3.09H63.49A6.54,6.54,0,0,0,64,24.35h3.49a1.55,1.55,0,0,0,0-3.1H63.78q-.2-.88-.45-1.83L63.22,19c-.23-.91-.41-2.52,1-3.11a2.61,2.61,0,0,1,1-.18A2.85,2.85,0,0,1,67.64,17a1.57,1.57,0,0,0,1.33.75,1.52,1.52,0,0,0,.8-.23,1.54,1.54,0,0,0,.52-2.12,6,6,0,0,0-5.08-2.81Z"/>
</g>
<path d="M74.77,57.2s6.83,1.43,10.83-2.44S88.37,44,88.37,44s-6.83-1.43-10.82,2.44S74.77,57.2,74.77,57.2Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<path d="M57.45,51.3S58.87,44.47,55,40.48s-10.75-2.75-10.75-2.75-1.41,6.84,2.46,10.82S57.45,51.3,57.45,51.3Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="64.92" y1="72.52" x2="64.92" y2="38.01" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="65.24" y1="59.02" x2="69.85" y2="63.5" style="fill: none"/>
<line x1="57.45" y1="51.3" x2="64.92" y2="58.56" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="74.77" y1="57.2" x2="64.92" y2="66.45" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<g>
<path d="M51.72,105.68a1.71,1.71,0,0,1-1.67-1.33l-4.7-20.21A1.71,1.71,0,0,1,47,82h35.8a1.7,1.7,0,0,1,1.35.65,1.73,1.73,0,0,1,.33,1.46l-4.66,20.21a1.71,1.71,0,0,1-1.68,1.33Z" style="fill: #00aff5"/>
<path d="M82.82,82.4a1.34,1.34,0,0,1,1.31,1.65l-4.66,20.21a1.35,1.35,0,0,1-1.31,1H51.72a1.36,1.36,0,0,1-1.31-1l-4.7-20.21A1.35,1.35,0,0,1,47,82.4h35.8m0-.75H47a2.1,2.1,0,0,0-2,2.57l4.7,20.21a2.09,2.09,0,0,0,2,1.63H78.16a2.09,2.09,0,0,0,2-1.63l4.66-20.21a2.09,2.09,0,0,0-2-2.57Z" style="fill: #111"/>
</g>
<g>
<rect x="39.79" y="72.14" width="50.3" height="11.64" rx="1.89" style="fill: #00aff5"/>
<path d="M88.21,72.52A1.52,1.52,0,0,1,89.72,74v7.86a1.51,1.51,0,0,1-1.51,1.51H41.68a1.5,1.5,0,0,1-1.51-1.51V74a1.51,1.51,0,0,1,1.51-1.51H88.21m0-.75H41.68A2.26,2.26,0,0,0,39.42,74v7.86a2.26,2.26,0,0,0,2.26,2.26H88.21a2.26,2.26,0,0,0,2.26-2.26V74a2.26,2.26,0,0,0-2.26-2.26Z" style="fill: #111"/>
</g>
</g>
</g>
<g id="myicon">
<circle class="circle" cx="100.99" cy="106.52" r="14" style="fill: #fff;stroke: #e4f4da;stroke-miterlimit: 10;stroke-width: 2px"/>
<polyline class="checkmark" points="94.99 106.52 98.99 110.52 106.99 102.52" style="fill: none;stroke: #a5db85;stroke-linecap: round;stroke-linejoin: round;stroke-width: 2px"/>
</g>
</svg>
Random square appears when animating an SVG clip-path in Firefox 60 or earlier
I have an svg image with multiple elements being clipped with clip-paths (all defined in the file). The clip-paths and the elements within them are all animated. In Firefox 60 or earlier, one of these clipped elements is showing up as a square instead of the proper path:
https://i.stack.imgur.com/ITTJr.gif
This is how it's supposed to appear: https://i.stack.imgur.com/YQs34.gif
The code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 394.08 393.12">
<defs>
<style>
.outer, .outer-sky, .middle, .middle-sky, .inner, .inner-sky, .foreground {
animation-name: rotate;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-iteration-count: infinite;
}
.outer, .outer-sky, .foreground {
animation-duration: 45s;
}
.middle, .middle-sky {
animation-duration: 30s;
}
.inner, .inner-sky {
animation-duration: 15s;
}
.foreground, .outer-sky, .middle-sky, .inner-sky {
animation-direction: reverse;
}
.outer {
clip-path: url(#outerClip);
}
.middle {
clip-path: url(#middleClip);
}
.inner {
clip-path: url(#innerClip);
}
.outer-sky {
fill: url(#outerGradient);
}
.middle-sky {
fill: url(#middleGradient);
}
.inner-sky {
fill: url(#innerGradient);
}
.foreground {
fill: #1c204c;
}
.star {
fill: #fff;
animation-name: twinkle;
animation-duration: 1.3s;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-iteration-count: infinite;
transform-box: fill-box;
}
.star:nth-of-type(5n+0) {
animation-delay: -0.5s;
}
.star:nth-of-type(5n+1) {
animation-delay: -0.75s;
}
.star:nth-of-type(5n+2) {
animation-delay: -0.25s;
}
#keyframes twinkle {
0% {
transform: scale(1);
opacity: 1;
} 60% {
transform: scale(1);
opacity: 1;
} 80% {
transform: scale(0.95);
opacity: 0;
} 100% {
transform: scale(1);
opacity: 1;
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(360deg);
}
}
</style>
<clipPath id="outerClip">
<path d="M75.19,103.15c-4.39,12.47-7.7,25.92-14.48,36.66-7.91,12.52-17.87,23.85-21.13,38.56-3.41,15.39-4,31.52-.7,47a85.31,85.31,0,0,0,20.42,40c10.42,11.22,26.14,15.6,36.43,27.29,4.93,5.61,8.23,12.44,12.26,18.73,12.63,19.68,32.83,34.05,55.14,41.07,21.17,6.66,42.46,5.93,64.07,3.13a78.69,78.69,0,0,0,49.6-26.78c10.11-12,16.43-26.91,27.71-37.95s26.2-18.19,36.88-30.46c16.37-18.82,19.81-50.91,12-73.82-2.39-7.07-5.82-13.77-8.16-20.87-4.3-13.09.25-26.52-3.9-39.61-2.09-6.58-5.46-12.89-10.54-17.56-8.65-7.93-21.27-12.68-31.64-17.93-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z3-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z" />
</clipPath>
<radialGradient id="outerGradient" cx="87.7601679%" cy="8.06021835%" fx="87.7601679%" fy="8.06021835%" r="103.2123%" gradientTransform="translate(0.877602,0.080602),scale(1.000000,0.995772),rotate(135.207489),translate(-0.877602,-0.080602)">
<stop stop-color="#1E72B9" offset="0%"></stop>
<stop stop-color="#374CA1" offset="100%"></stop>
</radialGradient>
<clipPath id="middleClip">
<path d="M131.56,119.47a61.83,61.83,0,0,1,14.25-4.29c15.8-2.81,23.46-19.54,39-23.07,10.66-2.42,21.73,3.08,29.53,10.75,3.47,3.41,6.53,7.29,10.54,10,6.27,4.33,14.13,5.46,21.67,6.56,9.62,1.42,19.42,3,28.06,7.51s16.12,12.26,17.76,21.85c1.21,7-.78,14.27-.06,21.37.74,7.34,4.29,14.05,7.91,20.47,1.94,3.44,3.94,6.93,4.68,10.81a23.85,23.85,0,0,1-.11,8.59,37,37,0,0,1-13.46,22.44c-5.58,4.37-12.59,7.29-16.43,13.24s-3.61,13.23-5.09,20a40.92,40.92,0,0,1-49.93,31c-7.05-1.76-14.18-5.43-21.21-3.56-3.9,1-7.15,3.67-10.75,5.51-11.7,5.95-26,2.95-37.89-2.67-18.17-8.61-34.25-24.59-36.95-44.52-.83-6.15-.37-12.4-1.06-18.57s-2.75-12.55-7.51-16.53c-3.26-2.72-7.64-4.2-10.06-7.69-3.37-4.83-1.63-11.58,1.41-16.62s7.29-9.46,9.11-15.06c1.58-4.82,1.19-10,1.36-15.1.36-11.28,3.69-22.66,10.6-31.59C120.57,125.59,125.82,122,131.56,119.47Z" />
</clipPath>
<radialGradient id="middleGradient" cx="87.1592657%" cy="0%" fx="87.1592657%" fy="0%" r="115.307406%" gradientTransform="translate(0.871593,0.000000),scale(0.989524,1.000000),rotate(127.766222),translate(-0.871593,-0.000000)">
<stop stop-color="#15A781" offset="0%"></stop>
<stop stop-color="#15A681" offset="34.7550622%"></stop>
<stop stop-color="#1B8BA1" offset="100%"></stop>
</radialGradient>
<clipPath id="innerClip">
<path d="M213,148.4c-.64,0-1.29.09-1.93.17-5.09.6-10.32,1.78-15.26.43-2.3-.64-4.42-1.79-6.68-2.56-5.58-1.9-13.69-.58-18.27,3.14-5.53,4.51-7,12.4-11.6,17.84-3.38,4-8.33,6.47-11.4,10.7-3.46,4.75-4,11-4,16.86,0,2.6.12,5.31,1.36,7.6,1.79,3.32,5.56,5.06,8,8,3.91,4.8,3.43,11.72,5.3,17.63A22.8,22.8,0,0,0,178,243.66c5.21.38,10.48-1.09,15.66-.34,4.18.6,8.05,2.62,12.21,3.39,9.76,1.82,20.38-4.33,23.67-13.7,1.13-3.22,1.48-6.71,2.94-9.8,4.18-8.79,16.64-12.85,17.67-22.54.94-8.87-7.35-13.76-11.43-20.46-4.65-7.64-4.07-18-9.3-25.05C225.4,149.73,219.34,148,213,148.4Z" />
</clipPath>
<radialGradient id="innerGradient" cx="-6.12176208%" cy="0.279661765%" fx="-6.12176208%" fy="0.279661765%" r="156.069259%" gradientTransform="translate(-0.061218,0.002797),scale(0.953303,1.000000),rotate(37.294692),translate(0.061218,-0.002797)">
<stop stop-color="#FFCD54" offset="0.0844594595%"></stop>
<stop stop-color="#FFA440" offset="100%"></stop>
</radialGradient>
</defs>
<title>Stargazing</title>
<g class="outer">
<circle class="outer-sky" cx="50%" cy="50%" r="41%" />
</g>
<g class="middle">
<circle class="middle-sky" cx="50%" cy="50%" r="28%" />
</g>
<g class="inner">
<circle class="inner-sky" cx="50%" cy="50%" r="14%"/>
</g>
<g class="outer">
<path class="foreground" d="M315.45,357.22s-37.57-29.74-37.05-30.41L263.11,314.4c-6.29-5.11-13-11-15.3-18.48A6.41,6.41,0,0,0,243,291.5c-.63-.13-1.25-.29-1.87-.47l-3-19.69,0-.18a.74.74,0,0,0,.45-.2l16.25-15a.8.8,0,0,0,.19-.9l-2.86-6.51a.79.79,0,0,0-1.32-.2l-17.1,19.59a.8.8,0,0,0,.23,1.22l.87.45-.11.13-6.45,14.15a31.09,31.09,0,0,1-5.91-7.22,6.34,6.34,0,0,0-6.43-3,27.76,27.76,0,0,1-7.83.09c0-.28,0-.55.05-.84,1.26-21.89.69-34.36.33-39.21a8.07,8.07,0,0,0-1.3-3.81h.2a.64.64,0,0,0,.64-.7l-1-12.23a.42.42,0,0,1,.83-.1v0l2.58,17.61a.65.65,0,0,0,.64.55h1.11c.06,1,.5,1.5.63,3.33.17,2.32,1.4,0,1.71-3.33h.5a.64.64,0,0,0,.63-.74L213,216.09a16.23,16.23,0,0,0-9.28-12.36,15.92,15.92,0,0,0-3.33-1.12c-.34-.07-.68-.11-1-.16l-.15-.7c-.17-.84.67-1.14.67-2.83s-.66-3.41-3.67-3.41c-2.16,0-2.29,2.34-2.29,3.34a3.45,3.45,0,0,0,.7,2,1.65,1.65,0,0,1,.16,1c0,.22.1.43,0,.6a16.18,16.18,0,0,0-13.86,13.68l-2.71,18.18a.64.64,0,0,0,.64.74h.49c.3,3.32,1.53,5.65,1.7,3.33.13-1.83.57-2.36.64-3.33h1.07a.65.65,0,0,0,.64-.55L186,216.85v0a.42.42,0,0,1,.83.1l-1,12.23a.64.64,0,0,0,.64.7h.64a8.07,8.07,0,0,0-1.3,3.81c-.36,4.84-.93,17.29.32,39.13l-19.3,5.55a6.44,6.44,0,0,0-4.44,4.71,7.15,7.15,0,0,1-4.6,5.15c-2.86.91-6.28,0-8.73,1.71-1.47,1-2.2,2.8-2.89,4.47a230,230,0,0,1-15.25,30.48c-1.24,2.08-3.39,4.48-5.18,6.86-13.7,10.52-18.63,21.05-5,25.35m74.85-86.51a11.22,11.22,0,0,0-1.64.14,189.48,189.48,0,0,1,2.76-28.2.41.41,0,0,1,.82,0,186.8,186.8,0,0,1,2.77,29.08A14.84,14.84,0,0,0,195.63,270.54ZM235.57,272l3.81,18.47a32,32,0,0,1-9.51-5.26Z"/>
</g>
<path class="star" d="M134.27,152.31l-1.82.07a3.61,3.61,0,0,1-.94,2.59,3.2,3.2,0,0,1-1.18.81,2.53,2.53,0,0,1-1.3.13,2.34,2.34,0,0,1-1.16-.59,1.94,1.94,0,0,1-.65-1.27,4.65,4.65,0,0,1,.17-1.64,5,5,0,0,1-1.15-.27,2.5,2.5,0,0,1-.81-.49,1.8,1.8,0,0,1-.61-1.42,2.42,2.42,0,0,1,.73-1.58,2.77,2.77,0,0,1,1-.69,1.82,1.82,0,0,1,1-.13,1.7,1.7,0,0,1,.89.44,1.77,1.77,0,0,1,.59,1.29,6,6,0,0,1-.3,1.79c.7,0,1.5,0,2.39,0a6.79,6.79,0,0,0-.61-1.52l1.27-.24a6.85,6.85,0,0,1,.58,1.7l1.88-.09Zm-6.57-1a4.26,4.26,0,0,0,.2-1.24,1.08,1.08,0,0,0-.35-.83.79.79,0,0,0-.63-.24,1,1,0,0,0-.65.34,1,1,0,0,0-.3.74.9.9,0,0,0,.32.69A2.57,2.57,0,0,0,127.7,151.27Zm3.56,1.17c-1.17,0-2.12.06-2.85,0a3.14,3.14,0,0,0-.1,1.05,1.12,1.12,0,0,0,.37.74,1.23,1.23,0,0,0,1,.36,1.56,1.56,0,0,0,1-.52A2.42,2.42,0,0,0,131.26,152.44Z"/>
<path class="star" d="M96.07,105.1l-.55,1.5-2.89-1.07-1.06,2.85-1.41-.52L91.22,105l-2.87-1.06.56-1.49,2.87,1.06,1.06-2.87,1.41.52L93.19,104Z"/>
<path class="star" d="M156.34,80.21a1.36,1.36,0,0,1,1.22,1.32,1.18,1.18,0,0,1-1.25,1.16,1.3,1.3,0,0,1-.86-.43,1.21,1.21,0,0,1-.36-.88,1.12,1.12,0,0,1,.38-.83A1.16,1.16,0,0,1,156.34,80.21Zm3.5,3.82a1.18,1.18,0,0,1,.85.42,1.41,1.41,0,0,1,.27.4c0,.13.11.31.17.53l.63,2.28-.83.77-.87-2A1.14,1.14,0,0,1,159,86a1.23,1.23,0,0,1-.36-.87,1.15,1.15,0,0,1,.38-.82A1.19,1.19,0,0,1,159.84,84Z"/>
<path class="star" d="M272.07,184.08a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.12,1.12,0,0,1-.86.36,1.13,1.13,0,0,1-.84-.37,1.25,1.25,0,0,1-.34-.9,1.21,1.21,0,0,1,.34-.89,1.21,1.21,0,0,1,1.7,0Z"/>
<path class="star" d="M94.64,176.35a1.25,1.25,0,0,1,.34.89,1.3,1.3,0,0,1-.34.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.35A1.18,1.18,0,0,1,94.64,176.35Z"/>
<path class="star" d="M125.23,294.86a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.21,1.21,0,0,1-1.71,0,1.3,1.3,0,0,1-.33-.9,1.24,1.24,0,0,1,.33-.89,1.22,1.22,0,0,1,1.71,0Z"/>
<path class="star" d="M312.8,145.2a.87.87,0,0,1-.11.66.89.89,0,0,1-.53.43.77.77,0,0,1-.64-.08.82.82,0,0,1-.39-.52.9.9,0,0,1,.12-.67.84.84,0,0,1,.51-.42.87.87,0,0,1,1,.6Zm2.36-6.76,1.32.77L315.41,141l-2,2.92-.85-.49,1.55-3.2Z"/>
<path class="star" d="M299,237.82a2.56,2.56,0,0,1,1.16-1.62,2.86,2.86,0,0,1,1.8-.59,1.84,1.84,0,0,1,1.43.88,2.1,2.1,0,0,1,.33.76,2.15,2.15,0,0,1,0,.71c0,.21-.09.48-.17.81a5,5,0,0,0-.18,1.06,1.53,1.53,0,0,0,.28.85l-1,.69a2.41,2.41,0,0,1-.36-.79,2.15,2.15,0,0,1-.06-.69,6.12,6.12,0,0,1,.14-.77,3.87,3.87,0,0,0,.13-.89,1.2,1.2,0,0,0-.24-.69.86.86,0,0,0-.65-.42,1.33,1.33,0,0,0-.82.28,1.25,1.25,0,0,0-.55.74,1.23,1.23,0,0,0,.22.92l-1,.7A2.49,2.49,0,0,1,299,237.82Zm5.46,4a.88.88,0,0,1,.55.37.91.91,0,0,1,.16.66.77.77,0,0,1-.35.55.75.75,0,0,1-.63.12.89.89,0,0,1-.56-.38.86.86,0,0,1-.15-.65.85.85,0,0,1,1-.67Z"/>
<path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
<path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
<g class="star">
<path d="M246.85,134.28l.37.86-1.66.71.7,1.63-.81.35-.7-1.64-1.64.71-.37-.86,1.65-.7-.71-1.65.81-.35.71,1.65Z"/>
<path d="M245,141.2a5.41,5.41,0,0,1-2.09-.41,5.62,5.62,0,0,1-.12-10.37,5.63,5.63,0,0,1,7.37,3h0A5.61,5.61,0,0,1,245,141.2Zm0-10.37a4.75,4.75,0,0,0-1.76,9.16,4.67,4.67,0,0,0,3.63,0,4.75,4.75,0,0,0-1.87-9.12Z"/>
</g>
<path class="star" d="M65.66,240.37a2.56,2.56,0,0,1,1,1,3.13,3.13,0,0,1,0,3,2.52,2.52,0,0,1-1,1,3.06,3.06,0,0,1-1.51.35,3.14,3.14,0,0,1-1.53-.35,2.46,2.46,0,0,1-1-1,3.13,3.13,0,0,1,0-3,2.5,2.5,0,0,1,1-1,3.14,3.14,0,0,1,1.53-.36A3.07,3.07,0,0,1,65.66,240.37ZM63,241.63a1.92,1.92,0,0,0,0,2.42,1.59,1.59,0,0,0,2.26,0,1.92,1.92,0,0,0,0-2.42,1.59,1.59,0,0,0-2.26,0Z"/>
<path class="star" d="M122.72,246.79l1.53-2.73,3.11.32.65,1.25-2.38-.17,1.57,3-1,.54-1.57-3-1.23,2Z"/>
<path class="star" d="M239.24,74.35l-2-1.16,1.21-.63L241.18,74l-.36,3.09-1.21.63.18-2.28-3.09,1.6L236.13,76Z"/>
</svg>
Is there a solution and/or a way to use a static image as a fallback when on an older browser?
I figured it out! It looks like older versions of firefox draw a bounding box of some sort around the element based on its width/height, and this box does not animate with the element itself. I fixed it by putting the element in a group with an invisible rectangle as wide/large as the entire viewbox.
SVG icon animation leaves a pixel gap
I'm working on SVG animations with CSS and I've noticed that with my line drawing animations, any SVG rect (#clipboard-border and #clipboard-clip-border) stroke always excludes a bit of the top-left corner, which makes it an incomplete rectangle.
I've tried adjusting the stroke-dasharray and stroke-dashoffset measurements within the CSS, as well as adjusting the sizes and pixel coordinated within the SVG code, but neither are the problem it seems. Help?
html,
body {
width: 100%;
height: 100%;
background-color: #CECECE;
}
div {
text-align: center;
}
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
}
/* ---------------------
SVG RULES
--------------------- */
/* All grey strokes */
#clipboard-border,
.clipboard-content,
.clipboard-borders,
.mech-pencil-borders {
fill: none;
stroke: #4D5152;
stroke-width: 6;
stroke-miterlimit: 10;
}
/* All things white */
#clipboard-paper-fill,
#mech-pencil-eraser-fill {
fill: #F3F7F6;
}
/* All things green */
#mech-pencil-point-fill,
#mech-pencil-top-fill {
fill: #25B686;
}
/* All things blue */
#clipboard-fill {
fill: #85D0D3;
}
/* All things yellow */
#clipboard-clip-fill,
#mech-pencil-grip {
fill: #FBFBCE;
}
#clipboard-knob-1,
#clipboard-knob-2,
#clipboard-knob-3,
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
stroke-dasharray: 8px;
stroke-dashoffset: 8px;
animation: trace .5s ease-out forwards;
}
/* ---------------------
ANIMATION KEYFRAMES
--------------------- */
#keyframes trace {
100% {
stroke-dashoffset: 0px;
}
}
#keyframes fill-it {
100% {
opacity: 1;
}
}
#keyframes grow {
0% {
transform: scale(0);
}
30% {
transform: scale(1.1);
}
60% {
transform: scale(.9);
}
}
/* ---------------------
SVG ANIMATION: INSIGHT & PLANNING ICON
--------------------- */
#clipboard-clip-border {
stroke-dasharray: 180px;
stroke-dashoffset: 180px;
animation: trace .2s ease-out forwards;
}
#clipboard-clip-fill {
opacity: 0;
animation: fill-it .2s .2s ease-in-out forwards;
}
#clipboard-border {
stroke-dasharray: 640px;
stroke-dashoffset: 640px;
animation: trace 1.25s ease-in-out forwards;
}
#clipboard-fill,
#mech-pencil-point-fill,
#mech-pencil-top-fill {
opacity: 0;
animation: fill-it .25s 1.25s ease-in-out forwards;
}
#clipboard-paper-border {
stroke-dasharray: 400px;
stroke-dashoffset: 400px;
animation: trace 1s ease-out forwards;
}
#clipboard-paper-fill,
#mech-pencil-eraser-fill,
#mech-pencil-grip {
opacity: 0;
animation: fill-it .75s 1s ease-in-out forwards;
}
#clipboard-content-line-1 {
stroke-dasharray: 30px;
stroke-dashoffset: 30px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line-7,
#clipboard-clip-detail {
stroke-dasharray: 52px;
stroke-dashoffset: 52px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line,
#clipboard-content-line-even,
#mech-pencil-eraser-border {
stroke-dasharray: 80px;
stroke-dashoffset: 80px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-border-left,
#mech-pencil-border-right {
stroke-dasharray: 115px;
stroke-dashoffset: 115px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-point-border {
stroke-dasharray: 60px;
stroke-dashoffset: 60px;
animation: trace .5s ease-out forwards;
}
#mech-pencil-tip,
#mech-pencil-top {
stroke-dasharray: 10px;
stroke-dashoffset: 10px;
animation: trace .4s ease-out forwards;
}
/* ---------------------
ANIMATION DELAYS
--------------------- */
#clipboard-knob-1,
#clipboard-knob-2 {
animation-delay: .25s;
}
#clipboard-clip-detail,
#clipboard-content-line,
#clipboard-content-line-7,
#clipboard-knob-2 {
animation-delay: .5s;
}
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
animation-delay: 1.25s;
}
<div class="wrapper">
<!-- INSIGHT & PLANNING ICON -->
<svg id="insight-planning" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<g class="clipboard">
<rect id="clipboard-fill" x="15.015" y="11.44" width="132" height="182" />
<rect id="clipboard-paper-fill" x="30.753" y="11.44" width="100" height="151" />
<g class="clipboard-content">
<line id="clipboard-content-line-even" x1="46.491" y1="68.096" x2="115.738" y2="68.096" />
<line id="clipboard-content-line" x1="46.491" y1="80.687" x2="115.738" y2="80.687" />
<line id="clipboard-content-line-even" x1="46.491" y1="93.277" x2="115.738" y2="93.277" />
<line id="clipboard-content-line" x1="46.491" y1="105.867" x2="115.738" y2="105.867" />
<line id="clipboard-content-line-even" x1="46.491" y1="118.458" x2="115.738" y2="118.458" />
<line id="clipboard-content-line-7" x1="46.491" y1="131.048" x2="96.852" y2="131.048" />
<line id="clipboard-content-line-1" x1="115.738" y1="49.211" x2="90.557" y2="49.211" />
</g>
<rect id="clipboard-border" x="15.015" y="11.44" width="132" height="182" />
</g>
<g class="mech-pencil-fills">
<rect id="mech-pencil-grip" x="166.099" y="96.425" width="18" height="47" />
<rect id="mech-pencil-top-fill" x="166.099" y="30.325" width="18" height="66" />
<rect id="mech-pencil-eraser-fill" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-fill" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
</g>
<g class="mech-pencil-borders">
<line id="mech-pencil-border-left" x1="166.099" y1="143.639" x2="166.099" y2="30.325" />
<line id="mech-pencil-border-right" x1="184.985" y1="30.325" x2="184.985" y2="145" />
<rect id="mech-pencil-eraser-border" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-border" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
<line id="mech-pencil-top" x1="175.542" y1="11.44" x2="175.542" y2="1.997" />
<line id="mech-pencil-tip" x1="175.542" y1="168.819" x2="175.542" y2="175.114" />
<line id="mech-pencil-bottom-btn" x1="175.542" y1="127.901" x2="175.542" y2="121.605" />
<line id="mech-pencil-top-btn" x1="175.542" y1="115.31" x2="175.542" y2="109.015" />
</g>
<g class="clipboard-clip">
<rect id="clipboard-clip-fill" x="49.639" y="5.144" width="62" height="25" />
</g>
<g class="clipboard-borders">
<polyline id="clipboard-paper-border" points="131.476,11.44 131.476,162.524 30.753,162.524 30.753,11.44" />
<rect id="clipboard-clip-border" x="49.639" y="5.144" width="62" height="25" />
<line id="clipboard-clip-detail" x1="59.081" y1="17.735" x2="103.148" y2="17.735" />
<line id="clipboard-knob-1" x1="65.376" y1="178.262" x2="71.672" y2="178.262" />
<line id="clipboard-knob-2" x1="77.967" y1="178.262" x2="84.262" y2="178.262" />
<line id="clipboard-knob-3" x1="90.557" y1="178.262" x2="96.852" y2="178.262" />
</g>
</svg>
</div>
Also posted in Codepen.
Just add stroke-linecap: square; to the CSS declarations for the SVG object.
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
stroke-linecap: square; /* <-- Add this */
}
Example:
Here's an SVG with two paths (open, not closed). The path drawn with "butt" line endings has a bit missing in the top corner, but the other path (drawn with "square" line endings) doesn't have this issue.
<svg width="250" height="100" viewBox="0 0 250 100">
<path d="M10 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: square;"/>
<text x="50" y="70" text-anchor="middle">Square</text>
<path d="M160 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: butt;"/>
<text x="200" y="70" text-anchor="middle">Butt</text>
</svg>
P.S. I like your work, but next time please consider making a minimal, complete and verifiable example to illustrate the problem. That way people won't have to wade through reams of code to discover what's going wrong :-)