SVG stroke-width not working - css
How to make the SVG shape outline thicker / thinner.
I am trying to implement the stroke-width property, but it is ignored by SVG.
<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>
JSFiddle
You need to set a stroke in order for stroke-width to have an effect. stroke="black" for instance.
<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke="black" stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>
Related
How do I align path element row-wise in SVG component?
Background: This is how it looks now const IconLoader = () => ( <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <title>Loader Logo</title> <g> <path stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z" /> <path stroke="currentColor" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z" /> </g> </svg> ); Question: How do I make it one after the other? Row-wise? Like: VR
As commented by #Robert Longson: Add a translate transform to one or both paths so they are situated wherever you want them to be Consider using transform = "translate(x y)" to move the letters into place <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="25%" height="25%" viewBox="-4 -4 120 100"> <title>Loader Logo</title> <g stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" > <path d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z" /> <path transform="translate(65 0)" d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z" /> </g> </svg>
Prevent snap at the end of SVG color gradient animation
I am looking to have a smooth animated gradient but I'm stuck at this point with a glitch or snap at the end of the animation making it jumpy.
Full code with the snap at the end of aniamtion (after 8 seconds) :
html,
body {
height: 100%;
}
body {
position: relative;
}
svg {
display: block;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.page-foot {
background: #ededed;
bottom: 0;
color: #222;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.page-foot-column {
order: 0;
flex: 1 1 auto;
align-self: auto;
padding: 1em;
&:nth-child(2) {
text-align: right;
}
}
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 2734.8 624.7" version="1.1" viewBox="0 0 2734.8 624.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient" x1="1107" x2="1762.2" y1="506.45" y2="-308.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9637" offset="0">
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FE9637" offset=".1250">
<animate attributeName="stop-color" values="#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FF46D5" offset=".2500">
<animate attributeName="stop-color" values="#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#C030C5" offset=".3750">
<animate attributeName="stop-color" values="#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#7C52FC" offset=".5000">
<animate attributeName="stop-color" values="#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#4085F0" offset=".625">
<animate attributeName="stop-color" values="#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#08B3E5" offset=".750">
<animate attributeName="stop-color" values="#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#1BD7BB" offset=".875">
<animate attributeName="stop-color" values="#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#2AF598" offset="1">
<animate attributeName="stop-color" values="#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="m372.1 153.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.7 79.1 45.5 110.2s68.1 45.8 110.6 45.8c25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1s17.7-17.4 24.7-27.5c2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8-18-19.3-34.8-34.3-49.5zm-2.1 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.1 25.6s10.1 19.5 12.8 30.2l-0.2 0.7zm520.7-117c0.9 2.1 1.2 4.9 1.2 8.2v266.6c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-266.6c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 0.9 1.6 1.8 3.5 2.7 5.6zm-21.3-15h-0.2s-0.1 0-0.2 0h0.4zm148.4 78.2c-21.7 21.7-32.4 47.6-32.4 77.9 0 30.5 10.7 56.5 32.4 77.9 21.4 21.4 47.3 32.1 77.9 32.1 26.6 0 49.8-8.2 69.6-24.4 4.3-3.4 8.5-5.2 13.1-5.2h3.1c6.4 0.9 11.6 4 15.6 9.2h-0.3v0.3 0.3c1.5 2.1 2.8 4.3 3.4 6.7s0.9 5.2 0.9 8.5c-0.3 7-3.4 12.2-8.8 15.3l0.3-0.3c-28.1 23.2-60.5 34.8-97.4 34.8-42.4 0-79.4-14.7-109.9-45.2s-45.5-67.5-45.5-109.9c0-43.1 15.3-79.7 45.5-109.6 30.8-30.2 67.5-45.5 109.9-45.5 17.7 0 34.8 3.1 51.3 8.9s31.4 14.1 45.2 24.7c2.8 2.1 4.9 4.6 6.4 7s2.4 5.8 3.1 10.1c0 2.8-0.6 5.5-1.5 8.2-0.9 2.8-2.1 5.2-3.7 7.6-1.8 2.1-4 4-6.1 5.2s-4.9 2.1-8.2 2.4h-3.1c-4.6 0-9.2-1.5-13.8-4.9-10.1-7.6-21.1-13.7-33-18s-23.8-6.4-36-6.4c-30.4-0.1-56.3 10.6-78 32.3zm640.7 105.7c5.2 9.5 7.6 21.4 7.6 36v6.1c0 2.1 0 4.3-0.3 6.1-0.6 6.1-2.1 12.2-4.9 18.6-2.7 6.4-6.4 12.5-11 18.3-11.6 15-26.6 26.3-44.6 33.9s-39.4 11.3-64.1 11.3c-25.3 0-48.6-5.5-69.6-17.4-10.4-5.8-19.8-12.8-28.4-21.1s-15.6-17.4-21.1-27.5h0.3c-2.4-3.7-3.7-7.6-3.7-11.6v-3.4c0-0.9 0.3-2.1 0.9-3.7 0.9-2.8 2.1-5.2 3.7-7.3 1.5-2.1 4-4 7-5.5l-0.3 0.3c3.7-2.4 7.3-3.7 11-3.7 2.8 0 5.2 0.6 7.3 1.5v-0.3c2.7 0.9 5.2 2.4 7.3 4.3 2.1 1.8 4 4 5.5 6.4 4 6.4 8.6 12.2 13.7 17.7 5.2 5.5 11.3 10.1 18.3 14 7.3 4 15 7 22.6 9.2 7.6 2.1 15.9 3 24.4 3 16.5 0 30.8-2.4 43.1-7.3 12.2-4.9 22-11.6 29-20.1 4-5.2 6.1-9.5 6.7-12.8v-1.8c0.3-1.5 0.6-3 0.6-4.6v-3.7c0-2.8 0-5.2-0.3-7.3s-0.9-4-1.8-5.5c-2.8-4.6-7.6-10.1-15.3-15.3-5.5-4-13.8-6.4-23.8-8.5-10.1-2.1-22-3-36-3-19.2 0-36-1.8-50.4-5.5-14.3-3.7-26-8.9-35.1-15.6-7-5.2-13.1-10.7-18.3-16.2s-9.2-11-11.9-16.5c-4-8.2-6.4-19.2-5.8-33l0.3-7.9c0.3-5.8 1.8-11.9 4.6-18.3s6.4-12.5 11-18.6c11.6-15 26.6-26.3 44.6-33.9s39.4-11.6 63.8-11.6c16.5 0 32.4 2.8 47.6 8.2 15.3 5.5 29 13.1 41.5 22.9 2.7 2.1 4.9 4.3 6.4 6.4s2.4 5.5 2.8 10.1c0 3.1-0.3 5.8-0.9 8.2s-1.8 4.6-3.7 6.7c-2.1 2.8-4.3 4.6-6.7 5.8s-5.8 2.4-10.1 2.4c-5.5 0.3-10.4-1.5-14.3-4.3-0.3 0-0.6-0.3-0.9-0.6-17.4-14.7-37.6-22-60.5-22-16.8 0-31.2 2.4-43.1 7.3s-21.4 11.6-28.7 20.1v-0.3c-4 5.2-6.1 9.5-6.4 12.8v3.7c0 7.9 0.3 13.1 1.2 15.6v-0.6c2.4 4.6 7.6 9.8 15.6 15.3 5.8 3.7 13.7 6.7 23.8 8.9 10.1 2.1 22 3.4 35.4 3.4 18.9 0 35.7 1.8 50.1 5.2 14.3 3.4 26.3 8.2 35.7 14.7 6.4 4.6 11.9 9.5 16.8 14.4s8.9 10.1 11.9 15.3h-0.3l0.2 2.2zm79.2-181.7h-0.2s-0.1 0-0.2 0h0.4zm21.3 14.9c0.9 2.1 1.2 4.9 1.2 8.2v264.5c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3.1 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-264.4c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 1 1.6 1.9 3.4 2.8 5.5zm690.6 27.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.6 79.1 45.5 110.2 30.8 31.1 68.1 45.8 110.6 45.8 25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1 9.5-8.2 17.7-17.4 24.7-27.5 2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8.1-18-19.4-34.8-34.3-49.5zm-2.2 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.2 25.6 5.8 9.5 10.1 19.5 12.8 30.2l-0.3 0.7zm213.5-240.7c2.3 0 4.3 0.9 6 2.5 1.7 1.5 2.6 3.5 2.6 6.1 0 2.2-0.9 4.2-2.6 5.9-1.8 1.7-3.8 2.4-6.1 2.4h-11.4v45c0 1.2-0.2 2.3-0.7 3.3-0.4 1-1 1.9-1.8 2.7-1.7 1.7-3.6 2.6-5.9 2.6s-4.3-0.8-6.1-2.4c-1.7-1.7-2.4-3.7-2.4-6.1v-45h-11.5c-2.1 0-4.1-0.8-5.9-2.4-1.7-1.9-2.6-3.9-2.6-6 0-2.3 0.9-4.3 2.6-6s3.6-2.5 5.9-2.5c0.1-0.1 39.9-0.1 39.9-0.1zm73.4 62.2c0 2.1-0.8 4.1-2.6 6-1.7 1.8-3.8 2.7-6 2.7-2.3 0-4.3-0.9-6-2.7-1.8-1.8-2.7-3.8-2.7-6v-26.2c-0.2 0.3-0.4 0.7-0.7 1-0.2 0.3-0.4 0.7-0.7 1l-1.4 2.3c-0.4 0.8-1 1.5-1.6 2.3-1 1-2 1.8-3 2.4s-2.3 1-3.9 1c-1.4 0-2.7-0.3-3.8-1s-2.1-1.5-3.1-2.5l-4.8-6.8v26.3c0 2.3-0.8 4.3-2.3 6-0.8 0.8-1.7 1.4-2.7 2s-2.1 0.8-3.3 0.8c-2.3 0-4.3-0.9-6.1-2.8-1.7-1.7-2.4-3.7-2.4-6v-53.3c0-2.1 0.6-3.8 1.6-5s2.4-2.2 4.3-3h-0.1c0.6-0.2 1.1-0.3 1.6-0.4s0.9-0.1 1.3-0.1c1.6 0 2.9 0.3 4 1s2.1 1.5 2.9 2.7l2.1 3.1c0.8 1.1 1.3 2 1.9 2.8v-0.2l2.1 3.2 2.1 3 2.2 3.1 2.8 3.6 6.6-9.5 6.4-9.4v0.1c1.7-2.5 4-3.9 7-3.9 1 0 1.9 0.2 2.7 0.5l-0.1-0.1c4.1 1.2 6.1 4 6.1 8.3v53.4l-0.4 0.3zm-208.3-62.4h-2448.7c-42.6 0-77.3 34.7-77.3 77.3v374.1c0 42.6 34.7 77.3 77.3 77.3h73.6l84.9 84.9c7.1 7.1 16.6 11 26.6 11 10.1 0 19.5-3.9 26.6-11l85-84.9h2152c42.6 0 77.3-34.7 77.3-77.3v-374.1c0-42.6-34.6-77.3-77.3-77.3zm33.6 451.4c0 18.5-15.1 33.6-33.6 33.6h-2004.8v-111.6c4.9 5.2 9.5 9.5 13.8 12.8 4.3 3.4 9.5 7 15.3 10.7 24.1 15 51 22.3 80.6 22.3 43 0 79.1-15.6 109-45.5 30.2-30.2 45.8-66.6 45.8-109.6 0-21.4-4-41.2-11.9-59.5s-19.2-34.5-34.2-49.5-31.2-26.3-49.5-34.2-38.2-11.9-59.9-11.9l1.8 0.3c-21.1 0-40.9 4-59.5 11.9s-35.4 19.2-50.4 33.9-26.3 31.1-34.2 49.5c-7.9 18.3-11.9 38.2-11.9 59.5v220.9h-120l-93.5 93.5-93.5-93.5h-91.7c-18.5 0-33.6-15.1-33.6-33.6v-374.1c0-18.5 15.1-33.6 33.6-33.6h1993.9v113.2c-4.3-4.3-8.9-8.2-13.7-12.2-4.9-4-10.1-7.6-15.9-11-24.7-15-51.9-22.6-81.8-22.6-43.1 0-79.7 15.6-110.6 46.4s-46.4 67.5-46.4 110.9 15.6 80 46.4 110.9 67.5 45.8 110.6 45.8c43.4 0 80.3-15 110.8-45.8 30.8-30.8 46.4-67.8 46.4-110.9v-224.7h409.1c18.5 0 33.6 15.1 33.6 33.6l-0.1 374.1zm-2037.8-186.7c0-30.2 10.7-56.2 32.4-77.9 21.4-21.7 47.3-32.4 77.6-32.4 30.8 0 56.5 10.7 77.9 32.4 21.1 21.4 32.1 47.3 32.1 77.6 0 30.2-10.7 56.2-32.1 77.6s-47.3 32.1-77.5 32.1l-0.3 0.6c-30.2 0-56.2-10.7-77.6-32.1-21.8-21.7-32.5-47.7-32.5-77.9zm1359.1 81.5c-21.7-21.7-32.7-47.9-32.7-78.8s11-57.1 32.7-78.8 47.9-32.7 78.8-32.7c31.4 0 57.4 11 78.8 32.7 21.4 22 32.4 47.9 32.4 79.1 0 30.8-10.7 57.1-32.4 78.8s-47.9 32.7-78.8 32.7v-0.3c-30.2 0-56.5-10.7-78.8-32.7z"/>
</g>
</svg>
Here is a CodePen link for you convenience.
To prevent the snap at the end of the color gradient animation, you need it to end at the same state as the start state. Example :
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637" dur="8s" repeatCount="indefinite"></animate>
In the animate tag, the first and last colors in the value attribute are the same (#FE9637).
Here is a full code example with the corrections to the value attributes in the animate tags :
html,
body {
height: 100%;
}
body {
position: relative;
}
svg {
display: block;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.page-foot {
background: #ededed;
bottom: 0;
color: #222;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.page-foot-column {
order: 0;
flex: 1 1 auto;
align-self: auto;
padding: 1em;
&:nth-child(2) {
text-align: right;
}
}
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 2734.8 624.7" version="1.1" viewBox="0 0 2734.8 624.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient" x1="1107" x2="1762.2" y1="506.45" y2="-308.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9637" offset="0">
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FE9637" offset=".1250">
<animate attributeName="stop-color" values="#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FF46D5" offset=".2500">
<animate attributeName="stop-color" values="#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#C030C5" offset=".3750">
<animate attributeName="stop-color" values="#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#7C52FC" offset=".5000">
<animate attributeName="stop-color" values="#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#4085F0" offset=".625">
<animate attributeName="stop-color" values="#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#08B3E5" offset=".750">
<animate attributeName="stop-color" values="#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#1BD7BB" offset=".875">
<animate attributeName="stop-color" values="#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#2AF598" offset="1">
<animate attributeName="stop-color" values="#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598" dur="8s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="m372.1 153.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.7 79.1 45.5 110.2s68.1 45.8 110.6 45.8c25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1s17.7-17.4 24.7-27.5c2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8-18-19.3-34.8-34.3-49.5zm-2.1 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.1 25.6s10.1 19.5 12.8 30.2l-0.2 0.7zm520.7-117c0.9 2.1 1.2 4.9 1.2 8.2v266.6c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-266.6c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 0.9 1.6 1.8 3.5 2.7 5.6zm-21.3-15h-0.2s-0.1 0-0.2 0h0.4zm148.4 78.2c-21.7 21.7-32.4 47.6-32.4 77.9 0 30.5 10.7 56.5 32.4 77.9 21.4 21.4 47.3 32.1 77.9 32.1 26.6 0 49.8-8.2 69.6-24.4 4.3-3.4 8.5-5.2 13.1-5.2h3.1c6.4 0.9 11.6 4 15.6 9.2h-0.3v0.3 0.3c1.5 2.1 2.8 4.3 3.4 6.7s0.9 5.2 0.9 8.5c-0.3 7-3.4 12.2-8.8 15.3l0.3-0.3c-28.1 23.2-60.5 34.8-97.4 34.8-42.4 0-79.4-14.7-109.9-45.2s-45.5-67.5-45.5-109.9c0-43.1 15.3-79.7 45.5-109.6 30.8-30.2 67.5-45.5 109.9-45.5 17.7 0 34.8 3.1 51.3 8.9s31.4 14.1 45.2 24.7c2.8 2.1 4.9 4.6 6.4 7s2.4 5.8 3.1 10.1c0 2.8-0.6 5.5-1.5 8.2-0.9 2.8-2.1 5.2-3.7 7.6-1.8 2.1-4 4-6.1 5.2s-4.9 2.1-8.2 2.4h-3.1c-4.6 0-9.2-1.5-13.8-4.9-10.1-7.6-21.1-13.7-33-18s-23.8-6.4-36-6.4c-30.4-0.1-56.3 10.6-78 32.3zm640.7 105.7c5.2 9.5 7.6 21.4 7.6 36v6.1c0 2.1 0 4.3-0.3 6.1-0.6 6.1-2.1 12.2-4.9 18.6-2.7 6.4-6.4 12.5-11 18.3-11.6 15-26.6 26.3-44.6 33.9s-39.4 11.3-64.1 11.3c-25.3 0-48.6-5.5-69.6-17.4-10.4-5.8-19.8-12.8-28.4-21.1s-15.6-17.4-21.1-27.5h0.3c-2.4-3.7-3.7-7.6-3.7-11.6v-3.4c0-0.9 0.3-2.1 0.9-3.7 0.9-2.8 2.1-5.2 3.7-7.3 1.5-2.1 4-4 7-5.5l-0.3 0.3c3.7-2.4 7.3-3.7 11-3.7 2.8 0 5.2 0.6 7.3 1.5v-0.3c2.7 0.9 5.2 2.4 7.3 4.3 2.1 1.8 4 4 5.5 6.4 4 6.4 8.6 12.2 13.7 17.7 5.2 5.5 11.3 10.1 18.3 14 7.3 4 15 7 22.6 9.2 7.6 2.1 15.9 3 24.4 3 16.5 0 30.8-2.4 43.1-7.3 12.2-4.9 22-11.6 29-20.1 4-5.2 6.1-9.5 6.7-12.8v-1.8c0.3-1.5 0.6-3 0.6-4.6v-3.7c0-2.8 0-5.2-0.3-7.3s-0.9-4-1.8-5.5c-2.8-4.6-7.6-10.1-15.3-15.3-5.5-4-13.8-6.4-23.8-8.5-10.1-2.1-22-3-36-3-19.2 0-36-1.8-50.4-5.5-14.3-3.7-26-8.9-35.1-15.6-7-5.2-13.1-10.7-18.3-16.2s-9.2-11-11.9-16.5c-4-8.2-6.4-19.2-5.8-33l0.3-7.9c0.3-5.8 1.8-11.9 4.6-18.3s6.4-12.5 11-18.6c11.6-15 26.6-26.3 44.6-33.9s39.4-11.6 63.8-11.6c16.5 0 32.4 2.8 47.6 8.2 15.3 5.5 29 13.1 41.5 22.9 2.7 2.1 4.9 4.3 6.4 6.4s2.4 5.5 2.8 10.1c0 3.1-0.3 5.8-0.9 8.2s-1.8 4.6-3.7 6.7c-2.1 2.8-4.3 4.6-6.7 5.8s-5.8 2.4-10.1 2.4c-5.5 0.3-10.4-1.5-14.3-4.3-0.3 0-0.6-0.3-0.9-0.6-17.4-14.7-37.6-22-60.5-22-16.8 0-31.2 2.4-43.1 7.3s-21.4 11.6-28.7 20.1v-0.3c-4 5.2-6.1 9.5-6.4 12.8v3.7c0 7.9 0.3 13.1 1.2 15.6v-0.6c2.4 4.6 7.6 9.8 15.6 15.3 5.8 3.7 13.7 6.7 23.8 8.9 10.1 2.1 22 3.4 35.4 3.4 18.9 0 35.7 1.8 50.1 5.2 14.3 3.4 26.3 8.2 35.7 14.7 6.4 4.6 11.9 9.5 16.8 14.4s8.9 10.1 11.9 15.3h-0.3l0.2 2.2zm79.2-181.7h-0.2s-0.1 0-0.2 0h0.4zm21.3 14.9c0.9 2.1 1.2 4.9 1.2 8.2v264.5c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3.1 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-264.4c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 1 1.6 1.9 3.4 2.8 5.5zm690.6 27.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.6 79.1 45.5 110.2 30.8 31.1 68.1 45.8 110.6 45.8 25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1 9.5-8.2 17.7-17.4 24.7-27.5 2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8.1-18-19.4-34.8-34.3-49.5zm-2.2 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.2 25.6 5.8 9.5 10.1 19.5 12.8 30.2l-0.3 0.7zm213.5-240.7c2.3 0 4.3 0.9 6 2.5 1.7 1.5 2.6 3.5 2.6 6.1 0 2.2-0.9 4.2-2.6 5.9-1.8 1.7-3.8 2.4-6.1 2.4h-11.4v45c0 1.2-0.2 2.3-0.7 3.3-0.4 1-1 1.9-1.8 2.7-1.7 1.7-3.6 2.6-5.9 2.6s-4.3-0.8-6.1-2.4c-1.7-1.7-2.4-3.7-2.4-6.1v-45h-11.5c-2.1 0-4.1-0.8-5.9-2.4-1.7-1.9-2.6-3.9-2.6-6 0-2.3 0.9-4.3 2.6-6s3.6-2.5 5.9-2.5c0.1-0.1 39.9-0.1 39.9-0.1zm73.4 62.2c0 2.1-0.8 4.1-2.6 6-1.7 1.8-3.8 2.7-6 2.7-2.3 0-4.3-0.9-6-2.7-1.8-1.8-2.7-3.8-2.7-6v-26.2c-0.2 0.3-0.4 0.7-0.7 1-0.2 0.3-0.4 0.7-0.7 1l-1.4 2.3c-0.4 0.8-1 1.5-1.6 2.3-1 1-2 1.8-3 2.4s-2.3 1-3.9 1c-1.4 0-2.7-0.3-3.8-1s-2.1-1.5-3.1-2.5l-4.8-6.8v26.3c0 2.3-0.8 4.3-2.3 6-0.8 0.8-1.7 1.4-2.7 2s-2.1 0.8-3.3 0.8c-2.3 0-4.3-0.9-6.1-2.8-1.7-1.7-2.4-3.7-2.4-6v-53.3c0-2.1 0.6-3.8 1.6-5s2.4-2.2 4.3-3h-0.1c0.6-0.2 1.1-0.3 1.6-0.4s0.9-0.1 1.3-0.1c1.6 0 2.9 0.3 4 1s2.1 1.5 2.9 2.7l2.1 3.1c0.8 1.1 1.3 2 1.9 2.8v-0.2l2.1 3.2 2.1 3 2.2 3.1 2.8 3.6 6.6-9.5 6.4-9.4v0.1c1.7-2.5 4-3.9 7-3.9 1 0 1.9 0.2 2.7 0.5l-0.1-0.1c4.1 1.2 6.1 4 6.1 8.3v53.4l-0.4 0.3zm-208.3-62.4h-2448.7c-42.6 0-77.3 34.7-77.3 77.3v374.1c0 42.6 34.7 77.3 77.3 77.3h73.6l84.9 84.9c7.1 7.1 16.6 11 26.6 11 10.1 0 19.5-3.9 26.6-11l85-84.9h2152c42.6 0 77.3-34.7 77.3-77.3v-374.1c0-42.6-34.6-77.3-77.3-77.3zm33.6 451.4c0 18.5-15.1 33.6-33.6 33.6h-2004.8v-111.6c4.9 5.2 9.5 9.5 13.8 12.8 4.3 3.4 9.5 7 15.3 10.7 24.1 15 51 22.3 80.6 22.3 43 0 79.1-15.6 109-45.5 30.2-30.2 45.8-66.6 45.8-109.6 0-21.4-4-41.2-11.9-59.5s-19.2-34.5-34.2-49.5-31.2-26.3-49.5-34.2-38.2-11.9-59.9-11.9l1.8 0.3c-21.1 0-40.9 4-59.5 11.9s-35.4 19.2-50.4 33.9-26.3 31.1-34.2 49.5c-7.9 18.3-11.9 38.2-11.9 59.5v220.9h-120l-93.5 93.5-93.5-93.5h-91.7c-18.5 0-33.6-15.1-33.6-33.6v-374.1c0-18.5 15.1-33.6 33.6-33.6h1993.9v113.2c-4.3-4.3-8.9-8.2-13.7-12.2-4.9-4-10.1-7.6-15.9-11-24.7-15-51.9-22.6-81.8-22.6-43.1 0-79.7 15.6-110.6 46.4s-46.4 67.5-46.4 110.9 15.6 80 46.4 110.9 67.5 45.8 110.6 45.8c43.4 0 80.3-15 110.8-45.8 30.8-30.8 46.4-67.8 46.4-110.9v-224.7h409.1c18.5 0 33.6 15.1 33.6 33.6l-0.1 374.1zm-2037.8-186.7c0-30.2 10.7-56.2 32.4-77.9 21.4-21.7 47.3-32.4 77.6-32.4 30.8 0 56.5 10.7 77.9 32.4 21.1 21.4 32.1 47.3 32.1 77.6 0 30.2-10.7 56.2-32.1 77.6s-47.3 32.1-77.5 32.1l-0.3 0.6c-30.2 0-56.2-10.7-77.6-32.1-21.8-21.7-32.5-47.7-32.5-77.9zm1359.1 81.5c-21.7-21.7-32.7-47.9-32.7-78.8s11-57.1 32.7-78.8 47.9-32.7 78.8-32.7c31.4 0 57.4 11 78.8 32.7 21.4 22 32.4 47.9 32.4 79.1 0 30.8-10.7 57.1-32.4 78.8s-47.9 32.7-78.8 32.7v-0.3c-30.2 0-56.5-10.7-78.8-32.7z"/>
</g>
</svg>
How to make svg stroke-dash one dash
I'm trying to reveal the arrow of an svg by animating the stroke-dash property of a circle on top, using masks. The code below shows it in action, but for some reason there are many dashes, there should only be one dash with space around it that's going from 0 to 100 stroke-dash length.. Can someone show me what i'm missing to just have one dash going from 0 - 100 length?
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 50.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 100;
}
99% {
stroke-dasharray: 100 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<path class="circle" stroke-dasharray="0, 100" d="M253.47 119.78
a 143.24 143.24 0 0 1 0 286.48
a 143.24 143.24 0 0 1 0 -286.48" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>
Your path is quite irregular, but the radius of your shape is about 244 units. Therefore, its total length is about 1533 units. You can use a circle for the mask if you want to keep it simpler. If you do that, you need to rotate it so that it starts where you want it to:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 115.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 1533;
}
99% {
stroke-dasharray: 1533 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<circle class="circle" cx="264" cy="264" r="244" transform="rotate(95, 264, 264)" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>
Try
#keyframes progress {
0% {
stroke-dasharray: 0 1000;
}
99% {
stroke-dasharray: 1000 0;
}
}
The number 1000 refers to the length of the path, not the percent filled, so you want it to equal the length of your circle. When you have a value of 100 it creates dashes every 100 units.
If I understand correctly, you want to make an arrow animation along with a growing line from zero to maximum length.
To implement this idea, you can combine two animations:
The first is an animation of line growth from zero to maximum by
changing the stroke dash from zero to maximum.
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="8s"
values="0 1508; 1508 0"
fill="freeze" />
Animation starts after clicking on the SVG canvas.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-linecap: round;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="5s"
values="0 1508; 1508 0"
fill="freeze" />
</path>
</svg>
The second animation is the movement of the arrow in a circle using
the command animateMotion
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
</polyline>
</svg>
We combine two animations by setting the same start time for both animations and the same execution time
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate attributeName="stroke-dasharray" begin="svg1.click" dur="8s" values="0 1508; 1508 0" fill="freeze" />
</path>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="8s"
repeatCount="1"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<!-- Arrow disappearance animation -->
<set attributeName="fill-opacity" to="0" begin="an.end" />
</polyline>
</svg>
'max.print' option in R
I have a data.frame with 178 rows and 14 columns. When I print it into the R-console, it only shows me 71 rows, despite the max.print option being set to 1000 rows.
Could anyone please explain why max.print option doesn't work to print full dataset in R console? And how can I do that?
I use R 3.4.1 on MacOS.
Here is a data example:
1 1 14.23 1.71 2.43 15.6 127 2.80 3.06 0.28 2.29 5.640000 1.040 3.92 1065
2 1 13.20 1.78 2.14 11.2 100 2.65 2.76 0.26 1.28 4.380000 1.050 3.40 1050
3 1 13.16 2.36 2.67 18.6 101 2.80 3.24 0.30 2.81 5.680000 1.030 3.17 1185
4 1 14.37 1.95 2.50 16.8 113 3.85 3.49 0.24 2.18 7.800000 0.860 3.45 1480
5 1 13.24 2.59 2.87 21.0 118 2.80 2.69 0.39 1.82 4.320000 1.040 2.93 735
6 1 14.20 1.76 2.45 15.2 112 3.27 3.39 0.34 1.97 6.750000 1.050 2.85 1450
7 1 14.39 1.87 2.45 14.6 96 2.50 2.52 0.30 1.98 5.250000 1.020 3.58 1290
8 1 14.06 2.15 2.61 17.6 121 2.60 2.51 0.31 1.25 5.050000 1.060 3.58 1295
9 1 14.83 1.64 2.17 14.0 97 2.80 2.98 0.29 1.98 5.200000 1.080 2.85 1045
10 1 13.86 1.35 2.27 16.0 98 2.98 3.15 0.22 1.85 7.220000 1.010 3.55 1045
11 1 14.10 2.16 2.30 18.0 105 2.95 3.32 0.22 2.38 5.750000 1.250 3.17 1510
12 1 14.12 1.48 2.32 16.8 95 2.20 2.43 0.26 1.57 5.000000 1.170 2.82 1280
13 1 13.75 1.73 2.41 16.0 89 2.60 2.76 0.29 1.81 5.600000 1.150 2.90 1320
14 1 14.75 1.73 2.39 11.4 91 3.10 3.69 0.43 2.81 5.400000 1.250 2.73 1150
15 1 14.38 1.87 2.38 12.0 102 3.30 3.64 0.29 2.96 7.500000 1.200 3.00 1547
16 1 13.63 1.81 2.70 17.2 112 2.85 2.91 0.30 1.46 7.300000 1.280 2.88 1310
17 1 14.30 1.92 2.72 20.0 120 2.80 3.14 0.33 1.97 6.200000 1.070 2.65 1280
18 1 13.83 1.57 2.62 20.0 115 2.95 3.40 0.40 1.72 6.600000 1.130 2.57 1130
19 1 14.19 1.59 2.48 16.5 108 3.30 3.93 0.32 1.86 8.700000 1.230 2.82 1680
20 1 13.64 3.10 2.56 15.2 116 2.70 3.03 0.17 1.66 5.100000 0.960 3.36 845
21 1 14.06 1.63 2.28 16.0 126 3.00 3.17 0.24 2.10 5.650000 1.090 3.71 780
22 1 12.93 3.80 2.65 18.6 102 2.41 2.41 0.25 1.98 4.500000 1.030 3.52 770
23 1 13.71 1.86 2.36 16.6 101 2.61 2.88 0.27 1.69 3.800000 1.110 4.00 1035
24 1 12.85 1.60 2.52 17.8 95 2.48 2.37 0.26 1.46 3.930000 1.090 3.63 1015
25 1 13.50 1.81 2.61 20.0 96 2.53 2.61 0.28 1.66 3.520000 1.120 3.82 845
26 1 13.05 2.05 3.22 25.0 124 2.63 2.68 0.47 1.92 3.580000 1.130 3.20 830
27 1 13.39 1.77 2.62 16.1 93 2.85 2.94 0.34 1.45 4.800000 0.920 3.22 1195
28 1 13.30 1.72 2.14 17.0 94 2.40 2.19 0.27 1.35 3.950000 1.020 2.77 1285
29 1 13.87 1.90 2.80 19.4 107 2.95 2.97 0.37 1.76 4.500000 1.250 3.40 915
30 1 14.02 1.68 2.21 16.0 96 2.65 2.33 0.26 1.98 4.700000 1.040 3.59 1035
31 1 13.73 1.50 2.70 22.5 101 3.00 3.25 0.29 2.38 5.700000 1.190 2.71 1285
32 1 13.58 1.66 2.36 19.1 106 2.86 3.19 0.22 1.95 6.900000 1.090 2.88 1515
33 1 13.68 1.83 2.36 17.2 104 2.42 2.69 0.42 1.97 3.840000 1.230 2.87 990
34 1 13.76 1.53 2.70 19.5 132 2.95 2.74 0.50 1.35 5.400000 1.250 3.00 1235
35 1 13.51 1.80 2.65 19.0 110 2.35 2.53 0.29 1.54 4.200000 1.100 2.87 1095
36 1 13.48 1.81 2.41 20.5 100 2.70 2.98 0.26 1.86 5.100000 1.040 3.47 920
37 1 13.28 1.64 2.84 15.5 110 2.60 2.68 0.34 1.36 4.600000 1.090 2.78 880
38 1 13.05 1.65 2.55 18.0 98 2.45 2.43 0.29 1.44 4.250000 1.120 2.51 1105
39 1 13.07 1.50 2.10 15.5 98 2.40 2.64 0.28 1.37 3.700000 1.180 2.69 1020
40 1 14.22 3.99 2.51 13.2 128 3.00 3.04 0.20 2.08 5.100000 0.890 3.53 760
41 1 13.56 1.71 2.31 16.2 117 3.15 3.29 0.34 2.34 6.130000 0.950 3.38 795
42 1 13.41 3.84 2.12 18.8 90 2.45 2.68 0.27 1.48 4.280000 0.910 3.00 1035
43 1 13.88 1.89 2.59 15.0 101 3.25 3.56 0.17 1.70 5.430000 0.880 3.56 1095
44 1 13.24 3.98 2.29 17.5 103 2.64 2.63 0.32 1.66 4.360000 0.820 3.00 680
45 1 13.05 1.77 2.10 17.0 107 3.00 3.00 0.28 2.03 5.040000 0.880 3.35 885
46 1 14.21 4.04 2.44 18.9 111 2.85 2.65 0.30 1.25 5.240000 0.870 3.33 1080
47 1 14.38 3.59 2.28 16.0 102 3.25 3.17 0.27 2.19 4.900000 1.040 3.44 1065
48 1 13.90 1.68 2.12 16.0 101 3.10 3.39 0.21 2.14 6.100000 0.910 3.33 985
49 1 14.10 2.02 2.40 18.8 103 2.75 2.92 0.32 2.38 6.200000 1.070 2.75 1060
50 1 13.94 1.73 2.27 17.4 108 2.88 3.54 0.32 2.08 8.900000 1.120 3.10 1260
51 1 13.05 1.73 2.04 12.4 92 2.72 3.27 0.17 2.91 7.200000 1.120 2.91 1150
52 1 13.83 1.65 2.60 17.2 94 2.45 2.99 0.22 2.29 5.600000 1.240 3.37 1265
53 1 13.82 1.75 2.42 14.0 111 3.88 3.74 0.32 1.87 7.050000 1.010 3.26 1190
54 1 13.77 1.90 2.68 17.1 115 3.00 2.79 0.39 1.68 6.300000 1.130 2.93 1375
55 1 13.74 1.67 2.25 16.4 118 2.60 2.90 0.21 1.62 5.850000 0.920 3.20 1060
56 1 13.56 1.73 2.46 20.5 116 2.96 2.78 0.20 2.45 6.250000 0.980 3.03 1120
57 1 14.22 1.70 2.30 16.3 118 3.20 3.00 0.26 2.03 6.380000 0.940 3.31 970
58 1 13.29 1.97 2.68 16.8 102 3.00 3.23 0.31 1.66 6.000000 1.070 2.84 1270
59 1 13.72 1.43 2.50 16.7 108 3.40 3.67 0.19 2.04 6.800000 0.890 2.87 1285
60 2 12.37 0.94 1.36 10.6 88 1.98 0.57 0.28 0.42 1.950000 1.050 1.82 520
61 2 12.33 1.10 2.28 16.0 101 2.05 1.09 0.63 0.41 3.270000 1.250 1.67 680
62 2 12.64 1.36 2.02 16.8 100 2.02 1.41 0.53 0.62 5.750000 0.980 1.59 450
63 2 13.67 1.25 1.92 18.0 94 2.10 1.79 0.32 0.73 3.800000 1.230 2.46 630
64 2 12.37 1.13 2.16 19.0 87 3.50 3.10 0.19 1.87 4.450000 1.220 2.87 420
65 2 12.17 1.45 2.53 19.0 104 1.89 1.75 0.45 1.03 2.950000 1.450 2.23 355
66 2 12.37 1.21 2.56 18.1 98 2.42 2.65 0.37 2.08 4.600000 1.190 2.30 678
67 2 13.11 1.01 1.70 15.0 78 2.98 3.18 0.26 2.28 5.300000 1.120 3.18 502
68 2 12.37 1.17 1.92 19.6 78 2.11 2.00 0.27 1.04 4.680000 1.120 3.48 510
69 2 13.34 0.94 2.36 17.0 110 2.53 1.30 0.55 0.42 3.170000 1.020 1.93 750
70 2 12.21 1.19 1.75 16.8 151 1.85 1.28 0.14 2.50 2.850000 1.280 3.07 718
71 2 12.29 1.61 2.21 20.4 103 1.10 1.02 0.37 1.46 3.050000 0.906 1.82 870
[ reached getOption("max.print") -- omitted 107 rows ]```
options(max.print = 99999) try this command
Type this code at the start of your R code. Worked for me: options(max.print = .Machine$integer.max)
IE 11 and Edge adding space above and below SVG despite using "display: block"
I am familiar with the issue of IE adding space above and below a SVG when not using display: block, because it treats the SVG as an inline element.
But I am using display: block; and getting the same results. Why?
svg {
width: 100%;
display: block;
}
.svgContainer {
width: 25%;
}
<div class="svgContainer">
<a id="one">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="two">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="three">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
I solved it in a kind of hackish way, but thought there would be a simple CSS fix.
after all CSS and scripts have loaded , I take the width of the svg element, which is known and based on the width to height ratio of the original svg, I use jquery to assign a height $("#svgElementToBeAssignedHeight").css("height", width of rendered svg element *(height of original svg viewbox/width of original svg viewbox)