I have problem with animating svg. It works on Firefox, Safari but Chrome has some kind of rendering problem. Any idea where is the problem? I was playing with mask and it seems its there but Im not able to fix it. I was debugging it on OSX where problem stopped when I disconnected external screen. But on Windows I get it even on laptop / mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #000;">
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="SPINECUBE_start" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="260" height="70" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
.moveBG {
animation: moveBG 6s ease infinite;
}
.moveHand {
animation: moveHand 6s ease infinite;
}
@-webkit-keyframes moveBG {
0% { transform: translateX(-136.949px) translateY(2.95px) }
10% { transform: translateX(-20.949px) translateY(2.95px) }
15% { transform: translateX(-20.949px) translateY(2.95px) }
15.1% { transform: translateX(-136.949px) translateY(2.95px) }
25% { transform: translateX(-20.949px) translateY(2.95px) }
30% { transform: translateX(-20.949px) translateY(2.95px) }
30.1% { transform: translateX(-136.949px) translateY(2.95px) }
40% { transform: translateX(-20.949px) translateY(2.95px) }
100% { transform: translateX(-20.949px) translateY(2.95px) }
}
@-moz-keyframes moveBG {
0% { transform: translateX(-136.949px) translateY(2.95px) }
10% { transform: translateX(-20.949px) translateY(2.95px) }
15% { transform: translateX(-20.949px) translateY(2.95px) }
15.1% { transform: translateX(-136.949px) translateY(2.95px) }
25% { transform: translateX(-20.949px) translateY(2.95px) }
30% { transform: translateX(-20.949px) translateY(2.95px) }
30.1% { transform: translateX(-136.949px) translateY(2.95px) }
40% { transform: translateX(-20.949px) translateY(2.95px) }
100% { transform: translateX(-20.949px) translateY(2.95px) }
}
@keyframes moveBG {
0% { transform: translateX(-136.949px) translateY(2.95px) }
10% { transform: translateX(-20.949px) translateY(2.95px) }
15% { transform: translateX(-20.949px) translateY(2.95px) }
15.1% { transform: translateX(-136.949px) translateY(2.95px) }
25% { transform: translateX(-20.949px) translateY(2.95px) }
30% { transform: translateX(-20.949px) translateY(2.95px) }
30.1% { transform: translateX(-136.949px) translateY(2.95px) }
40% { transform: translateX(-20.949px) translateY(2.95px) }
100% { transform: translateX(-20.949px) translateY(2.95px) }
}
@-webkit-keyframes moveHand {
0% { transform: translateX(66.95px) translateY(10.9px) }
10% { transform: translateX(182.95px) translateY(10.9px) }
15% { transform: translateX(182.95px) translateY(10.9px) }
15.1% { transform: translateX(66.95px) translateY(10.9px) }
25% { transform: translateX(182.95px) translateY(10.9px) }
30% { transform: translateX(182.95px) translateY(10.9px) }
30.1% { transform: translateX(66.95px) translateY(10.9px) }
40% { transform: translateX(182.95px) translateY(10.9px) }
100% { transform: translateX(182.95px) translateY(10.9px) }
}
@-moz-keyframes moveHand {
0% { transform: translateX(66.95px) translateY(10.9px) }
10% { transform: translateX(182.95px) translateY(10.9px) }
15% { transform: translateX(182.95px) translateY(10.9px) }
15.1% { transform: translateX(66.95px) translateY(10.9px) }
25% { transform: translateX(182.95px) translateY(10.9px) }
30% { transform: translateX(182.95px) translateY(10.9px) }
30.1% { transform: translateX(66.95px) translateY(10.9px) }
40% { transform: translateX(182.95px) translateY(10.9px) }
100% { transform: translateX(182.95px) translateY(10.9px) }
}
@keyframes moveHand {
0% { transform: translateX(66.95px) translateY(10.9px) }
10% { transform: translateX(182.95px) translateY(10.9px) }
15% { transform: translateX(182.95px) translateY(10.9px) }
15.1% { transform: translateX(66.95px) translateY(10.9px) }
25% { transform: translateX(182.95px) translateY(10.9px) }
30% { transform: translateX(182.95px) translateY(10.9px) }
30.1% { transform: translateX(66.95px) translateY(10.9px) }
40% { transform: translateX(182.95px) translateY(10.9px) }
100% { transform: translateX(182.95px) translateY(10.9px) }
}
]]>
</style>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" color-interpolation="sRGB" x1="81.05" y1="12" x2="221.05" y2="12" id="linearGradient">
<stop stop-color="#FFF" stop-opacity="0.5019607843137255" offset="0"/>
<stop stop-color="#FFF" stop-opacity="1" offset="0.70196"/>
</linearGradient>
</defs>
<g id="Scene_1" overflow="visible">
<g mask="url(#mask_)">
<g id="Symbol_2" class="moveBG" style="transform: translateX(-20.949px) translateY(2.95px);">
<path fill="url(#linearGradient)" d="M221.05,12Q221.05,7.05 217.5,3.5 214,0 209.05,0L93.05,0Q88.1,0 84.55,3.5 81.05,7.05 81.05,12 81.05,16.95 84.55,20.45 88.1,24 93.05,24L204.75,24 200.85,15.7 200.85,15.8Q200.15,14.3 200.4,12.6 200.5,10.95 201.5,9.55 202.15,8.35 203.4,7.4L203.4,7.3Q204.6,6.3 206.1,5.65 207.55,4.95 209.05,4.6L209.15,4.6Q210.7,4.4 212.05,4.55L212.15,4.55Q213.8,4.8 215.15,5.75 216.45,6.6 217.15,8.1L220.6,15.4Q221.05,13.8 221.05,12"/>
<path fill="#000" fill-opacity="0.847" d="M193.2,12L179.2,6.2 179.2,10.5 93.65,10.5Q93.05,10.5 92.6,10.9 92.15,11.35 92.15,11.95L92.15,12.05Q92.15,12.65 92.6,13.05 93.05,13.5 93.65,13.5L179.2,13.5 179.2,17.85 193.2,12"/>
</g>
</g>
<mask id="mask_">
<path fill="#FFF" d="M200,14.95Q200,10 196.45,6.45 192.95,2.95 188,2.95L72,2.95Q67.05,2.95 63.5,6.45 60,10 60,14.95 60,19.9 63.5,23.4 67.05,26.95 72,26.95L188,26.95Q192.95,26.95 196.45,23.4 200,19.9 200,14.95" fill-opacity="1"/>
</mask>
<g id="Symbol_1" class="moveHand" style="transform: translateX(182.95px) translateY(10.9px);">
<path fill="#FCFCFC" d="M45.85,18.95Q44.65,16.35 43.7,14.45L41.8,10.35Q40.95,8.5 39.15,8 37.55,7.45 36,8.2 35.15,8.6 34.55,9.35L34.55,9.3Q34.25,9.6 34.1,9.9 33.2,8.45 31.4,8.05 29.5,7.7 27.7,8.6 26.6,9.1 25.8,9.85 25.35,10.3 25.1,10.75 24.7,10.2 24.1,9.75 23.3,9.15 22.15,9.05 22.1,9.044 22.05,9.05 21.244,8.956 20.35,9.05L20.3,9.05Q19.35,9.25 18.4,9.7 17.45,10.15 16.75,10.8 16,11.4 15.45,12.15 15.4,12.15 15.4,12.2 15.35,12.3 15.35,12.4L10.6,2.3Q10.15,1.35 9.35,0.8 8.5,0.2 7.45,0.05L7.4,0.05Q6.55,-0.05 5.55,0.1L5.5,0.1Q4.55,0.3 3.65,0.75 2.7,1.15 1.95,1.8L1.95,1.85Q1.15,2.45 0.75,3.2 0.1,4.1 0.05,5.15 -0.1,6.2 0.35,7.15L0.35,7.1 10.95,29.8 10.95,29.85Q12.1,32 13.15,34.4 14.25,36.95 14.6,38.2L7.95,34.3Q7.85,34.2 7.7,34.2 6.85,33.85 6,33.9L5.95,33.9Q4.9,33.85 4.05,34.3 2.4,35.05 1.35,36.95 0.25,38.8 0.3,40.8 0.35,42.3 1.1,43.5L1.1,43.55Q1.95,44.7 3.25,45.3L18.85,53.05Q23.85,55.55 28.25,56 32.7,56.45 36.15,54.85L36.1,54.85Q38.15,53.9 40.3,52.85 44.25,50.9 45.9,49.7 49.65,47.1 50.65,43.6 51.05,42.05 51,40L51,39.95Q51.1,38.55 50.9,35.85 50.7,33.5 50,30.15 49.35,26.8 48.7,25.1 48,23.35 45.85,18.95 M43.5,19.9Q45.65,24.4 46.25,26.05 46.8,27.55 47.45,30.7 48.1,33.85 48.3,36.1 48.5,38.55 48.45,39.85 48.45,41.6 48.15,42.85 47.35,45.5 44.45,47.6 42.9,48.6 39.1,50.55 37.05,51.6 35,52.55 32.15,53.9 28.45,53.4L28.4,53.4Q24.5,52.95 20,50.75L4.35,42.9 4.3,42.9Q3.55,42.6 3.2,42.05 2.95,41.45 2.9,40.7 2.85,39.45 3.55,38.25 4.15,37.1 5.1,36.65L5.15,36.65Q5.9,36.25 6.7,36.6L6.75,36.6 13.95,40.8 14,40.8Q14.45,41.05 14.95,41.1L15,41.1Q15.55,41.1 16.05,40.9 16.05,40.85 16.1,40.85 16.7,40.6 17.1,39.95 17.4,39.3 17.35,38.55 17.15,36.95 15.25,32.8 14.4,30.8 13.25,28.65L2.7,6Q2.4,5.25 2.95,4.45 3.6,3.6 4.75,3.05 5.9,2.5 6.9,2.6L6.95,2.6Q7.95,2.65 8.3,3.4L18.75,25.8 18.75,25.85Q19.05,26.4 19.65,26.65 20.2,26.85 20.8,26.65 20.8,26.6 20.85,26.6L21.05,26.5Q21.6,26.25 21.9,25.6 21.9,25.55 21.95,25.55 22.15,24.9 21.85,24.35L17.5,15Q17.15,14.25 17.7,13.45 18.35,12.6 19.5,12.05L19.45,12.05Q20.6,11.5 21.65,11.6 21.864,11.621 22.05,11.675 22.736,11.86 23.05,12.45L23.05,12.4 27.4,21.75 27.4,21.8Q27.7,22.3 28.3,22.55 28.9,22.85 29.55,22.55 30.1,22.25 30.35,21.65L30.4,21.65Q30.6,21.05 30.3,20.45L27.15,13.7Q26.8,12.95 27.25,12.2 27.8,11.45 28.85,10.95 29.8,10.5 30.7,10.6 31.6,10.65 31.95,11.4L35.1,18.15 35.1,18.2Q35.4,18.75 36,19 36.55,19.25 37.2,18.95 37.25,18.95 37.3,18.9 37.85,18.65 38.1,18.05 38.1,18 38.15,18 38.35,17.35 38.05,16.8L36.25,12.95Q35.85,12.1 36.15,11.5 36.15,11.45 36.2,11.45 36.4,10.85 37.1,10.55 37.75,10.25 38.35,10.45L38.4,10.45Q39.05,10.65 39.45,11.5L41.4,15.6 41.4,15.4Q41.5,15.85 43.5,19.9"/>
<path fill="#000" fill-opacity="0.247" d="M43.5,19.9Q45.65,24.4 46.25,26.05 46.8,27.55 47.45,30.7 48.1,33.85 48.3,36.1 48.5,38.55 48.45,39.85 48.45,41.6 48.15,42.85 47.35,45.5 44.45,47.6 42.9,48.6 39.1,50.55 37.05,51.6 35,52.55 32.15,53.9 28.45,53.4L28.4,53.4Q24.5,52.95 20,50.75L4.35,42.9 4.3,42.9Q3.55,42.6 3.2,42.05 2.95,41.45 2.9,40.7 2.85,39.45 3.55,38.25 4.15,37.1 5.1,36.65L5.15,36.65Q5.9,36.25 6.7,36.6L6.75,36.6 13.95,40.8 14,40.8Q14.45,41.05 14.95,41.1L15,41.1Q15.55,41.1 16.05,40.9 16.05,40.85 16.1,40.85 16.7,40.6 17.1,39.95 17.4,39.3 17.35,38.55 17.15,36.95 15.25,32.8 14.4,30.8 13.25,28.65L2.7,6Q2.4,5.25 2.95,4.45 3.6,3.6 4.75,3.05 5.9,2.5 6.9,2.6L6.95,2.6Q7.95,2.65 8.3,3.4L18.75,25.8 18.75,25.85Q19.05,26.4 19.65,26.65 20.2,26.85 20.8,26.65 20.8,26.6 20.85,26.6L21.05,26.5Q21.6,26.25 21.9,25.6 21.9,25.55 21.95,25.55 22.15,24.9 21.85,24.35L17.5,15Q17.15,14.25 17.7,13.45 18.35,12.6 19.5,12.05L19.45,12.05Q20.6,11.5 21.65,11.6 21.864,11.621 22.05,11.675 22.736,11.86 23.05,12.45L23.05,12.4 27.4,21.75 27.4,21.8Q27.7,22.3 28.3,22.55 28.9,22.85 29.55,22.55 30.1,22.25 30.35,21.65L30.4,21.65Q30.6,21.05 30.3,20.45L27.15,13.7Q26.8,12.95 27.25,12.2 27.8,11.45 28.85,10.95 29.8,10.5 30.7,10.6 31.6,10.65 31.95,11.4L35.1,18.15 35.1,18.2Q35.4,18.75 36,19 36.55,19.25 37.2,18.95 37.25,18.95 37.3,18.9 37.85,18.65 38.1,18.05 38.1,18 38.15,18 38.35,17.35 38.05,16.8L36.25,12.95Q35.85,12.1 36.15,11.5 36.15,11.45 36.2,11.45 36.4,10.85 37.1,10.55 37.75,10.25 38.35,10.45L38.4,10.45Q39.05,10.65 39.45,11.5L41.4,15.6 41.4,15.4Q41.5,15.85 43.5,19.9"/>
</g>
</g>
</svg>
</body>
</html>Video of problem here if you dont actually see it in your Chrome browser.