I tried using SVG and properties stroke-dashoffset and stroke-array but they are not applied for some reason. I am new in working with SVG's and vector spaces so I don't know much but I need a fix to this problem fast. I looked for the length of a SVG path in JS. Also when I add display: none property to the id's #thextic and #pathic nothing happens, so the problem is probably there but i can't see why it won't work. When I run code in jsfiddle and codepen it works fine. Thank you in advance :)
body, html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
#pathic {
fill: none;
stroke: #E4E4E4;
stroke-width: 2;
stroke-dasharray: 1003;
animation: cloud 5s normal;
}
@keyframes cloud {
0%{
stroke-dashoffset: 1003;
}
100%{
stroke-dashoffset: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg id="textic" width="903" height="75" viewBox="0 0 903 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="pathic" d="M147.741 29.2705C147.445 29.863 147.023 30.6377 146.477 31.5947C145.952 32.5518 145.383 33.6113 144.768 34.7734C144.152 35.9128 143.526 37.109 142.888 38.3623C142.272 39.6156 141.703 40.846 141.179 42.0537C140.677 43.2386 140.256 44.3665 139.914 45.4375C139.595 46.4857 139.436 47.3743 139.436 48.1035C139.436 48.8327 139.572 49.3112 139.846 49.5391C140.142 49.7441 140.518 49.8467 140.974 49.8467C141.634 49.8467 142.307 49.653 142.99 49.2656C143.697 48.8783 144.38 48.377 145.041 47.7617C145.725 47.1465 146.385 46.4515 147.023 45.6768C147.661 44.902 148.254 44.1273 148.801 43.3525C149.37 42.555 149.883 41.8031 150.339 41.0967C150.795 40.3675 151.182 39.7523 151.501 39.251L152.731 40.208C152.344 40.9372 151.888 41.7233 151.364 42.5664C150.84 43.4095 150.259 44.264 149.621 45.1299C149.006 45.973 148.334 46.7933 147.604 47.5908C146.875 48.3883 146.101 49.0947 145.28 49.71C144.483 50.3252 143.64 50.8151 142.751 51.1797C141.862 51.5443 140.951 51.7266 140.017 51.7266C138.649 51.7266 137.647 51.3164 137.009 50.4961C136.371 49.6758 136.052 48.6162 136.052 47.3174C136.052 47.2262 136.052 47.0326 136.052 46.7363C136.075 46.4173 136.109 46.1667 136.154 45.9844C135.015 47.4199 133.921 48.6048 132.873 49.5391C131.848 50.4733 130.845 51.2139 129.865 51.7607C128.908 52.3076 127.974 52.6836 127.062 52.8887C126.174 53.1165 125.319 53.2305 124.499 53.2305C123.633 53.2305 122.813 53.0824 122.038 52.7861C121.286 52.5127 120.625 52.1025 120.056 51.5557C119.463 51.0088 119.007 50.3366 118.688 49.5391C118.347 48.7415 118.176 47.8187 118.176 46.7705C118.176 45.4717 118.472 43.9906 119.064 42.3271C119.634 40.641 120.66 38.8294 122.141 36.8926C123.394 35.2292 124.693 33.8278 126.037 32.6885C127.404 31.5492 128.737 30.6377 130.036 29.9541C131.358 29.2477 132.611 28.7464 133.796 28.4502C134.981 28.154 136.04 28.0059 136.975 28.0059C139.071 28.0059 140.655 28.359 141.726 29.0654C142.797 29.749 143.446 30.8086 143.674 32.2441C144.13 31.6745 144.608 31.1048 145.109 30.5352C145.611 29.9655 146.123 29.3844 146.647 28.792L147.741 29.2705ZM137.248 42.2588C137.544 41.7803 137.909 41.1764 138.342 40.4473C138.775 39.6953 139.23 38.932 139.709 38.1572C140.188 37.3597 140.655 36.5964 141.11 35.8672C141.566 35.138 141.965 34.5228 142.307 34.0215C142.307 33.8164 142.272 33.486 142.204 33.0303C142.159 32.5745 142.01 32.1188 141.76 31.6631C141.509 31.1846 141.11 30.7744 140.563 30.4326C140.017 30.0908 139.253 29.9199 138.273 29.9199C137.567 29.9199 136.77 30.0339 135.881 30.2617C135.015 30.4668 134.081 30.8314 133.078 31.3555C132.098 31.8568 131.084 32.529 130.036 33.3721C128.988 34.2152 127.94 35.2633 126.892 36.5166C125.319 38.4079 124.1 40.3105 123.234 42.2246C122.391 44.1159 121.97 45.8249 121.97 47.3516C121.97 48.6504 122.266 49.653 122.858 50.3594C123.451 51.0658 124.294 51.4189 125.388 51.4189C126.641 51.4189 127.814 51.1455 128.908 50.5986C130.002 50.029 131.027 49.2998 131.984 48.4111C132.941 47.5225 133.853 46.5426 134.719 45.4717C135.585 44.3779 136.428 43.307 137.248 42.2588Z
M113.972 34.2607C113.972 35.2406 113.801 36.2432 113.459 37.2686C113.117 38.2712 112.684 39.2852 112.16 40.3105C111.636 41.3132 111.078 42.3044 110.485 43.2842C109.893 44.264 109.335 45.2096 108.811 46.1211C108.286 47.0326 107.854 47.9098 107.512 48.7529C107.17 49.5732 106.999 50.3252 106.999 51.0088C106.999 51.5329 107.113 51.8861 107.341 52.0684C107.569 52.2507 107.819 52.3418 108.093 52.3418C108.959 52.3418 109.927 51.9202 110.998 51.0771C112.069 50.2113 113.151 49.1289 114.245 47.8301C115.362 46.5312 116.467 45.1185 117.561 43.5918C118.654 42.0651 119.646 40.6182 120.534 39.251L121.765 40.208C121.582 40.4814 121.252 41.0283 120.773 41.8486C120.295 42.6462 119.702 43.569 118.996 44.6172C118.29 45.6426 117.492 46.7249 116.604 47.8643C115.738 48.9808 114.803 50.0176 113.801 50.9746C112.798 51.9089 111.761 52.6836 110.69 53.2988C109.642 53.9141 108.583 54.2217 107.512 54.2217C106.896 54.2217 106.338 54.1191 105.837 53.9141C105.336 53.709 104.903 53.4242 104.538 53.0596C104.196 52.695 103.923 52.2734 103.718 51.7949C103.513 51.2936 103.41 50.7695 103.41 50.2227C103.41 49.334 103.604 48.377 103.991 47.3516C104.401 46.3034 104.903 45.2324 105.495 44.1387C106.088 43.0449 106.737 41.9512 107.443 40.8574C108.15 39.7409 108.799 38.6813 109.392 37.6787C109.984 36.6761 110.474 35.7533 110.861 34.9102C111.271 34.0443 111.477 33.3037 111.477 32.6885C111.477 31.9821 111.283 31.3896 110.896 30.9111C110.531 30.4326 110.007 30.1934 109.323 30.1934C108.594 30.1934 107.751 30.501 106.794 31.1162C105.837 31.7087 104.766 32.5859 103.581 33.748C102.396 34.9102 101.097 36.3457 99.6846 38.0547C98.2946 39.7409 96.7793 41.6663 95.1387 43.8311C94.2044 45.0843 93.293 46.292 92.4043 47.4541C92.0169 47.9554 91.6296 48.4681 91.2422 48.9922C90.8548 49.5163 90.4674 50.0404 90.0801 50.5645C89.6927 51.0658 89.3281 51.5443 88.9863 52C88.6445 52.4785 88.3369 52.8887 88.0635 53.2305L85.0557 52L89.0547 46.4971C89.6243 45.7223 90.2054 44.8906 90.7979 44.002C91.3903 43.1133 91.9714 42.2018 92.541 41.2676C93.1335 40.3105 93.6917 39.3535 94.2158 38.3965C94.7399 37.4395 95.2298 36.5052 95.6855 35.5938C96.3464 34.2266 96.8021 33.0986 97.0527 32.21C97.3034 31.2985 97.4287 30.5693 97.4287 30.0225C97.4287 29.4072 97.3148 29.0085 97.0869 28.8262C96.859 28.6211 96.54 28.5186 96.1299 28.5186C95.6969 28.5186 95.1956 28.7464 94.626 29.2021C94.0791 29.6351 93.5094 30.2048 92.917 30.9111C92.3245 31.5947 91.7207 32.3809 91.1055 33.2695C90.513 34.1354 89.9434 35.0013 89.3965 35.8672C88.8496 36.7331 88.3369 37.5534 87.8584 38.3281C87.3799 39.1029 86.9811 39.7295 86.6621 40.208L85.4316 39.251C86.5938 37.4281 87.6419 35.7646 88.5762 34.2607C89.5332 32.734 90.4447 31.4238 91.3105 30.3301C92.1992 29.2363 93.0537 28.3932 93.874 27.8008C94.7171 27.1855 95.6058 26.8779 96.54 26.8779C97.0413 26.8779 97.5199 26.9805 97.9756 27.1855C98.4541 27.3906 98.8643 27.6982 99.2061 28.1084C99.5706 28.4958 99.8555 28.9743 100.061 29.5439C100.266 30.1136 100.368 30.7744 100.368 31.5264C100.368 32.1188 100.3 32.734 100.163 33.3721C101.166 32.3923 102.1 31.5833 102.966 30.9453C103.832 30.3073 104.629 29.806 105.358 29.4414C106.088 29.054 106.76 28.7806 107.375 28.6211C107.99 28.4616 108.549 28.3818 109.05 28.3818C109.483 28.3818 109.984 28.4616 110.554 28.6211C111.123 28.7806 111.659 29.0768 112.16 29.5098C112.661 29.9427 113.083 30.5465 113.425 31.3213C113.789 32.0732 113.972 33.0531 113.972 34.2607Z
M88.0635 21.6826C88.0635 22.1383 87.9495 22.6169 87.7217 23.1182C87.4938 23.5967 87.1976 24.0296 86.833 24.417C86.4912 24.8044 86.1038 25.1234 85.6709 25.374C85.238 25.6247 84.805 25.75 84.3721 25.75C83.9847 25.75 83.6885 25.6133 83.4834 25.3398C83.2783 25.0436 83.1758 24.6904 83.1758 24.2803C83.1758 23.9157 83.2441 23.4827 83.3809 22.9814C83.5176 22.4801 83.7227 22.013 83.9961 21.5801C84.2695 21.1243 84.5999 20.737 84.9873 20.418C85.3747 20.099 85.819 19.9395 86.3203 19.9395C86.7988 19.9395 87.209 20.1217 87.5508 20.4863C87.8926 20.8509 88.0635 21.2497 88.0635 21.6826ZM81.6719 29.2705C81.3757 29.863 80.9541 30.6491 80.4072 31.6289C79.8831 32.5859 79.3135 33.6455 78.6982 34.8076C78.083 35.9469 77.4564 37.1546 76.8184 38.4307C76.1803 39.6839 75.5993 40.9144 75.0752 42.1221C74.5739 43.307 74.1637 44.4235 73.8447 45.4717C73.5257 46.5199 73.3662 47.4085 73.3662 48.1377C73.3662 48.7985 73.5029 49.2542 73.7764 49.5049C74.0498 49.7327 74.4372 49.8467 74.9385 49.8467C75.8727 49.8467 76.7842 49.5391 77.6729 48.9238C78.5615 48.3086 79.4388 47.5111 80.3047 46.5312C81.1934 45.5286 82.0592 44.3893 82.9023 43.1133C83.7454 41.8372 84.5885 40.5498 85.4316 39.251L86.6621 40.208C86.0013 41.3929 85.2493 42.6576 84.4062 44.002C83.5859 45.3464 82.6631 46.5996 81.6377 47.7617C80.6123 48.901 79.4844 49.8467 78.2539 50.5986C77.0234 51.3506 75.679 51.7266 74.2207 51.7266C72.8535 51.7266 71.8053 51.3164 71.0762 50.4961C70.347 49.6758 69.9824 48.6162 69.9824 47.3174C69.9824 45.7907 70.3356 44.1956 71.042 42.5322C71.7484 40.8688 72.6257 39.2282 73.6738 37.6104C74.7448 35.9697 75.8955 34.3975 77.126 32.8936C78.3792 31.3896 79.5299 30.0225 80.5781 28.792L81.6719 29.2705Z
M34.4014 25.6133C33.3532 27.4362 32.1455 29.2591 30.7783 31.082C29.4339 32.9049 27.9186 34.557 26.2324 36.0381C24.569 37.4964 22.7233 38.6927 20.6953 39.6269C18.6673 40.5384 16.457 40.9941 14.0645 40.9941C12.1048 40.9941 10.2705 40.6979 8.56152 40.1055C6.85254 39.4902 5.36003 38.5902 4.08398 37.4053C2.83073 36.2204 1.83952 34.7734 1.11035 33.0645C0.403971 31.3327 0.0507812 29.3389 0.0507812 27.083C0.0507812 24.3258 0.472331 21.7965 1.31543 19.4951C2.18132 17.1709 3.34342 15.0859 4.80176 13.2402C6.26009 11.3717 7.95768 9.74251 9.89453 8.35254C11.8314 6.93978 13.8936 5.76627 16.0811 4.83203C18.2686 3.875 20.513 3.16862 22.8145 2.71289C25.1387 2.23437 27.3945 2.00651 29.582 2.02929C31.9518 2.05208 34.2646 2.39388 36.5205 3.05468C38.7992 3.71549 40.8158 4.72949 42.5703 6.09668C44.3477 7.44108 45.7718 9.15006 46.8428 11.2236C47.9137 13.2972 48.4492 15.7467 48.4492 18.5723C48.4492 20.5319 48.1074 22.7308 47.4238 25.1689C46.7402 27.5843 45.5553 30.2617 43.8691 33.2012C41.9095 36.6191 40.2119 39.5358 38.7764 41.9512C37.3408 44.3437 36.1445 46.3603 35.1875 48.001C34.2533 49.6188 33.5583 50.9176 33.1025 51.8975C32.6468 52.8545 32.4189 53.6178 32.4189 54.1875C32.4189 54.7344 32.6582 55.1673 33.1367 55.4863C33.638 55.8053 34.333 55.9648 35.2217 55.9648C36.4294 55.9648 37.8535 55.6458 39.4941 55.0078C41.1348 54.3698 42.9463 53.4128 44.9287 52.1367C46.7288 50.9974 48.5062 49.6872 50.2607 48.2061C52.0153 46.7249 53.7243 45.1527 55.3877 43.4893C57.0739 41.8031 58.6917 40.0599 60.2412 38.2598C61.8135 36.4596 63.2946 34.6709 64.6846 32.8936C66.0745 31.0934 67.362 29.3389 68.5469 27.6299C69.7318 25.9209 70.7913 24.3145 71.7256 22.8105C71.2699 21.3978 70.9395 20.0534 70.7344 18.7773C70.5293 17.4785 70.4268 16.2594 70.4268 15.1201C70.4268 13.7301 70.5521 12.4997 70.8027 11.4287C71.0534 10.335 71.3838 9.4235 71.7939 8.69433C72.2269 7.94238 72.7282 7.37272 73.2979 6.98535C73.8903 6.59798 74.5169 6.40429 75.1777 6.40429C75.7474 6.40429 76.2373 6.54101 76.6475 6.81445C77.0804 7.0651 77.4336 7.3955 77.707 7.80566C77.9805 8.21582 78.1855 8.68294 78.3223 9.20703C78.459 9.73112 78.5273 10.2552 78.5273 10.7793C78.5273 11.5768 78.3906 12.5452 78.1172 13.6846C77.8438 14.8239 77.3424 16.1683 76.6133 17.7178C75.998 19.0394 75.1322 20.6344 74.0156 22.5029C72.8991 24.3714 71.5775 26.3994 70.0508 28.5869C68.5469 30.7516 66.8721 32.9961 65.0264 35.3203C63.2035 37.6445 61.2552 39.9232 59.1816 42.1562C57.1081 44.3665 54.9434 46.4629 52.6875 48.4453C50.4544 50.4277 48.1872 52.1595 45.8857 53.6406C43.4476 55.2129 41.3626 56.2952 39.6309 56.8877C37.8991 57.4801 36.4408 57.7764 35.2559 57.7764C34.1849 57.7764 33.2848 57.6169 32.5557 57.2978C31.8493 56.9788 31.2796 56.5459 30.8467 55.999C30.4137 55.4749 30.1061 54.8825 29.9238 54.2217C29.7415 53.5609 29.6504 52.8887 29.6504 52.2051C29.6504 51.3848 29.7757 50.5189 30.0264 49.6074C30.277 48.696 30.6644 47.8073 31.1885 46.9414C31.8037 45.916 32.5785 44.6628 33.5127 43.1816C34.4469 41.7005 35.4382 40.0827 36.4863 38.3281C37.5573 36.5736 38.6283 34.7279 39.6992 32.791C40.7702 30.8314 41.7272 28.8831 42.5703 26.9463C43.4362 24.9867 44.1312 23.0726 44.6553 21.2041C45.2021 19.3356 45.4756 17.6038 45.4756 16.0088C45.4756 14.4593 45.1224 12.9554 44.416 11.4971C43.7324 10.0387 42.707 8.73991 41.3398 7.60058C39.9954 6.46126 38.332 5.5498 36.3496 4.86621C34.3672 4.15983 32.0771 3.80664 29.4795 3.80664C27.1553 3.80664 24.9108 4.09147 22.7461 4.66113C20.6042 5.208 18.5876 5.98274 16.6963 6.98535C14.805 7.98795 13.0732 9.19564 11.501 10.6084C9.9515 11.9984 8.61849 13.5365 7.50195 15.2227C6.38542 16.8861 5.51953 18.6748 4.9043 20.5889C4.28906 22.4801 3.98145 24.4284 3.98145 26.4336C3.98145 28.3477 4.27767 30.0452 4.87012 31.5264C5.48535 32.9847 6.30566 34.2038 7.33105 35.1836C8.35645 36.1634 9.54134 36.904 10.8857 37.4053C12.2301 37.9066 13.6429 38.1572 15.124 38.1572C16.7191 38.1572 18.3255 37.8496 19.9434 37.2344C21.5612 36.6191 23.1335 35.7305 24.6602 34.5684C26.2096 33.4062 27.6908 32.0049 29.1035 30.3643C30.5163 28.7008 31.8265 26.8437 33.0342 24.793L34.4014 25.6133ZM72.9561 20.7256C73.7308 19.4268 74.3574 18.2646 74.8359 17.2393C75.3372 16.2139 75.7246 15.3024 75.998 14.5049C76.2715 13.7074 76.4538 13.0124 76.5449 12.4199C76.6589 11.8047 76.7158 11.2692 76.7158 10.8135C76.7158 10.54 76.693 10.2552 76.6475 9.95898C76.6019 9.63997 76.5107 9.35514 76.374 9.10449C76.2601 8.83105 76.0892 8.61458 75.8613 8.45508C75.6562 8.29557 75.3714 8.21582 75.0068 8.21582C74.5967 8.21582 74.2207 8.4095 73.8789 8.79687C73.5371 9.16146 73.2409 9.66276 72.9902 10.3008C72.7396 10.916 72.5459 11.6452 72.4092 12.4883C72.2725 13.3086 72.2041 14.1973 72.2041 15.1543C72.2041 15.9746 72.2611 16.8519 72.375 17.7861C72.4889 18.7204 72.6826 19.7002 72.9561 20.7256Z"
fill="#E4E4E4"/>
</svg>
</body>
</html>I tried shortening the path (it was way longer before), I tried changing the id's and classes but that didn't work also.