On React, how do fix Error: <svg> attribute width: Unexpected end of attribute. Expected length, "" - reactjs
<svg width="20" height="20" viewBox="0 0 42 42" fill="none" xmlns="https://www.w3.org/2000/svg">
<path d="M11.8965 4.15234H27.1215C30.9516 6.86499 34.2912 10.2108 36.9967 14.046V37.4636H11.8965V4.15234Z" fill="url(#paint0_linear)"/>
<path d="M11.8965 4.15234H27.1215C30.9516 6.86499 34.2912 10.2108 36.9967 14.046V37.4636H11.8965V4.15234Z" stroke="#C8C8C8" strokeWidth="0.25"/>
<path d="M27.1191 4.15234C30.9445 6.87152 34.2839 10.2163 36.997 14.046C36.095 13.1189 35.0013 12.4002 33.7925 11.9399C32.5837 11.4797 31.2889 11.2892 29.9988 11.3816C30.1827 10.0306 30.0143 8.65494 29.5097 7.38825C29.0052 6.12156 28.1816 5.00685 27.1191 4.15234Z" fill="url(#paint1_linear)"/>
<path d="M27.1191 4.15234C30.9445 6.87152 34.2839 10.2163 36.997 14.046C36.095 13.1189 35.0013 12.4002 33.7925 11.9399C32.5837 11.4797 31.2889 11.2892 29.9988 11.3816C30.1827 10.0306 30.0143 8.65494 29.5097 7.38825C29.0052 6.12156 28.1816 5.00685 27.1191 4.15234V4.15234Z" stroke="#C8C8C8" strokeWidth="0.25"/>
<path d="M7.00732 8.52344H25.5136V12.0672H7.00732V8.52344Z" stroke="#C8C8C8" strokeWidth="2"/>
<path d="M20.7621 26.0611C21.3737 24.8615 22.0746 23.5109 22.6258 22.1538L22.8463 21.6183C22.1192 18.8516 21.6834 16.6308 22.0733 15.1949C22.155 15.0016 22.296 14.8392 22.476 14.7312C22.656 14.6231 22.8656 14.575 23.0747 14.5938H23.4081C24.0433 14.5846 24.3413 15.3918 24.3754 15.7055C24.3802 16.1809 24.3179 16.6546 24.1903 17.1125C24.2215 16.6256 24.1495 16.1377 23.979 15.6806C23.7165 15.1044 23.4658 14.7618 23.2414 14.7054C23.1615 14.7701 23.0967 14.8513 23.0513 14.9436C23.006 15.0358 22.9813 15.1368 22.9789 15.2396C22.9123 15.647 22.8785 16.0592 22.8778 16.472C22.9088 17.6858 23.0999 18.8901 23.4461 20.0538C23.517 19.8491 23.5774 19.6522 23.6299 19.4671C23.7073 19.1758 24.1982 17.2477 24.1982 17.2477C24.1982 17.2477 24.0748 19.8149 23.9016 20.5906C23.8648 20.7547 23.8241 20.9174 23.7808 21.0828C24.3619 22.7491 25.3263 24.2556 26.5961 25.481C27.0949 25.9137 27.6409 26.2888 28.2236 26.5993C29.3171 26.4343 30.4214 26.3514 31.5272 26.3512C32.4142 26.2617 33.3063 26.461 34.0708 26.9195C34.2393 27.0895 34.3389 27.3157 34.3504 27.5548C34.3447 27.6796 34.3267 27.8036 34.2966 27.9249C34.3097 27.8579 34.3097 27.5311 33.3056 27.2083C31.9691 26.954 30.5984 26.9349 29.2553 27.1518C31.3106 28.1572 33.3148 28.6573 33.9488 28.358C34.0826 28.2686 34.1991 28.1556 34.2926 28.0246C34.2486 28.2419 34.1844 28.4545 34.101 28.6599C33.9745 28.8206 33.8018 28.9387 33.6062 28.9985C32.6034 29.261 29.9942 28.6468 27.7196 27.3474C25.1516 27.7416 22.6199 28.3434 20.1491 29.1468C17.9507 33.0003 16.2969 34.7696 14.9529 34.0963L14.4581 33.8482C14.3679 33.7754 14.3019 33.677 14.2689 33.5659C14.2358 33.4548 14.2373 33.3363 14.2731 33.2261C14.4293 32.4596 15.3913 31.3033 17.3233 30.1496C17.5307 30.0183 18.4573 29.534 18.4573 29.534C18.4573 29.534 17.7709 30.1981 17.6108 30.3281C16.0686 31.592 14.9306 33.1814 14.9582 33.7983V33.8521C16.2707 33.6658 18.2329 30.9988 20.7581 26.0572L20.7621 26.0611ZM21.5588 26.4667C21.1627 27.2075 20.7576 27.9435 20.3434 28.6743C22.4489 27.8305 24.6376 27.2111 26.8731 26.8263C26.5843 26.6277 26.3053 26.4153 26.037 26.1898C24.8843 25.1956 23.9465 23.9768 23.2808 22.6079C22.794 23.9324 22.2164 25.2217 21.5522 26.4667" fill="#F91D0A"/>
<path d="M4.92188 6.51953H27.5809V14.136H4.92188V6.51953Z" fill="url(#paint2_linear)"/>
<path d="M28.0129 14.5924H4.51123V6.0625H28.0129V14.5924ZM27.1689 6.90775H5.35648V13.7446H27.1689V6.90775Z" fill="url(#paint3_linear)"/>
<path d="M10.8442 7.63967H12.4927C12.7009 7.62634 12.9095 7.65828 13.1041 7.73328C13.2987 7.80827 13.4748 7.92455 13.6202 8.07411C13.9028 8.41916 14.0436 8.85885 14.0139 9.30392C14.0436 9.75099 13.9029 10.1927 13.6202 10.5403C13.4744 10.6891 13.2982 10.8047 13.1036 10.879C12.909 10.9533 12.7006 10.9846 12.4927 10.9708H11.8365V12.7414H10.8442V7.63967ZM11.8378 8.59254V10.0179H12.3877C12.4713 10.0227 12.5548 10.0085 12.632 9.97647C12.7093 9.94442 12.7784 9.89533 12.834 9.83286C12.9465 9.68179 13.0023 9.49592 12.9915 9.30786C13.0035 9.11964 12.9477 8.93335 12.834 8.78286C12.7784 8.72031 12.7094 8.67116 12.6321 8.63911C12.5548 8.60706 12.4713 8.59293 12.3877 8.59779H11.8378V8.59254ZM15.7084 8.63848V11.7478H16.0641C16.239 11.7595 16.4142 11.73 16.5756 11.6616C16.737 11.5932 16.88 11.4878 16.9933 11.354C17.2302 11.015 17.3441 10.6052 17.3162 10.1925C17.3441 9.78224 17.2311 9.37475 16.9959 9.03748C16.8821 8.90372 16.7385 8.79844 16.5767 8.73007C16.4149 8.6617 16.2393 8.63214 16.0641 8.64373H15.7084V8.63848ZM14.7148 7.64886H15.7648C16.2034 7.62651 16.6426 7.68024 17.0629 7.80767C17.3563 7.92185 17.6118 8.11601 17.8005 8.36811C17.9848 8.60528 18.1216 8.87579 18.2034 9.16479C18.2953 9.49769 18.3395 9.84193 18.3347 10.1872C18.3395 10.5356 18.2953 10.8828 18.2034 11.2189C18.1216 11.5079 17.9848 11.7784 17.8005 12.0155C17.6095 12.2684 17.3524 12.4637 17.0576 12.5799C16.6364 12.7078 16.1966 12.7632 15.7569 12.744H14.7069V7.63967L14.7148 7.64886ZM19.0933 7.63967H21.7879V8.63454H20.0947V9.58348H21.6816V10.5784H20.0947V12.7414H19.1012V7.63967" fill="#FFF9F9"/>
<defs>
<linearGradient id="paint0_linear" x1="19.2239" y1="30.2469" x2="28.5086" y2="13.4663" gradientUnits="userSpaceOnUse">
<stop stopColor="white"/>
<stop offset="1" stopColor="#E1E1E1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="30.9188" y1="10.1492" x2="32.3468" y2="8.83272" gradientUnits="userSpaceOnUse">
<stop stopColor="white"/>
<stop offset="1" stopColor="#C8C8C8"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="18.4524" y1="17.1022" x2="14.0503" y2="3.55328" gradientUnits="userSpaceOnUse">
<stop offset="0.127" stopColor="#8A0000"/>
<stop offset="0.244" stopColor="#900000" stopOpacity="0.999"/>
<stop offset="0.398" stopColor="#A00000" stopOpacity="0.999"/>
<stop offset="0.573" stopColor="#BC0000" stopOpacity="0.998"/>
<stop offset="0.761" stopColor="#E20000" stopOpacity="0.997"/>
<stop offset="0.867" stopColor="#FA0000" stopOpacity="0.996"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="18.6377" y1="17.6388" x2="13.8877" y2="3.01619" gradientUnits="userSpaceOnUse">
<stop offset="0.315" stopColor="#5E0000"/>
<stop offset="0.444" stopColor="#830000" stopOpacity="0.999"/>
<stop offset="0.618" stopColor="#AE0000" stopOpacity="0.998"/>
<stop offset="0.775" stopColor="#CD0000" stopOpacity="0.997"/>
<stop offset="0.908" stopColor="#E00000" stopOpacity="0.996"/>
<stop offset="1" stopColor="#E70000" stopOpacity="0.996"/>
</linearGradient>
</defs>
</svg>
After I'd changed attributes to camel cases, I go this error, Any help? I'm not sure what react is complaining about or what i need to change.
On React, how do fix Error: attribute width: Unexpected end of attribute. Expected length
Related
Why do react MobileStoreButtons have different shapes?
With the React react-mobile-store-button component I try to implement the mobile store buttons. Problem is that they have different shape and I can't find any reason why this should be the case. I found a minimal example where this is also the case: https://codesandbox.io/s/zok0u?file=/src/index.js How can I make them have the same shape?
The library uses png for google play and svg for app store.
You could use individual svg's instead of a library.
const GooglePlayStoreIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5435.8 1604">
<path
fillRule="evenodd"
d="M5234.4 1604h-5033C90.4 1604 0 1513.6 0 1403.5v-1203C0 90 90.4 0 201.4 0h5033c110.9 0 201.4 90 201.4 200.5v1203c0 110.1-90.5 200.5-201.4 200.5z"
clipRule="evenodd"
></path>
<path
fill="#a6a6a6"
fillRule="evenodd"
d="M5234.4 32.1c93.1 0 169.3 75.7 169.3 168.4v1203c0 92.7-75.7 168.4-169.3 168.4h-5033c-93.1 0-169.3-75.7-169.3-168.4v-1203c0-92.7 75.7-168.4 169.3-168.4h5033zm0-32.1h-5033C90.4 0 0 90.4 0 200.5v1203C0 1514 90.4 1604 201.4 1604h5033c110.9 0 201.4-90 201.4-200.5v-1203C5435.8 90.4 5345.3 0 5234.4 0z"
clipRule="evenodd"
></path>
<path
fill="#fff"
d="M2863.6 530.6c-36.3 0-66.9-12.7-91.1-37.7-24-24.3-37.4-57.8-36.8-92 0-36.5 12.4-67.4 36.8-91.9 24.1-25 54.7-37.7 91-37.7 35.9 0 66.5 12.7 91.1 37.7 24.4 25.3 36.8 56.2 36.8 91.9-.4 36.6-12.8 67.5-36.8 91.9-24.1 25.2-54.7 37.8-91 37.8zm-1080.1 0c-35.5 0-66.3-12.5-91.5-37.2-25-24.6-37.7-55.7-37.7-92.4s12.7-67.8 37.7-92.4c24.7-24.7 55.5-37.2 91.5-37.2 17.6 0 34.7 3.5 51.1 10.6 16.1 6.9 29.2 16.3 38.9 27.8l2.4 2.9-27.1 26.6-2.8-3.3c-15.3-18.2-35.8-27.1-62.9-27.1-24.2 0-45.3 8.6-62.7 25.6-17.5 17.1-26.4 39.5-26.4 66.6s8.9 49.5 26.4 66.6c17.4 17 38.5 25.6 62.7 25.6 25.8 0 47.5-8.6 64.4-25.6 10-10 16.2-24 18.4-41.7H1779v-37.4h124.2l.5 3.4c.9 6.3 1.8 12.8 1.8 18.8 0 34.5-10.4 62.4-31 83-23.4 24.4-54 36.8-91 36.8zm1436.1-5.3h-38.3L3064 337.6l1 33.8v153.8h-38.3V276.7h43.7l1.2 1.9 110.3 176.8-1-33.7v-145h38.7v248.6zm-643.8 0H2537V314.1h-67.3v-37.4H2643v37.4h-67.3v211.2zm-137.7 0h-38.7V276.7h38.7v248.6zm-217.5 0h-38.7V314.1h-67.3v-37.4h173.3v37.4h-67.3v211.2zm-130.5-.4h-148.4V276.7h148.4v37.4h-109.6v68.2h98.9v37h-98.9v68.2h109.6v37.4zm710.8-57.7c17.3 17.3 38.3 26 62.7 26 25.1 0 45.6-8.5 62.7-26 17-17 25.6-39.3 25.6-66.2s-8.6-49.3-25.5-66.2c-17.3-17.3-38.4-26-62.7-26-25.1 0-45.6 8.5-62.6 26-17 17-25.6 39.3-25.6 66.2s8.5 49.3 25.4 66.2z"
></path>
<path
fill="#fff"
fillRule="evenodd"
d="M2732.1 872.4c-94.5 0-171.1 71.7-171.1 170.6 0 98 77.1 170.6 171.1 170.6 94.5 0 171.1-72.2 171.1-170.6 0-98.9-76.6-170.6-171.1-170.6zm0 273.6c-51.7 0-96.2-42.8-96.2-103.4 0-61.5 44.6-103.4 96.2-103.4 51.7 0 96.2 41.9 96.2 103.4.1 61-44.5 103.4-96.2 103.4zm-373.3-273.6c-94.5 0-171.1 71.7-171.1 170.6 0 98 77.1 170.6 171.1 170.6 94.5 0 171.1-72.2 171.1-170.6 0-98.9-76.7-170.6-171.1-170.6zm0 273.6c-51.7 0-96.2-42.8-96.2-103.4 0-61.5 44.6-103.4 96.2-103.4 51.7 0 96.2 41.9 96.2 103.4 0 61-44.5 103.4-96.2 103.4zm-444.2-221.5v72.2h173.3c-5.3 40.5-18.7 70.4-39.2 90.9-25.4 25.4-64.6 53-133.7 53-106.5 0-189.8-86-189.8-192.5s83.3-192.5 189.8-192.5c57.5 0 99.4 22.7 130.5 51.7l51.2-51.2c-43.2-41.4-100.7-73.1-181.3-73.1-146.1 0-268.7 119-268.7 264.7 0 146.1 122.5 264.7 268.7 264.7 78.9 0 138.1-25.8 184.9-74.4 47.7-47.7 62.8-115 62.8-169.3 0-16.9-1.3-32.1-4-45h-244.6c.1-.1.1.8.1.8zm1816.9 56.2C3717.2 942.4 3674 872 3585.4 872c-87.8 0-160.8 69.1-160.8 170.6 0 95.8 72.2 170.6 169.3 170.6 78 0 123.4-47.7 142.1-75.7l-57.9-38.8c-19.2 28.5-45.9 47.2-83.8 47.2-38.3 0-65.1-17.4-82.9-51.7l228.1-94.5c0 .1-8-19-8-19zm-232.6 57c-1.8-65.9 51.2-99.4 89.1-99.4 29.9 0 54.8 14.7 63.3 36.1l-152.4 63.3zM3313.6 1203h74.9V701.8h-74.9V1203zm-123-292.7h-2.7c-16.9-20.1-49-38.3-90-38.3-85.1 0-163.5 74.9-163.5 171.1 0 95.8 78 169.8 163.5 169.8 40.5 0 73.1-18.3 90-38.8h2.7v24.5c0 65.1-34.8 100.2-90.9 100.2-45.9 0-74.4-33-86-60.6l-65.1 27.2c18.7 45 68.6 100.7 151 100.7 87.8 0 162.2-51.7 162.2-177.8V882.2H3191v28.1h-.4zm-86 235.7c-51.7 0-94.9-43.2-94.9-102.9 0-60.2 43.2-103.8 94.9-103.8 51.2 0 90.9 44.1 90.9 103.8.5 59.7-39.6 102.9-90.9 102.9zm977.6-444.2h-179.1V1203h74.9v-189.8h104.3c82.9 0 164.4-60.1 164.4-155.5s-81.2-155.9-164.5-155.9zm2.2 241.4h-106.5v-172h106.5c56.1 0 87.8 46.3 87.8 86 0 39.3-32.1 86-87.8 86zm462.5-71.7c-54.4 0-110.5 24.1-133.7 76.6l66.4 27.6c14.3-27.6 40.5-37 68.2-37 38.8 0 78 23.2 78.9 64.6v5.3c-13.4-7.6-42.8-19.2-78-19.2-71.7 0-144.4 39.2-144.4 112.7 0 67.3 58.8 110.5 124.3 110.5 50.3 0 78-22.7 95.3-49h2.7v38.8h72.2v-192c0-89.4-66.4-138.9-151.9-138.9zm-9.4 274.5c-24.5 0-58.8-12-58.8-42.8 0-38.8 42.8-53.5 79.3-53.5 33 0 48.6 7.1 68.2 16.9-5.4 45-43.4 79-88.7 79.4zm424.7-263.8l-86 217.4h-2.7l-89.1-217.4h-80.6l133.7 303.9-76.2 168.9h78L5045 882.2h-82.8zM4288 1203h74.9V701.8H4288V1203z"
clipRule="evenodd"
></path>
<linearGradient
id="a"
x1="1682.108"
x2="1624.292"
y1="1339.478"
y2="1309.634"
gradientTransform="matrix(11.64 0 0 -22.55 -18705.596 30554.37)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#00a0ff"></stop>
<stop offset="0.007" stopColor="#00a1ff"></stop>
<stop offset="0.26" stopColor="#00beff"></stop>
<stop offset="0.512" stopColor="#00d2ff"></stop>
<stop offset="0.76" stopColor="#00dfff"></stop>
<stop offset="1" stopColor="#00e3ff"></stop>
</linearGradient>
<path
fill="url(#a)"
fillRule="evenodd"
d="M418.4 302.1c-11.6 12.5-18.3 31.6-18.3 56.6v886.7c0 25 6.7 44.1 18.7 56.1l3.1 2.7 496.8-496.8v-11.1L421.5 299.4l-3.1 2.7z"
clipRule="evenodd"
></path>
<linearGradient
id="b"
x1="1712.662"
x2="1606.561"
y1="1274.838"
y2="1274.838"
gradientTransform="matrix(9.145 0 0 -7.7 -14305.538 10618.251)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#ffe000"></stop>
<stop offset="0.409" stopColor="#ffbd00"></stop>
<stop offset="0.775" stopColor="orange"></stop>
<stop offset="1" stopColor="#ff9c00"></stop>
</linearGradient>
<path
fill="url(#b)"
fillRule="evenodd"
d="M1084 973.5L918.3 807.8v-11.6L1084 630.5l3.6 2.2 196 111.4c56.1 31.6 56.1 83.8 0 115.8l-196 111.4-3.6 2.2z"
clipRule="evenodd"
></path>
<linearGradient
id="c"
x1="1707.441"
x2="1646.682"
y1="1290.047"
y2="1211.223"
gradientTransform="matrix(15.02 0 0 -11.5775 -24650.229 15829.648)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#ff3a44"></stop>
<stop offset="1" stopColor="#c31162"></stop>
</linearGradient>
<path
fill="url(#c)"
fillRule="evenodd"
d="M1087.6 971.3L918.3 802l-499.9 499.9c18.3 19.6 49 21.8 83.3 2.7l585.9-333.3"
clipRule="evenodd"
></path>
<linearGradient
id="d"
x1="1660.636"
x2="1687.767"
y1="1365.668"
y2="1330.45"
gradientTransform="matrix(15.02 0 0 -11.5715 -24650.229 15809.992)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#32a071"></stop>
<stop offset="0.069" stopColor="#2da771"></stop>
<stop offset="0.476" stopColor="#15cf74"></stop>
<stop offset="0.801" stopColor="#06e775"></stop>
<stop offset="1" stopColor="#00f076"></stop>
</linearGradient>
<path
fill="url(#d)"
fillRule="evenodd"
d="M1087.6 632.7L501.7 299.9c-34.3-19.6-65.1-16.9-83.3 2.7L918.3 802l169.3-169.3z"
clipRule="evenodd"
></path>
<path
fillRule="evenodd"
d="M1084 967.7l-581.9 330.6c-32.5 18.7-61.5 17.4-80.2.4l-3.1 3.1 3.1 2.7c18.7 16.9 47.7 18.3 80.2-.4L1088 971.3l-4-3.6z"
clipRule="evenodd"
opacity="0.2"
></path>
<path
fillRule="evenodd"
d="M1283.6 854.1l-200.1 113.6 3.6 3.6 196-111.4c28.1-16 41.9-37 41.9-57.9-1.7 19.2-16 37.4-41.4 52.1z"
clipRule="evenodd"
opacity="0.12"
></path>
<path
fill="#fff"
fillRule="evenodd"
d="M501.7 305.7l781.9 444.2c25.4 14.3 39.7 33 41.9 52.1 0-20.9-13.8-41.9-41.9-57.9L501.7 299.9c-56.1-32.1-101.6-5.3-101.6 58.8v5.8c0-64.2 45.5-90.5 101.6-58.8z"
clipRule="evenodd"
opacity="0.25"
></path>
</svg>
);
const AppStoreIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 40">
<path
fill="#A6A6A6"
d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"
/>
<path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z" />
<path
fill="#FFF"
d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zm-3.2-9.478c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793zm26.717 21.198h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zm14.907.633c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm13.209-.078c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm14.512 1.106c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zm7.049-4.264h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zm10.603 3.119c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zm9.142-2.913a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zm9.535 2.469a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441zM49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zm6.964.999c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zm8.943-2.352-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971l-1.387-4.714h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.029zm5.433 4.714H67.15v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zm2.89 0h-1.047V6.556h1.047v6.877zm6.17-2.396c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zm6.16 2.362h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zm7.043 1.62h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.202-.239.301-.527.301-.863zm10.049-.408c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.713-.698c.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.193-.317.291-.693.291-1.128zm6.721 2.362h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zm7.053-3.929h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zm5.548 3.929h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V6.556h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zm5.723-2.58c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182z"
/>
</svg>
);
And use them as normal React components.
export default class MyComponent extends React.Component {
render() {
return (
<div>
<a href="https://google.com" target="_blank" rel="noreferrer">
<GooglePlayStoreIcon />
</a>
<a href="https://google.com" target="_blank" rel="noreferrer">
<AppStoreIcon />
</a>
</div>
);
}
}
CodeSandbox
How to use animejs line drawing in React with Hooks
First off, I'm really wanting to learn the DOM and so any explanations based out of how the DOM constructs things would be very helpful (:
I am trying to do a simple line drawing using Animejs in React with hooks.
My code so far is:
import React, { useEffect } from "react";
import anime from "animejs";
import "../App.css";
function Home() {
function animation() {
anime({
targets: "greeting",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "easeInOutSine",
duration: 150,
delay: function (el, i) {
return i * 250;
},
direction: "alternate",
loop: true,
});
}
useEffect(() => {
animation();
}, []);
return (
<div>
<div>
<svg
width="595"
height="116"
viewBox="0 0 595 116"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="greeting"
>
<mask
id="path-1-outside-1"
maskUnits="userSpaceOnUse"
x="0.289062"
y="0"
width="595"
height="116"
fill="black"
>
<rect fill="white" x="0.289062" width="595" height="116" />
<path d="M33.9609 78.7266L35.9297 92.2266L38.8125 80.0625L59.0625 8.625H70.4531L90.2109 80.0625L93.0234 92.4375L95.2031 78.6562L111.094 8.625H124.664L99.8438 111H87.5391L66.4453 36.3984L64.8281 28.5938L63.2109 36.3984L41.3438 111H29.0391L4.28906 8.625H17.7891L33.9609 78.7266Z" />
<path d="M166.992 112.406C156.68 112.406 148.289 109.031 141.82 102.281C135.352 95.4844 132.117 86.4141 132.117 75.0703V72.6797C132.117 65.1328 133.547 58.4062 136.406 52.5C139.312 46.5469 143.344 41.9062 148.5 38.5781C153.703 35.2031 159.328 33.5156 165.375 33.5156C175.266 33.5156 182.953 36.7734 188.438 43.2891C193.922 49.8047 196.664 59.1328 196.664 71.2734V76.6875H145.125C145.312 84.1875 147.492 90.2578 151.664 94.8984C155.883 99.4922 161.227 101.789 167.695 101.789C172.289 101.789 176.18 100.852 179.367 98.9766C182.555 97.1016 185.344 94.6172 187.734 91.5234L195.68 97.7109C189.305 107.508 179.742 112.406 166.992 112.406ZM165.375 44.2031C160.125 44.2031 155.719 46.125 152.156 49.9688C148.594 53.7656 146.391 59.1094 145.547 66H183.656V65.0156C183.281 58.4062 181.5 53.2969 178.312 49.6875C175.125 46.0312 170.812 44.2031 165.375 44.2031Z" />
<path d="M225.914 111H212.906V3H225.914V111Z" />
<path d="M277.312 101.789C281.953 101.789 286.008 100.383 289.477 97.5703C292.945 94.7578 294.867 91.2422 295.242 87.0234H307.547C307.312 91.3828 305.812 95.5312 303.047 99.4688C300.281 103.406 296.578 106.547 291.938 108.891C287.344 111.234 282.469 112.406 277.312 112.406C266.953 112.406 258.703 108.961 252.562 102.07C246.469 95.1328 243.422 85.6641 243.422 73.6641V71.4844C243.422 64.0781 244.781 57.4922 247.5 51.7266C250.219 45.9609 254.109 41.4844 259.172 38.2969C264.281 35.1094 270.305 33.5156 277.242 33.5156C285.773 33.5156 292.852 36.0703 298.477 41.1797C304.148 46.2891 307.172 52.9219 307.547 61.0781H295.242C294.867 56.1562 292.992 52.125 289.617 48.9844C286.289 45.7969 282.164 44.2031 277.242 44.2031C270.633 44.2031 265.5 46.5938 261.844 51.375C258.234 56.1094 256.43 62.9766 256.43 71.9766V74.4375C256.43 83.2031 258.234 89.9531 261.844 94.6875C265.453 99.4219 270.609 101.789 277.312 101.789Z" />
<path d="M318.727 72.2578C318.727 64.8047 320.18 58.1016 323.086 52.1484C326.039 46.1953 330.117 41.6016 335.32 38.3672C340.57 35.1328 346.547 33.5156 353.25 33.5156C363.609 33.5156 371.977 37.1016 378.352 44.2734C384.773 51.4453 387.984 60.9844 387.984 72.8906V73.8047C387.984 81.2109 386.555 87.8672 383.695 93.7734C380.883 99.6328 376.828 104.203 371.531 107.484C366.281 110.766 360.234 112.406 353.391 112.406C343.078 112.406 334.711 108.82 328.289 101.648C321.914 94.4766 318.727 84.9844 318.727 73.1719V72.2578ZM331.805 73.8047C331.805 82.2422 333.75 89.0156 337.641 94.125C341.578 99.2344 346.828 101.789 353.391 101.789C360 101.789 365.25 99.2109 369.141 94.0547C373.031 88.8516 374.977 81.5859 374.977 72.2578C374.977 63.9141 372.984 57.1641 369 52.0078C365.062 46.8047 359.812 44.2031 353.25 44.2031C346.828 44.2031 341.648 46.7578 337.711 51.8672C333.773 56.9766 331.805 64.2891 331.805 73.8047Z" />
<path d="M416.531 34.9219L416.883 43.3594C422.461 36.7969 429.984 33.5156 439.453 33.5156C450.094 33.5156 457.336 37.5938 461.18 45.75C463.711 42.0938 466.992 39.1406 471.023 36.8906C475.102 34.6406 479.906 33.5156 485.438 33.5156C502.125 33.5156 510.609 42.3516 510.891 60.0234V111H497.883V60.7969C497.883 55.3594 496.641 51.3047 494.156 48.6328C491.672 45.9141 487.5 44.5547 481.641 44.5547C476.812 44.5547 472.805 46.0078 469.617 48.9141C466.43 51.7734 464.578 55.6406 464.062 60.5156V111H450.984V61.1484C450.984 50.0859 445.57 44.5547 434.742 44.5547C426.211 44.5547 420.375 48.1875 417.234 55.4531V111H404.227V34.9219H416.531Z" />
<path d="M562.148 112.406C551.836 112.406 543.445 109.031 536.977 102.281C530.508 95.4844 527.273 86.4141 527.273 75.0703V72.6797C527.273 65.1328 528.703 58.4062 531.562 52.5C534.469 46.5469 538.5 41.9062 543.656 38.5781C548.859 35.2031 554.484 33.5156 560.531 33.5156C570.422 33.5156 578.109 36.7734 583.594 43.2891C589.078 49.8047 591.82 59.1328 591.82 71.2734V76.6875H540.281C540.469 84.1875 542.648 90.2578 546.82 94.8984C551.039 99.4922 556.383 101.789 562.852 101.789C567.445 101.789 571.336 100.852 574.523 98.9766C577.711 97.1016 580.5 94.6172 582.891 91.5234L590.836 97.7109C584.461 107.508 574.898 112.406 562.148 112.406ZM560.531 44.2031C555.281 44.2031 550.875 46.125 547.312 49.9688C543.75 53.7656 541.547 59.1094 540.703 66H578.812V65.0156C578.438 58.4062 576.656 53.2969 573.469 49.6875C570.281 46.0312 565.969 44.2031 560.531 44.2031Z" />
</mask>
<path
d="M33.9609 78.7266L35.9297 92.2266L38.8125 80.0625L59.0625 8.625H70.4531L90.2109 80.0625L93.0234 92.4375L95.2031 78.6562L111.094 8.625H124.664L99.8438 111H87.5391L66.4453 36.3984L64.8281 28.5938L63.2109 36.3984L41.3438 111H29.0391L4.28906 8.625H17.7891L33.9609 78.7266Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M166.992 112.406C156.68 112.406 148.289 109.031 141.82 102.281C135.352 95.4844 132.117 86.4141 132.117 75.0703V72.6797C132.117 65.1328 133.547 58.4062 136.406 52.5C139.312 46.5469 143.344 41.9062 148.5 38.5781C153.703 35.2031 159.328 33.5156 165.375 33.5156C175.266 33.5156 182.953 36.7734 188.438 43.2891C193.922 49.8047 196.664 59.1328 196.664 71.2734V76.6875H145.125C145.312 84.1875 147.492 90.2578 151.664 94.8984C155.883 99.4922 161.227 101.789 167.695 101.789C172.289 101.789 176.18 100.852 179.367 98.9766C182.555 97.1016 185.344 94.6172 187.734 91.5234L195.68 97.7109C189.305 107.508 179.742 112.406 166.992 112.406ZM165.375 44.2031C160.125 44.2031 155.719 46.125 152.156 49.9688C148.594 53.7656 146.391 59.1094 145.547 66H183.656V65.0156C183.281 58.4062 181.5 53.2969 178.312 49.6875C175.125 46.0312 170.812 44.2031 165.375 44.2031Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M225.914 111H212.906V3H225.914V111Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M277.312 101.789C281.953 101.789 286.008 100.383 289.477 97.5703C292.945 94.7578 294.867 91.2422 295.242 87.0234H307.547C307.312 91.3828 305.812 95.5312 303.047 99.4688C300.281 103.406 296.578 106.547 291.938 108.891C287.344 111.234 282.469 112.406 277.312 112.406C266.953 112.406 258.703 108.961 252.562 102.07C246.469 95.1328 243.422 85.6641 243.422 73.6641V71.4844C243.422 64.0781 244.781 57.4922 247.5 51.7266C250.219 45.9609 254.109 41.4844 259.172 38.2969C264.281 35.1094 270.305 33.5156 277.242 33.5156C285.773 33.5156 292.852 36.0703 298.477 41.1797C304.148 46.2891 307.172 52.9219 307.547 61.0781H295.242C294.867 56.1562 292.992 52.125 289.617 48.9844C286.289 45.7969 282.164 44.2031 277.242 44.2031C270.633 44.2031 265.5 46.5938 261.844 51.375C258.234 56.1094 256.43 62.9766 256.43 71.9766V74.4375C256.43 83.2031 258.234 89.9531 261.844 94.6875C265.453 99.4219 270.609 101.789 277.312 101.789Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M318.727 72.2578C318.727 64.8047 320.18 58.1016 323.086 52.1484C326.039 46.1953 330.117 41.6016 335.32 38.3672C340.57 35.1328 346.547 33.5156 353.25 33.5156C363.609 33.5156 371.977 37.1016 378.352 44.2734C384.773 51.4453 387.984 60.9844 387.984 72.8906V73.8047C387.984 81.2109 386.555 87.8672 383.695 93.7734C380.883 99.6328 376.828 104.203 371.531 107.484C366.281 110.766 360.234 112.406 353.391 112.406C343.078 112.406 334.711 108.82 328.289 101.648C321.914 94.4766 318.727 84.9844 318.727 73.1719V72.2578ZM331.805 73.8047C331.805 82.2422 333.75 89.0156 337.641 94.125C341.578 99.2344 346.828 101.789 353.391 101.789C360 101.789 365.25 99.2109 369.141 94.0547C373.031 88.8516 374.977 81.5859 374.977 72.2578C374.977 63.9141 372.984 57.1641 369 52.0078C365.062 46.8047 359.812 44.2031 353.25 44.2031C346.828 44.2031 341.648 46.7578 337.711 51.8672C333.773 56.9766 331.805 64.2891 331.805 73.8047Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M416.531 34.9219L416.883 43.3594C422.461 36.7969 429.984 33.5156 439.453 33.5156C450.094 33.5156 457.336 37.5938 461.18 45.75C463.711 42.0938 466.992 39.1406 471.023 36.8906C475.102 34.6406 479.906 33.5156 485.438 33.5156C502.125 33.5156 510.609 42.3516 510.891 60.0234V111H497.883V60.7969C497.883 55.3594 496.641 51.3047 494.156 48.6328C491.672 45.9141 487.5 44.5547 481.641 44.5547C476.812 44.5547 472.805 46.0078 469.617 48.9141C466.43 51.7734 464.578 55.6406 464.062 60.5156V111H450.984V61.1484C450.984 50.0859 445.57 44.5547 434.742 44.5547C426.211 44.5547 420.375 48.1875 417.234 55.4531V111H404.227V34.9219H416.531Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
<path
d="M562.148 112.406C551.836 112.406 543.445 109.031 536.977 102.281C530.508 95.4844 527.273 86.4141 527.273 75.0703V72.6797C527.273 65.1328 528.703 58.4062 531.562 52.5C534.469 46.5469 538.5 41.9062 543.656 38.5781C548.859 35.2031 554.484 33.5156 560.531 33.5156C570.422 33.5156 578.109 36.7734 583.594 43.2891C589.078 49.8047 591.82 59.1328 591.82 71.2734V76.6875H540.281C540.469 84.1875 542.648 90.2578 546.82 94.8984C551.039 99.4922 556.383 101.789 562.852 101.789C567.445 101.789 571.336 100.852 574.523 98.9766C577.711 97.1016 580.5 94.6172 582.891 91.5234L590.836 97.7109C584.461 107.508 574.898 112.406 562.148 112.406ZM560.531 44.2031C555.281 44.2031 550.875 46.125 547.312 49.9688C543.75 53.7656 541.547 59.1094 540.703 66H578.812V65.0156C578.438 58.4062 576.656 53.2969 573.469 49.6875C570.281 46.0312 565.969 44.2031 560.531 44.2031Z"
stroke="#759CFF"
stroke-width="6"
mask="url(#path-1-outside-1)"
/>
</svg>
</div>
</div>
);
}
export default Home;
My question is that there aren't any runtime errors, but I don't know why the word doesn't animate. I exported the SVG file from figma with an outline and no fill. Does anyone know what I am doing incorrectly here so that it isn't animating?
sub-path in svg imported from a svg file is bigger than expected
I'm working on a clone of 2 precedent website in AngularJs (v1.5.5) + Snap Svg ( v0.5.1 )
in this new one i'm drawing a big stage in which i put a subgroup and fill it with the content of an external svg file imported.
the main code is :
scope.addDimPlus = function (item, position, side) {
Snap.load('img/basi/' + item.svg, function ( fragment ) {
side = side || 'dx';
var g = scope.gDimPlus.g();
g.attr({'type' : 'dim-plus-group'});
var other = fragment.selectAll('path, rect, line, text');
for (var i=0; i<other.length; i++) {
g.append(other[i]);
}
var text = fragment.select('text');
var path = g.select('path');
g.addClass('dim-plus-group');
path.attr({type : 'dim-plus'});
g.append(text);
position = position || 0;
g.attr('id', g.id);
g.transform('transform(' + position + ')');
});
};
where item.svg is the filename to load.
In the worknig one the code of the "generated" main stage is this: (taken by Chrome console)
<svg id="svgChain" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 2233 456">
<defs>
</defs>
<rect></rect> <-- and other <rect> and <g>
<g id="chain-group" transform="matrix(1.4802,0,0,1.4802,822.7841,72.7528)">
<g> <-- other 5 <g>
<g id="verticalSepParetiGroup" transform="matrix(1,0,0,1,22.68,31.18)">
<g id="gSk5xpgcgh4i" transform="matrix(1,0,0,1,0,-12.755)" >
<path d="M42.7,157.5
c-2.1,0-4.2,0-6.4,0c-2.7,0-5.2-0.1-7.5-1.9c-2.5-2-3.2-4.9-3.2-8c0-5.7,0-11.4,0-17.1c0-9.9,0-19.9,0-29.8c0-11.2,0-22.4,0-33.6
c0-9.5,0-18.9,0-28.4c0-4.7,0-9.4,0-14.1c0-5,3.8-8.8,8.8-8.8c2.3,0,4.7,0,7,0c1,0,2,0,3-0.3c1.7-0.6,3.1-2,3.6-3.8
c0.6-1.9,0.2-4.4,0.2-6.4c0-1.3,0-2.6,0-3.9c0-0.2,0.1-1.2,0-1.3c-0.3-0.2-1.9,0-2.2,0c-1.7,0-3.4,0-5.1,0c-10.5,0-20.9,0-31.4,0
c-2,0-4,0-6,0c-1,0-2.2-0.2-3.2,0c-0.2,0-0.2,0-0.3,0.1c-0.1,0.1,0,0.7,0,0.8c0,0.6,0,1.1,0,1.7c0,2.4,0,4.7,0,7.1
c0,3.2,2.4,5.9,5.7,5.9c4.7,0,8.4,3.9,8.5,8.5c0,0.4,0,0.7,0,1.1c0,2.6,0,5.2,0,7.7c0,4.6,0,9.1,0,13.7c0,5.9,0,11.8,0,17.6
c0,6.6,0,13.2,0,19.7c0,6.7,0,13.3,0,20c0,6.1,0,12.3,0,18.4c0,4.9,0,9.9,0,14.8c0,3.1,0,6.2,0,9.4c0,3.1-0.1,6-2.5,8.3
c-1.6,1.6-3.8,2.5-6,2.5c-2.5,0-4.8,1.7-5.5,4.2c-0.3,1.1-0.2,2.4-0.2,3.6c0,1.8,0,3.6,0,5.4c0,0.3-0.2,2.2,0,2.4
c0.1,0.1,0.9,0,1.1,0c0.8,0,1.7,0,2.5,0c2.8,0,5.5,0,8.3,0c7.3,0,14.5,0,21.8,0c3,0,6.1,0,9.1,0c1.1,0,2.1,0,3.2,0
c0.6,0,1.3,0.1,1.8,0c0.4-0.1,0.3,0.1,0.3-0.5c0-1.6,0-3.1,0-4.7c0-3.2,0.6-7.1-2.2-9.3C45.1,157.9,43.9,157.5,42.7,157.5z"></path>
</g>
</g>
and in the NON working project:
<svg id="svgChain" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 859 429.5">
<g id="base-group" transform="matrix(1.8364,0,0,1.8364,183.3183,131.4606)">
<g id="dimaplus" transform="matrix(1,0,0,1,0,4.1)">
<g type="dim-plus-group" id="gSk5xprcz5f" class="dim-plus-group" transform="matrix(1,0,0,1,0,0)"><path d="M94.13 143.83V33.39M113.46 33.94v-.55M118.99 33.94h-5.53M118.99 33.94v109.34M113.46 143.28h5.53M113.46 143.83v-.55M52.61 171.44h30.48M2.06 92.15l35.79 70.25M83.09 5.77H41.67M.25 47.19v37.44M37.85 162.4l1.17 1.95m0 0l1.43 1.77m0 0l1.65 1.56m0 0l1.86 1.32m0 0l2.01 1.05m0 0l2.15.77m0 0l2.22.47m0 0l2.27.15M88.61 171.44v-27.61M88.06 143.83h.55M88.61 171.44v4.97M83.64 176.97h4.42M88.06 143.83h-4.42M83.09 5.77v27.62M.25 84.63l.12 1.95m0 0l.34 1.92m0 0l.57 1.87m0 0l.78 1.78M83.09 5.77V.8M83.09 143.83v27.61M83.09 143.83h.55M41.67 5.77l-4.06.2m0 0l-4.02.6m0 0l-3.94.99m0 0l-3.83 1.37m0 0l-3.67 1.73m0 0l-3.49 2.09m0 0l-3.26 2.42m0 0l-3.01 2.73m0 0l-2.73 3.02m0 0l-2.42 3.26m0 0l-2.09 3.49m0 0l-1.74 3.67m0 0l-1.37 3.83m0 0l-.99 3.94m0 0l-.6 4.02m0 0l-.2 4.06M83.09 176.41v-4.97M88.06.25h-4.42M83.64 33.39h-.55M83.64 33.39h4.42M88.61 176.41l-.16.39m0 0l-.39.17M88.61 33.39V5.77M88.61 33.39h-.55M88.61.8v4.97M83.09.8l.07-.27m0 0l.21-.2m0 0l.27-.08M88.61 143.83h30.38M118.99 169.79H88.61M83.64 176.97l-.39-.17m0 0l-.16-.39M118.99 7.43v25.96M88.06.25l.39.16m0 0l.16.39M118.99 33.39H88.61M88.61 7.43h30.38M118.99 5.77H88.61M118.99 7.43V5.77M118.99 171.44v-1.65M118.99 143.83v25.96M88.61 171.44h30.38M99.38 158.74l.2-1.3m0 0l.57-1.19m0 0l.89-.96m0 0l1.14-.66m0 0l1.29-.29m0 0l1.31.09m0 0l1.23.49m0 0l1.03.82m0 0l.74 1.09m0 0l.39 1.25m0 0v1.32m0 0l-.39 1.26m0 0l-.74 1.09m0 0l-1.03.82m0 0l-1.23.48m0 0l-1.31.1m0 0l-1.29-.3m0 0l-1.14-.65m0 0l-.89-.97m0 0l-.57-1.19m0 0l-.2-1.3M99.38 18.48l.2-1.31m0 0l.57-1.18m0 0l.89-.97m0 0l1.14-.66m0 0l1.29-.29m0 0l1.31.1m0 0l1.23.48m0 0l1.03.82m0 0l.74 1.09m0 0l.39 1.26m0 0v1.31m0 0l-.39 1.26m0 0l-.74 1.09m0 0l-1.03.82m0 0l-1.23.48m0 0l-1.31.1m0 0l-1.29-.29m0 0l-1.14-.66m0 0l-.89-.97m0 0l-.57-1.18m0 0l-.2-1.3M49.96 130.03l.18-2.03m0 0l.56-1.96m0 0l.91-1.83m0 0l1.23-1.62m0 0l1.5-1.38m0 0l1.74-1.07m0 0l1.9-.74m0 0l2-.37m0 0h2.04m0 0l2 .37m0 0l1.9.74m0 0l1.74 1.07m0 0l1.5 1.38m0 0l1.23 1.62m0 0l.91 1.83m0 0l.56 1.96m0 0l.19 2.03m0 0l-.19 2.03m0 0l-.56 1.96m0 0l-.91 1.82m0 0l-1.23 1.63m0 0l-1.5 1.37m0 0l-1.74 1.07m0 0l-1.9.74m0 0l-2 .37m0 0h-2.04m0 0l-2-.37m0 0l-1.9-.74m0 0l-1.74-1.07m0 0l-1.5-1.37m0 0l-1.23-1.63m0 0l-.91-1.82m0 0l-.56-1.96m0 0l-.18-2.03M38.91 130.03l.2-2.95m0 0l.59-2.89m0 0l.96-2.79m0 0l1.33-2.63m0 0l1.67-2.43m0 0l1.98-2.19m0 0l2.26-1.91m0 0l2.48-1.59m0 0l2.68-1.24m0 0l2.82-.87m0 0l2.91-.49m0 0l2.95-.1m0 0l2.93.29m0 0l2.88.69m0 0l2.75 1.06m0 0l2.59 1.42m0 0l2.37 1.75m0 0l2.12 2.05m0 0l1.83 2.31m0 0l1.51 2.54m0 0l1.15 2.72m0 0l.78 2.85m0 0l.39 2.92m0 0v2.95m0 0l-.39 2.93m0 0l-.78 2.84m0 0l-1.15 2.72m0 0l-1.51 2.54m0 0l-1.83 2.31m0 0l-2.12 2.05m0 0l-2.37 1.75m0 0l-2.59 1.42m0 0l-2.75 1.06m0 0l-2.88.69m0 0l-2.93.29m0 0l-2.95-.1m0 0l-2.91-.49m0 0l-2.82-.87m0 0l-2.68-1.24m0 0l-2.48-1.59m0 0l-2.26-1.91m0 0l-1.98-2.18m0 0l-1.67-2.44m0 0l-1.33-2.63m0 0l-.96-2.79m0 0l-.59-2.89m0 0l-.2-2.94M30.63 47.19l.19-2.03m0 0l.55-1.96m0 0l.91-1.82m0 0l1.23-1.63m0 0l1.51-1.37m0 0l1.73-1.08m0 0l1.9-.73m0 0l2-.38m0 0h2.04m0 0l2 .38m0 0l1.91.73m0 0l1.73 1.08m0 0l1.5 1.37m0 0l1.23 1.63m0 0l.91 1.82m0 0l.56 1.96m0 0l.19 2.03m0 0l-.19 2.03m0 0l-.56 1.96m0 0l-.91 1.83m0 0l-1.23 1.62m0 0L48.33 56m0 0l-1.73 1.08m0 0l-1.91.73m0 0l-2 .38m0 0h-2.04m0 0l-2-.38m0 0l-1.9-.73m0 0L35.02 56m0 0l-1.51-1.37m0 0l-1.23-1.62m0 0l-.91-1.83m0 0l-.55-1.96m0 0l-.19-2.03M11.3 47.19l.2-3.46m0 0l.59-3.42m0 0l.98-3.33m0 0l1.35-3.19m0 0l1.7-3.02m0 0l2.04-2.81m0 0l2.34-2.55m0 0l2.63-2.27m0 0l2.86-1.96m0 0l3.07-1.62m0 0l3.23-1.26m0 0l3.35-.88m0 0l3.43-.49m0 0l3.47-.1m0 0l3.45.3m0 0l3.4.69m0 0l3.3 1.07m0 0l3.16 1.44m0 0l2.97 1.79m0 0l2.74 2.12m0 0l2.49 2.41m0 0l2.19 2.69m0 0l1.88 2.92m0 0l1.53 3.11m0 0l1.16 3.26m0 0l.79 3.38m0 0l.4 3.45m0 0v3.47m0 0l-.4 3.44m0 0l-.79 3.38m0 0l-1.16 3.26m0 0l-1.53 3.12m0 0l-1.88 2.91m0 0l-2.19 2.69m0 0l-2.49 2.42m0 0l-2.74 2.11m0 0l-2.97 1.79m0 0l-3.16 1.44m0 0l-3.3 1.08m0 0l-3.4.68m0 0l-3.45.3m0 0l-3.47-.1m0 0l-3.43-.49m0 0l-3.35-.88m0 0l-3.23-1.26m0 0l-3.07-1.62m0 0l-2.86-1.96m0 0l-2.63-2.27m0 0l-2.34-2.55m0 0l-2.04-2.81m0 0l-1.7-3.02m0 0l-1.35-3.19m0 0l-.98-3.33m0 0l-.59-3.42m0 0l-.2-3.46" fill="none" stroke="#000" stroke-width=".5" type="dim-plus"></path>
In the first one I've a path that is INSIDE the "chain-group" group, instead in the other project the path is bigger that the main group (base-group)
does anyone help me to find what i'm missing??? thanks!!!
Change the background colour of a mindmap object by using labels
I want to do: change the background colour of all objects with the label <folder> to blue #startmindmap skinparam backgroundColor transparent * layer 1 * layer 2 * obj * obj * <&folder> obj folder * layer 2 * <&folder> obj folder #endmindmap If anyone has experience of this, I would gladly accept any 'pearls of wisdom' they are willing to impart.
#startmindmap skinparam backgroundColor #EEAADD *[#FF0000] Debian **[#Orange] Ubuntu ***[#LightGreen] Linux Mint **[#Green] Rasbian #endmindmap Using this syntax you can color your boxes. I found this method on this link. Demo <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="130px" preserveAspectRatio="none" style="width:334px;height:130px;background:#EEAADD;" version="1.1" viewBox="0 0 334 130" width="334px" zoomAndPan="magnify"><defs><filter height="300%" id="f1n8snf7oca3o3" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><rect fill="#FF0000" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="65" x="10" y="49.9702"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="20" y="76.8345">Debian</text><rect fill="#FFA500" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="65" x="125" y="20"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="135" y="46.8643">Ubuntu</text><rect fill="#90EE90" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="83" x="240" y="20"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="63" x="250" y="46.8643">Linux Mint</text><path d="M190,39.9702 L200,39.9702 C215,39.9702 215,39.9702 230,39.9702 L240,39.9702 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M75,69.9404 L85,69.9404 C100,69.9404 100,39.9702 115,39.9702 L125,39.9702 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><rect fill="#008000" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="72" x="125" y="79.9404"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="52" x="135" y="106.8047">Rasbian</text><path d="M75,69.9404 L85,69.9404 C100,69.9404 100,99.9106 115,99.9106 L125,99.9106 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[a83dff5f9fd7a46abce9d8ea448b7c30] #startmindmap skinparam backgroundColor #EEAADD *[#FF0000] Debian **[#Orange] Ubuntu ***[#LightGreen] Linux Mint **[#Green] Rasbian #endmindmap --></g></svg>
this method may work. (PlantUML Web Server not work)
#startmindmap
skinparam backgroundColor transparent
sprite $my_right_arrow [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
* layer 1
* layer 2
* obj
* obj
* <color:00ffff> <&folder> obj folder
* layer 2
* <color:00ffff> <&folder> obj folder
* <back:00ffff> <&folder> obj folder
' backgroundColor not work!
* <color:00ffff> <$my_right_arrow> <color:000000> <size:30> test
#endmindmap
reference: http://plantuml.com/en/sprite
ScrollMagic SVG Drawing Text
I can not figure out why my svg is not drawing.
I get no "real" errors on my console (The "WARNING: tween was overwritten by another" is not relevant here)
You can see the full demo here:
http://mc-communicate.com/test/svg.html
Here are the relevant codes:
SVG HTML:
<svg version="1.1" width="1095" height="299" xmlns="http://www.w3.org/2000/svg">
<path id="c" d="m102,91.8c3,-0.5 5.6,-2.5 8.7,-2.5c3.10001,0.6 3.5,4.2 4.3,6.8c-2.4,-0.7 -4.7,-1.6 -7,-2.4c-10.4,8.5 -21.4,17.3 -27.9,29.4c-4.7,8.00001 -4.1,18.9 1.7,26.00001c4.6,5.7 12.1,8 19.2,8.09999c6.8,0 13.6,-0.89999 20.2,-2.09999c8.10001,-1.5 15.8,-4.8 23.90001,-6.10001c-12.40001,9.10001 -27.7,14.10001 -43.10001,15.10001c-8.5,0.5 -17.6,-0.3 -24.8,-5.40001c-8.5,-5.59999 -12.5,-16.7 -10.89999,-26.7c1.8,-10.9 6.8,-21.3 14.39999,-29.3c2.4,-2.8 5.7,-4.5 8.9,-6.2c2.8,-1.3 4.2,-4.4 6.7,-6.1c2,0.3 3.8,1.1 5.7,1.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="o" d="m179.10001,114c17.2,-2 35.29999,-1.7 51.29999,5.6c8.8,4 15.5,12.7 16.20001,22.50001c0.2,3.2 0.79999,7.2 -1.90001,9.59999c-9.2,9.90001 -22.59999,14.60001 -35.5,17.40001c-15.39999,2.79999 -32.5,1.39999 -45.59999,-7.70001c-2.90001,-2.39999 -7,-5 -6.70001,-9.29999c0,-8.3 2.3,-17 8,-23.20001c4.70001,-5.39999 11,-8.89999 17.3,-12.2c-1,-0.89999 -2,-1.8 -3.09999,-2.7m16.29999,7.7c-5.5,0.60001 -10.29999,3.5 -15.39999,5.2c-3.8,1.2 -7.39999,2.99999 -9.89999,6.2c-3.20001,3.2 -3.8,7.59999 -4.10001,11.89999c0,2.89999 -2.60001,6.39999 0.10001,8.8c4.79999,5.09999 11.79999,8.5 18.89999,8.5c8.7,0.2 17.39999,0.09999 26.10001,-1.10001c4.79999,-0.7 9.7,-0.2 14.5,-0.8c7.29999,-1.79999 13.09999,-8.79999 13.29999,-16.39999c0.5,-6.7 -3.09999,-13.5 -8.89999,-17c-4.8,-3 -10.39999,-3.8 -15.8,-5.2c-6.2,-1.60001 -12.59999,-0.8 -18.8,-0.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="m" d="m269.20001,156.10001c10.89999,-13.40001 13.39999,-32.2 26.79999,-43.7c1.79999,1.2 4.70001,1.9 4.60001,4.6c0.89999,8.4 1.60001,16.89999 3.79999,25.10001c6.60001,-5 8.39999,-13.40001 12.5,-20.2c2.30002,-3.9 6.39999,-6.1 10.70001,-7c0.79999,9.7 2.60001,19.9 9,27.49999c4,4.8 11.10001,7.90001 17.10001,5.3c3.79999,-1.59999 7.5,-3.59999 11.69998,-4c-1,6.2 -7.69998,8 -12.60001,10.10001c-5.89999,2.7 -12.59998,0.5 -17.69998,-2.90001c-6.70001,-4.79999 -10.70001,-12.39999 -13.80002,-19.89999c-5.39999,5.3 -6.5,13.3 -11.09998,19.10001c-2.20001,2.89999 -5.80002,4 -9.20001,4.5c-4.70001,-8.90001 -5.39999,-19.20001 -7.39999,-28.90001c-9.30002,12.5 -13.30002,27.8 -18.89999,42.10001c-1.5,2.89999 -5,3.8 -7.60001,5.39999c-4.89999,-13.3 -9.89999,-26.89999 -11,-41.09999c-0.10001,-5.10001 -0.20001,-11.40001 4.29999,-14.7c1.89999,-0.6 3.70001,1.1 4.5,2.7c1.39999,3.1 1.20001,6.6 1.30002,9.9c0,8.8 0.29999,17.7 3,26.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="i" d="m380.10001,113c1.10001,-1.8 3.5,-0.9 4.79999,0.2c0.20001,5.3 -0.69998,10.5 -0.39999,15.8c0.5,13.39999 7,25.5 11.60001,37.8c-1.60001,0.5 -3.30002,1 -4.89999,1.5c-6.90002,-10.8 -11.80002,-22.90001 -14.10001,-35.5c-0.80002,-6.60001 -1.89999,-14.4 3,-19.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="idot" d="m380.5,78.8c2.20001,-0.3 4.70001,-1.60001 6.60001,0.1c3.79999,3 6.19998,7.3 8.89999,11.3c-4.29999,1.8 -8.10001,-1.6 -11.5,-3.7c-2.79999,-1.6 -3.29999,-4.9 -4,-7.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="n" d="m444.39999,125.3c2,0 4,0.1 6,0.1c3.39999,10.99999 6,22.2 10.5,32.8c3.70001,9.3 10.80002,17.10001 19.10001,22.8c4.70001,3.3 10.70001,3.5 16.10001,2.2c5.5,-1.09999 10.29999,-4.09999 15.39999,-6.39999c-1.10001,3.39999 -3.79999,6 -6.89999,7.7c-4,2.10001 -7.80002,5.5 -12.60001,4.8c-10.29999,-0.8 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10001,-26.60001 -18.70001,-40.8c-10.5,9 -12.29999,23.89999 -22.20001,33.3c-2.19998,2.2 -4.79999,3.7 -7.5,5.09999c-1.69998,-2 -3.59998,-3.89999 -4.89999,-6.2c-0.10001,-5.8 0.70001,-11.59999 0.10001,-17.5c-0.60001,-8.3 -0.89999,-17.59999 4.79999,-24.39999c2.10001,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60001,9 -1.70001,13.59999c0,4.60001 -0.29999,9.2 -0.60001,13.90001c9.60001,-10.10001 16.80002,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="g" d="m524.5,125.5c8.20001,-5.1 20.90002,-3.9 26.09998,4.89999c3.20001,4.8 1.70001,10.8 0.60004,16c2.59998,-1.29999 5,-3.2 7.79999,-4.09999c1.59998,-0.10001 4,0.39999 4.20001,2.39999c1.70001,9.90001 -0.29999,20.3 3.29999,29.90001c1.40002,3.29999 -1,6.89999 0.70001,10.09999c7.09998,19.10001 17.09998,36.90001 28.09998,54c3.79999,5.3 2.40002,12.3 2.5,18.40001c0.29999,6.29999 -6,9.89999 -11.09998,11.60001c-15.79999,4.79999 -33,2.59998 -48.29999,-3.10001c-6.40002,-2.60001 -13.40002,-5.89999 -16.60004,-12.3c-3.79999,-8.2 -3,-17.8 -1.59998,-26.5c1.5,9.59999 2.70001,20.09999 9.09998,27.89999c2.10004,2.8 5.70001,3.3 8.90002,4.2c7.89996,1.89999 15.79999,3.80002 23.79999,5.20001c4.40002,0.89999 8.70001,-1.30002 12.90002,-2.20001c4.79999,-1.29999 10.39996,-2.19998 13.69995,-6.39999c1.10004,-1.2 0.5,-2.89999 0.30005,-4.3c-5.5,-23.7 -23.60004,-41.89999 -29.60004,-65.5c-1.79999,-9.8 -1.09998,-20.2 -5.59998,-29.5c-2.5,0.60001 -5.10004,1 -7.5,2c-2.29999,0.90001 -3.5,4 -6.20001,4c-9.40002,0.40001 -17.59998,5.2 -26.59998,7.2c-5.40002,1.20001 -11.50003,2.60001 -16.70001,-0.2c-4.20001,-2.2 -6.20001,-7.5 -4.70001,-12c2.39999,-8 8.60001,-14.2 14.79999,-19.5c5.5,-4.59999 11.70001,-8.3 17.70001,-12.2m9.29999,5.3c-7.29999,2.2 -13.59998,6.7 -19.39996,11.5c-5.80002,4.89999 -11.30002,10.5 -14.40002,17.59999c6.20001,2.60001 13.20001,3.40001 19.79999,1.8c10,-2.39999 19.70001,-6.39999 28.90002,-11.09999c1.20001,-3.70001 0.59998,-7.8 0.79999,-11.70001c0.09998,-3.29999 -2.59998,-5.59999 -5.09998,-7.39999c-3.10004,-2.10001 -7.20001,-1.7 -10.60004,-0.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="s" d="m702,92c6.5,-2.9 14.20001,-3.4 20.70001,-0.2c-1.10004,6.3 -5.70001,11.1 -11.5,13.5c-1.10004,-1.2 -2.10004,-2.5 -3.40002,-3.60001c-10.59998,0.5 -17.89996,9.3 -25.79999,15.3c10.79999,0.9 21.70001,1 32.5,2.4c11.20001,1.1 22.79999,3.2 32.40002,9.7c3.09998,1.7 2.59998,5.79999 2.59998,8.89999c-0.40002,9.89999 -7.59998,17.89999 -15.70001,22.8c-6.20001,4 -13.70001,5 -19.79999,9.2c-3.40002,2.10001 -7.20001,5.2 -11.5,3.5c-7,-2.2 -9.20001,-10.7 -7.40002,-17.2c3.30005,2.2 2,8.7 6.90002,8.59999c7.20001,0.8 13.20001,-3.7 19.29999,-6.7c4.40002,-2.5 9.29999,-4.3 12.90002,-8c2.70001,-4 4.09998,-8.8 7.59998,-12.3c-6.09998,-9.2 -17.89996,-11.3 -28.09998,-12.39999c-11.29999,-1.4 -22.5,0.5 -33.70001,1.7c-4.29999,0 -9.59998,0.7 -13.09998,-2.39999c0.19995,-3.5 1.29999,-7.3 4,-9.9c1.5,-0.4 3.19995,-0.4 4.89996,-0.5c7.29999,-8.9 15.29999,-17.9 26.20001,-22.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="otwo" d="m781.09998,114c17.20001,-2 35.30005,-1.7 51.30005,5.6c8.79999,4 15.5,12.7 16.19995,22.50001c0.20001,3.2 0.80005,7.2 -1.79999,9.59999c-9.09998,9.7 -22.20001,14.40001 -34.79999,17.2c-15.59998,3.10001 -33.09998,1.8 -46.40002,-7.5c-2.89996,-2.39999 -7,-5 -6.69995,-9.29999c0,-8.3 2.29999,-17 8,-23.20001c4.69995,-5.39999 11,-8.99999 17.29999,-12.2c-1,-0.89999 -2,-1.8 -3.10004,-2.7m-8.29999,20.8c-2.59998,1.89999 -1.89996,5.2 -2.39996,8c-0.40002,3.2 -2.5,5.7 -4.20001,8.3c4.09998,6.79999 12.09998,10 19.70001,10.79999c11.39996,1.10001 23,0.20001 34.19995,-1.7c4.60004,-0.7 8.20001,-3.8 12.10004,-6c3.5,-2.09999 7,-5.09999 8,-9.3c1.09998,-4.89999 -0.90002,-10.2 -4,-14c-4,-4.99999 -10.20001,-7.2 -16.29999,-7.99999c-0.5,4.5 0.09998,9.49999 -2.5,13.49999c-0.90002,0.90001 -3.40002,2.3 -3.70001,0.3c0,-1.7 0.5,-3.39999 0.5,-5.09999c-3.29999,-7.40001 -12.20001,-11.50001 -20,-9.3c-8,2.3 -15.29999,6.8 -21.40002,12.5z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="othree" d="m899.40002,113.6c5.59998,-1.3 11.39996,0.1 17,1c9.09998,1.9 18.79999,4.7 25.29999,11.8c5.5,5.9 8,14.4 6.79999,22.4c-0.29999,1.59999 -1.70001,2.8 -2.70001,4c-7.09998,7 -16.5,11.2 -25.89996,14.09999c-13.40002,4.20001 -28.10004,4.90001 -41.5,0.70001c-7.30005,-2.40001 -14.90002,-6.10001 -19.20001,-12.8c-0.79999,-5.5 0.29999,-11.2 2.09998,-16.5c3.20001,-9 11.10004,-15.3 19.29999,-19.7c5.80005,-3.3 12.60004,-3.1 18.80005,-5m-6,8.9c-10.10004,2.7 -17.5,10.39999 -26.30005,15.7c-3.29999,3.3 -2.89996,8.90001 -1.19995,12.90001c3.39996,5.59999 9.79999,8.59999 15.89996,10.09999c5.90002,1.40001 11,5.5 17.20001,5.3c10.40002,-1.10001 20.59998,-4.5 29.40002,-10.10001c4,-2.39999 8.69995,-4.7 10.89996,-9.09999c2.5,-4.90001 0.70001,-10.90001 -2.29999,-15.3c-3.40002,-5 -9.29999,-7.7 -15.09998,-8.9c-5.20001,-1.4 -10.60004,-0.5 -15.90002,-0.8c-4.20001,-0.2 -8.5,-1 -12.59998,0.2z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="ntwo" d="m992.40002,125.3c2,0 4,0.1 6,0.1c2.09998,6.99999 4.09998,13.99999 6.19995,20.99999c3,9.40001 6.5,19.10001 13.70001,26.3c5.29999,5.3 11.60004,11.5 19.70001,11.2c7.80005,0.10001 14.69995,-3.79999 21.5,-7.09999c-1.09998,3.39999 -3.80005,6 -6.90002,7.7c-4,2.10001 -7.79993,5.5 -12.59998,4.8c-10.30005,-0.90001 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10004,-26.60001 -18.70001,-40.8c-10.70001,9.10001 -12.40002,24.5 -22.70001,33.8c-2.09998,1.89999 -4.59998,3.3 -7,4.59999c-1.70001,-2 -3.59998,-3.89999 -4.89996,-6.2c-0.10004,-5.5 0.59998,-11.09999 0.19995,-16.59999c-0.59998,-8.60001 -1.19995,-18.20001 4.70001,-25.3c2.10004,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60004,9 -1.60004,13.59999c-0.09998,4.60001 -0.39996,9.2 -0.69995,13.90001c9.59998,-10.10001 16.79999,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
</svg>
JS:
<script>
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $c = $("path#c");
var $o = $("path#o");
var $m = $("path#m");
var $i = $("path#i");
var $idot = $("path#idot");
var $n = $("path#n");
var $g = $("path#g");
var $s = $("path#s");
var $otwo = $("path#otwo");
var $othree = $("path#othree");
var $ntwo = $("path#ntwo");
// prepare SVG
pathPrepare($c);
pathPrepare($o);
pathPrepare($m);
pathPrepare($i);
pathPrepare($idot);
pathPrepare($n);
pathPrepare($g);
pathPrepare($s);
pathPrepare($otwo);
pathPrepare($othree);
pathPrepare($ntwo);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($c, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($o, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($m, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($i, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($idot, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($n, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($g, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($s, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($otwo, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($othree, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($ntwo, 0.1, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw dot for 0.1
.add(TweenMax.to("path", 20, {
stroke: "#33629c", ease:Linear.easeNone}
), 0);
// change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1", duration: 200, tweenChanges: true}
)
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
</script>
the reason is that you actually don't use paths, but shapes with fills. You can only animate strokes this way, not fillings. The stroke in this case is the (invisible) outline of each letter. That is why it's not working. regards, J