How do I align path element row-wise in SVG component? - css
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>
Related
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>
SVG stroke-width not working
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>
Error when using DiceKriging function km: 'Error in t.default(T) : argument is not a matrix'
I'm attempting to apply the km function from the DiceKriging package to a multivariate dataset. When I use my entire dataset (dimensions = [938,13]), the algorithm runs without problem. When I use a smaller subset of this dataset (dimensions = [94,13]), I encounter this error: Error in t.default(T) : argument is not a matrix I'm not sure what's causing this error to occur when analyzing the data subset. For reference, here's the data and code I'm running: g<-km(design=sub.ev,response=sub.rv,covtype="matern5_2") > sub.ev 1 -0.1519272795 1 0 0 27.769 27.45715 8.02 7.330 21.16 17.73979 0.000 4119.280 0.5338750 2 -0.1436123857 1 0 0 27.420 27.45715 8.04 6.895 20.19 17.73979 0.000 4119.280 0.5338750 3 -0.1144934053 1 0 0 27.021 27.45715 8.06 6.690 19.54 17.73979 0.000 4119.280 0.5338750 4 -0.1585420923 1 0 0 26.531 27.45715 8.09 6.160 18.64 17.73979 0.000 4119.280 0.5338750 5 -0.0588867480 1 0 0 26.107 27.45715 8.11 5.790 17.71 17.73979 0.000 4119.280 0.5338750 6 -0.0402306730 1 0 0 25.704 27.45715 8.15 5.840 17.26 17.73979 0.000 4119.280 0.5338750 7 0.0161781773 1 0 0 25.265 27.45715 8.18 5.390 16.77 17.73979 0.000 4119.280 0.5338750 8 0.0660891620 1 0 0 24.967 27.45715 8.21 5.425 16.18 17.73979 0.000 4119.280 0.5338750 9 0.0079745010 1 0 0 24.665 27.45715 8.24 5.250 16.51 17.73979 0.000 4119.280 0.5338750 10 -0.0191421967 1 0 0 24.416 27.45715 8.27 5.090 15.46 17.73979 0.000 4119.280 0.5338750 11 0.0364618430 1 0 0 24.232 27.45715 8.29 4.820 14.47 17.73979 0.000 4119.280 0.5338750 12 0.0160652203 1 0 0 24.077 27.45715 8.31 4.745 15.57 17.73979 0.000 4119.280 0.5338750 13 0.0763233707 1 0 0 23.906 27.45715 8.33 4.680 15.14 17.73979 0.000 4119.280 0.5338750 14 0.0211064293 1 0 0 23.794 27.45715 8.35 4.940 18.25 17.73979 0.000 4119.280 0.5338750 15 0.0166228227 1 0 0 23.642 27.45715 8.36 5.190 14.60 17.73979 0.000 4119.280 0.5338750 16 0.0022511447 1 0 0 23.531 27.45715 8.37 5.425 15.30 17.73979 0.000 4119.280 0.5338750 17 -0.0122220320 1 0 0 23.445 27.45715 8.39 6.110 14.79 17.73979 0.000 4119.280 0.5338750 18 -0.0057961107 1 0 0 23.442 27.45715 8.39 5.940 14.49 17.73979 0.000 4119.280 0.5338750 19 -0.0322631907 1 0 0 23.512 27.45715 8.39 5.380 14.38 17.73979 0.000 4119.280 0.5338750 95 0.0159845000 1 0 0 27.306 27.45715 8.24 7.380 17.14 17.73979 0.000 4119.280 0.5338750 96 -0.0437959553 1 0 0 27.054 27.45715 8.25 7.100 15.35 17.73979 0.000 4119.280 0.5338750 97 -0.0805486920 1 0 0 26.520 26.88009 8.27 6.900 14.87 16.96688 0.000 3725.365 0.5422500 98 -0.0941385073 1 0 0 26.306 26.88009 8.30 6.725 15.19 16.96688 0.000 3725.365 0.5422500 99 -0.1159254400 1 0 0 26.039 26.88009 8.32 6.590 15.42 16.96688 0.000 3725.365 0.5422500 100 -0.0362266430 1 0 0 25.637 26.88009 8.36 6.280 14.34 16.96688 0.000 3725.365 0.5422500 101 0.0326682983 1 0 0 25.299 26.88009 8.38 6.100 14.36 16.96688 0.000 3725.365 0.5422500 102 0.0471005793 1 0 0 24.742 26.88009 8.44 5.955 13.48 16.96688 0.000 3725.365 0.5422500 103 -0.0596346010 1 0 0 24.262 26.88009 8.49 5.530 12.91 16.96688 0.000 3725.365 0.5422500 104 -0.0043536683 1 0 0 23.856 26.88009 8.52 5.315 12.80 16.96688 0.000 3725.365 0.5422500 105 -0.0177714297 1 0 0 23.578 26.88009 8.54 5.240 13.01 16.96688 0.000 3725.365 0.5422500 106 0.0169363000 1 0 0 23.313 26.88009 8.56 5.225 12.69 16.96688 0.000 3725.365 0.5422500 107 -0.0170451183 1 0 0 23.023 26.88009 8.59 5.090 12.71 16.96688 0.000 3725.365 0.5422500 108 0.0231896353 1 0 0 22.755 26.88009 8.62 5.280 11.58 16.96688 0.000 3725.365 0.5422500 109 0.0053651757 1 0 0 22.510 26.88009 8.65 5.690 11.28 16.96688 0.000 3725.365 0.5422500 110 0.0281674793 1 0 0 22.342 26.88009 8.68 5.555 11.21 16.96688 0.000 3725.365 0.5422500 111 0.0009483843 1 0 0 22.168 26.88009 8.70 5.770 10.68 16.96688 0.000 3725.365 0.5422500 112 0.0147559413 1 0 0 22.151 26.88009 8.69 5.995 11.57 16.96688 0.000 3725.365 0.5422500 190 -0.0115338953 1 0 0 27.062 25.91990 8.21 8.000 15.35 14.07031 0.000 3949.390 0.5342917 191 -0.0189870410 1 0 0 26.545 25.91990 8.22 7.870 14.21 14.07031 0.000 3949.390 0.5342917 192 -0.0184237180 1 0 0 26.104 25.91990 8.25 7.795 20.04 14.07031 0.000 3949.390 0.5342917 193 -0.0319295797 1 0 0 25.859 25.91990 8.26 7.730 13.14 14.07031 0.000 3949.390 0.5342917 194 -0.0184753123 1 0 0 25.573 25.91990 8.30 7.585 12.93 14.07031 0.000 3949.390 0.5342917 195 -0.0197481060 1 0 0 25.005 25.91990 8.36 7.490 11.29 14.07031 0.000 3949.390 0.5342917 196 -0.0215467360 1 0 0 24.710 25.91990 8.39 7.245 11.10 14.07031 0.000 3949.390 0.5342917 197 0.0265223447 1 0 0 24.455 25.91990 8.42 7.240 11.44 14.07031 0.000 3949.390 0.5342917 198 0.0470763840 1 0 0 24.087 25.91990 8.45 7.225 11.42 14.07031 0.000 3949.390 0.5342917 199 0.0622169450 1 0 0 23.673 25.91990 8.48 7.260 11.20 14.07031 0.000 3949.390 0.5342917 200 -0.0104582193 1 0 0 23.301 25.91990 8.52 7.190 11.57 14.07031 0.000 3949.390 0.5342917 201 0.0121972077 1 0 0 23.005 25.91990 8.55 7.220 10.71 14.07031 0.000 3949.390 0.5342917 202 0.0219721027 1 0 0 22.745 25.91990 8.59 7.245 10.86 14.07031 0.000 3949.390 0.5342917 203 0.0208879210 1 0 0 22.576 25.91990 8.61 7.180 10.62 14.07031 0.000 3949.390 0.5342917 204 0.0192644400 1 0 0 22.417 25.91990 8.63 7.220 10.47 14.07031 0.000 3949.390 0.5342917 205 0.0066226250 1 0 0 22.243 25.91990 8.65 7.170 10.29 14.07031 0.000 3949.390 0.5342917 206 0.0036012053 1 0 0 22.136 25.91990 8.67 7.200 10.86 14.07031 0.000 3949.390 0.5342917 207 -0.0027906963 1 0 0 22.012 25.91990 8.69 7.150 10.57 14.07031 0.000 3949.390 0.5342917 290 0.2266387893 1 0 0 27.763 26.21360 8.21 7.765 23.37 17.97479 0.000 3554.510 0.5938333 291 0.1151646527 1 0 0 27.377 26.21360 8.23 7.720 24.43 17.97479 0.000 3554.510 0.5938333 292 -0.0218444193 1 0 0 27.285 26.21360 8.23 7.655 23.40 17.97479 0.000 3554.510 0.5938333 293 -0.0908422353 1 0 0 26.935 26.21360 8.26 7.590 21.96 17.97479 0.000 3554.510 0.5938333 294 -0.1716709177 1 0 0 26.792 26.21360 8.28 7.540 23.30 17.97479 0.000 3554.510 0.5938333 295 -0.1943201847 1 0 0 26.869 26.21360 8.28 7.420 25.06 17.97479 0.000 3554.510 0.5938333 296 -0.1529985130 1 0 0 26.733 26.21360 8.28 7.310 33.62 17.97479 0.000 3554.510 0.5938333 297 -0.1106344563 1 0 0 26.394 26.21360 8.29 7.160 29.06 17.97479 0.000 3554.510 0.5938333 298 -0.0638089193 1 0 0 25.973 26.21360 8.32 7.010 23.25 17.97479 0.000 3554.510 0.5938333 299 -0.1208449610 1 0 0 25.501 26.21360 8.37 6.970 21.10 17.97479 0.000 3554.510 0.5938333 300 -0.2310616323 1 0 0 25.192 26.21360 8.40 7.010 19.16 17.97479 0.000 3554.510 0.5938333 301 -0.2043969970 1 0 0 24.867 26.21360 8.43 7.030 17.80 17.97479 0.000 3554.510 0.5938333 302 -0.2003585363 1 0 0 24.634 26.21360 8.45 7.080 17.01 17.97479 0.000 3554.510 0.5938333 303 -0.2535806687 1 0 0 24.468 26.21360 8.47 7.130 16.41 17.97479 0.000 3554.510 0.5938333 304 -0.2464920640 1 0 0 24.234 26.21360 8.50 7.055 15.50 17.97479 0.000 3554.510 0.5938333 389 0.2461277410 1 0 0 27.981 26.78711 8.29 6.760 20.65 22.02125 0.000 3589.260 0.7715417 390 0.1660650063 1 0 0 27.915 26.78711 8.29 6.575 22.44 22.02125 0.000 3589.260 0.7715417 391 -0.0609562143 1 0 0 27.757 26.78711 8.30 6.580 22.92 22.02125 0.000 3589.260 0.7715417 392 -0.2020911323 1 0 0 27.527 26.78711 8.32 6.590 22.91 22.02125 0.000 3589.260 0.7715417 393 -0.2980735343 1 0 0 27.563 26.78711 8.31 6.510 24.30 22.02125 0.000 3589.260 0.7715417 394 -0.2370078227 1 0 0 27.400 26.78711 8.32 6.525 22.67 22.02125 0.000 3589.260 0.7715417 395 -0.3440380117 1 0 0 27.274 26.78711 8.32 6.530 22.45 22.02125 0.000 3589.260 0.7715417 396 -0.0057092573 1 0 0 27.132 26.78711 8.30 6.490 22.08 22.02125 0.000 3589.260 0.7715417 397 -0.0241878650 1 0 0 27.018 26.78711 8.30 6.450 24.00 22.02125 0.000 3589.260 0.7715417 398 -0.2080665820 1 0 0 26.834 26.78711 8.32 6.405 25.81 22.02125 0.000 3589.260 0.7715417 399 -0.1716383953 1 0 0 26.637 26.78711 8.33 6.340 25.19 22.02125 0.000 3589.260 0.7715417 400 -0.2570107420 1 0 0 26.476 26.78711 8.34 6.300 22.05 22.02125 0.000 3589.260 0.7715417 495 -0.1302196527 1 0 0 25.967 26.53893 8.40 6.300 11.90 15.57448 2.286 2313.087 0.6087083 496 -0.0391473870 1 0 0 25.708 26.53893 8.41 6.260 10.77 15.57448 2.286 2313.087 0.6087083 587 -0.0382961500 1 0 0 28.647 26.98353 8.28 8.110 17.52 12.12667 0.000 3980.156 0.4227083 588 -0.0035965477 1 0 0 28.652 26.98353 8.26 7.920 21.14 12.12667 0.000 3980.156 0.4227083 589 -0.0050414577 1 0 0 28.307 26.98353 8.27 7.830 18.39 12.12667 0.000 3980.156 0.4227083 590 0.0354186967 1 0 0 27.896 26.98353 8.27 6.825 17.35 12.12667 0.000 3980.156 0.4227083 591 -0.0676664363 1 0 0 27.581 26.98353 8.27 6.110 16.06 12.12667 0.000 3980.156 0.4227083 592 -0.1723716683 1 0 0 27.223 26.98353 8.29 6.245 15.14 12.12667 0.000 3980.156 0.4227083 688 0.1598606430 1 0 0 28.738 27.54833 8.35 5.965 24.99 15.51010 0.000 2554.804 0.4730417 912 -0.1977195740 1 0 0 26.653 27.24447 9.09 7.635 11.38 12.71729 0.000 4002.945 0.5135417 913 -0.1306465143 1 0 0 27.399 27.24447 9.07 7.420 12.84 12.71729 0.000 4002.945 0.5135417 914 -0.1175953210 1 0 0 28.024 27.24447 9.01 7.270 13.91 12.71729 0.000 4002.945 0.5135417 > sub.rv [1] 3.24 2.65 2.18 1.75 1.52 1.32 1.25 1.18 1.16 1.10 1.05 1.01 0.95 0.88 0.83 0.76 0.72 0.61 0.58 3.64 3.46 2.97 2.64 2.27 2.07 1.72 1.33 1.03 0.89 0.82 0.69 0.64 0.60 [34] 0.55 0.44 0.33 0.26 4.65 4.10 3.55 3.30 2.70 2.12 1.74 1.53 1.27 1.02 0.88 0.76 0.66 0.58 0.54 0.47 0.40 0.28 5.87 5.24 5.09 4.22 3.90 3.94 3.41 2.75 2.18 1.86 1.67 [67] 1.52 1.42 1.34 1.35 5.88 5.56 4.88 3.98 3.76 3.31 3.11 2.78 2.41 1.97 1.65 1.39 1.63 1.44 4.08 4.83 3.84 3.23 2.83 2.36 4.33 1.86 3.17 4.48
I've run into the same issue. It is resolved when you remove the variables in your design matrix that have 0 variance (as these are simply constants). In your case, you need to remove columns (3:5).
how to apply multi-color svg to symbolpath google map
I just want to ask how can i apply this converted svg with multi-color to to google map symbol path.i converted my png file to svg file then i open the converted svg and this is the result.but i am confuse how to apply this.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="48pt" height="48pt" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 48.00 0.00 L 48.00 48.00 L 0.00 48.00 L 0.00 0.00 Z" />
<path fill="#5f6266" d=" M 6.05 9.92 C 13.25 7.57 21.24 9.24 27.86 12.57 C 25.12 14.01 22.16 14.94 19.12 15.47 C 19.13 16.17 19.13 16.86 19.11 17.55 C 20.36 16.94 21.65 16.36 23.04 16.17 C 23.44 19.41 23.05 23.50 26.27 25.46 C 30.72 27.07 35.91 25.05 38.57 21.24 C 42.31 23.12 45.02 26.31 47.09 29.88 C 44.10 34.05 40.82 39.80 34.94 39.57 C 31.14 40.43 30.10 36.12 27.98 33.98 C 25.76 30.93 21.49 32.43 18.61 30.54 C 15.29 28.54 12.37 25.90 8.80 24.31 C 7.07 23.58 5.59 22.44 4.26 21.13 C 4.18 22.82 4.08 24.50 3.95 26.19 C 2.31 24.39 1.57 22.03 0.43 19.93 C 1.71 16.38 2.06 11.56 6.05 9.92 Z" />
<path fill="#3f4042" d=" M 12.11 12.85 C 12.84 13.49 13.56 14.14 14.28 14.78 C 13.00 16.13 12.76 17.73 13.42 19.45 C 12.22 19.28 11.03 19.11 9.83 18.95 C 10.55 16.90 11.31 14.87 12.11 12.85 Z" />
<path fill="#3f4042" d=" M 27.86 12.57 C 28.93 13.21 29.75 14.12 30.23 15.29 C 29.55 15.37 28.19 15.53 27.51 15.61 C 26.02 15.79 24.53 15.97 23.04 16.17 C 21.65 16.36 20.36 16.94 19.11 17.55 C 19.13 16.86 19.13 16.17 19.12 15.47 C 22.16 14.94 25.12 14.01 27.86 12.57 Z" />
<path fill="#8b857b" d=" M 23.04 16.17 C 24.53 15.97 26.02 15.79 27.51 15.61 C 28.42 15.98 29.34 16.27 30.30 16.48 C 30.59 16.87 31.16 17.64 31.45 18.03 C 31.34 17.19 31.14 15.51 31.04 14.67 C 32.95 16.27 34.84 17.91 36.69 19.58 L 36.54 19.76 C 34.48 23.80 29.44 22.95 26.27 25.46 C 23.05 23.50 23.44 19.41 23.04 16.17 Z" />
<path fill="#6c6f74" d=" M 15.91 16.73 C 18.08 17.02 19.38 18.99 20.98 20.27 C 20.00 21.59 18.59 22.36 17.07 22.90 C 16.35 20.92 15.96 18.84 15.91 16.73 Z" />
<path fill="#3f4042" d=" M 26.27 25.46 C 29.44 22.95 34.48 23.80 36.54 19.76 C 37.05 20.13 38.06 20.87 38.57 21.24 C 35.91 25.05 30.72 27.07 26.27 25.46 Z" />
<path fill="#3f4042" d=" M 4.26 21.13 C 5.59 22.44 7.07 23.58 8.80 24.31 C 12.37 25.90 15.29 28.54 18.61 30.54 C 21.49 32.43 25.76 30.93 27.98 33.98 C 30.10 36.12 31.14 40.43 34.94 39.57 C 40.82 39.80 44.10 34.05 47.09 29.88 C 47.51 33.95 45.45 37.85 42.30 40.34 C 39.31 42.36 35.55 41.90 32.13 41.87 C 31.58 41.36 31.04 40.86 30.49 40.36 C 28.54 42.51 25.39 42.73 23.65 40.20 C 25.34 40.01 27.00 39.61 28.64 39.16 C 27.60 37.91 26.58 36.65 25.56 35.39 C 25.06 35.35 24.06 35.27 23.56 35.23 C 23.14 36.30 22.71 37.37 22.29 38.44 C 21.93 37.00 22.05 35.12 20.56 34.28 C 16.08 31.18 11.38 28.40 6.95 25.23 C 6.20 25.47 4.70 25.95 3.95 26.19 C 4.08 24.50 4.18 22.82 4.26 21.13 Z" />
<path fill="#3f4042" d=" M 19.44 22.97 C 21.89 21.90 21.38 26.96 19.14 25.99 C 17.64 25.45 18.14 23.40 19.44 22.97 Z" />
<path fill="#ffffff" d=" M 28.37 29.02 C 29.72 30.02 30.66 31.94 32.61 31.39 C 31.95 32.15 31.28 32.91 30.66 33.70 C 29.64 33.31 28.87 32.50 28.11 31.77 C 28.75 31.79 30.03 31.83 30.67 31.86 C 30.09 31.15 28.95 29.73 28.37 29.02 Z" />
<path fill="#b18d6c" d=" M 33.28 33.32 C 34.34 32.12 36.64 33.18 36.20 34.79 C 35.64 36.81 31.90 34.97 33.28 33.32 Z" />
<path fill="#8b857b" d=" M 23.56 35.23 C 24.06 35.27 25.06 35.35 25.56 35.39 C 26.58 36.65 27.60 37.91 28.64 39.16 C 27.00 39.61 25.34 40.01 23.65 40.20 L 23.12 40.28 C 22.92 39.82 22.50 38.90 22.29 38.44 C 22.71 37.37 23.14 36.30 23.56 35.23 Z" />
</svg>
var iconcar = {
anchor: new google.maps.Point(10, 50),
path: //how to apply it here.
scale: .8
}
var carPolyline = new google.maps.Polyline({
map: map,
geodesic : true,
strokeColor : '#FF0000',
strokeOpacity : 1.0,
strokeWeight : 2,
icons: [{
icon: iconcar,
scale: .8,
offset: '100%'
}],
});
Thank you in advance.