I have svg (from undraw edited in figma) with groups selected by id and I would like to have animation in css on these groups.
But I set animation for group with id head and it doesn't work (The head should tilt, but the image doesn't move at all).
Can you help me?
Thank you in advance for your reply!
#head{
animation: head 1s ease infinite alternate;
transform-origin: bottom;
}
#keyframes head{
from{
transform: rotateZ('-10deg');
}
to{
transform: rotateZ('10deg');
}
}
<div class="svg-animation">
<svg width="600" height="523" viewBox="0 0 600 523" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_developer_activity_re_39tg 1" clip-path="url(#clip0_3_67)">
// Lots of other vectors
<g id="head">
<path id="ab6171fa-7d69-4734-b81c-8dff60f9761b" d="M199.507 172.87C226.126 172.87 247.704 151.292 247.704 124.674C247.704 98.0553 226.126 76.4769 199.507 76.4769C172.889 76.4769 151.311 98.0553 151.311 124.674C151.311 151.292 172.889 172.87 199.507 172.87Z" fill="#FFB6B6"/>
<path id="bf427902-b9bf-4946-b5d7-5c1c7e04535e" d="M241.715 89.3366C241.715 89.3366 254.32 65.2383 226.587 63.0475C226.587 63.0475 202.945 41.6007 178.847 59.1267C178.847 59.1267 165.702 59.1267 158.514 74.0013C158.514 74.0013 148.176 70.0805 145.904 80.5736C145.904 80.5736 138.339 102.481 145.904 122.198C153.469 141.915 155.981 144.106 155.981 144.106C155.981 144.106 143.551 102.768 173.808 100.577C204.064 98.3866 237.923 79.4782 240.444 103.577C242.966 127.675 246.76 133.612 246.76 133.612C246.76 133.612 270.709 99.1951 241.715 89.3366Z" fill="#2F2E41"/>
<path id="Vector_42" d="M257.955 122.04H254.428C254.428 95.3746 228.038 77.901 201.415 77.8869C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.885 176.809 82.2182C159.618 87.4879 143.675 97.6743 143.675 122.04C143.671 126.772 144.273 131.485 145.467 136.064L142.052 136.953C140.786 132.083 140.146 127.072 140.148 122.04C140.148 100.75 148.888 86.1264 163.984 77.4072C171.92 72.8218 181.606 69.8661 192.702 68.427C197.32 67.8127 201.988 67.6708 206.635 68.0037C237.251 70.2047 257.955 93.6816 257.955 122.04Z" fill="#009B77"/>
<path id="Vector_43" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979C257.673 105.831 256.186 104.98 254.566 104.491C252.947 104.003 251.238 103.888 249.568 104.157L247.36 104.461C246.755 104.54 246.173 104.739 245.646 105.045C245.12 105.352 244.659 105.76 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.305 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27C250.613 137.327 250.901 137.356 251.19 137.355C251.398 137.355 251.605 137.341 251.811 137.313L254.28 136.981C255.785 136.781 257.234 136.276 258.537 135.496C259.84 134.716 260.969 133.678 261.856 132.445C262.047 132.177 262.23 131.902 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#009B77"/>
<path id="Vector_44" d="M245.935 104.891C245.287 105.206 244.724 105.67 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.306 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27L245.935 104.891Z" fill="white"/>
<path id="Vector_45" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979L262.11 130.519C262.158 130.897 262.255 131.267 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#3F3D56"/>
<path id="Vector_46" d="M252.848 131.395C253.813 131.264 254.299 128.967 253.932 126.264C253.565 123.562 252.486 121.477 251.521 121.608C250.555 121.739 250.07 124.036 250.437 126.738C250.803 129.441 251.883 131.526 252.848 131.395Z" fill="#3F3D56"/>
<path id="Vector_47" d="M250.732 118.697C251.697 118.566 252.182 116.269 251.816 113.566C251.449 110.864 250.369 108.779 249.404 108.91C248.439 109.041 247.954 111.338 248.32 114.041C248.687 116.743 249.767 118.828 250.732 118.697Z" fill="#3F3D56"/>
<path id="Vector_48" d="M264.135 123.635C265.1 123.504 265.586 121.207 265.219 118.505C264.852 115.802 263.773 113.717 262.808 113.848C261.842 113.979 261.357 116.276 261.724 118.979C262.09 121.681 263.17 123.766 264.135 123.635Z" fill="#3F3D56"/>
<path id="Vector_49" d="M201.415 77.8868C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.8849 176.809 82.2182C170.002 81.8867 164.993 80.1231 163.984 77.4071C171.92 72.8218 181.606 69.866 192.702 68.4269C197.32 67.8126 201.988 67.6708 206.635 68.0037C207.127 68.292 207.552 68.6812 207.883 69.1457C208.213 69.6101 208.442 70.1393 208.554 70.6984C208.885 73.1534 206.085 75.7635 201.415 77.8868Z" fill="#3F3D56"/>
<path id="Vector_50" d="M156.38 146.519L150.948 123.938C150.754 123.123 150.324 122.384 149.711 121.813C149.099 121.242 148.331 120.864 147.505 120.728C147.272 120.692 147.036 120.673 146.8 120.672C146.467 120.673 146.136 120.713 145.812 120.791L143.71 121.299C141.003 121.954 138.667 123.656 137.213 126.031C135.76 128.406 135.308 131.261 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18C142.464 150.427 142.784 150.655 143.117 150.864C144.3 151.605 145.619 152.102 146.996 152.325C148.374 152.548 149.782 152.493 151.138 152.162L153.233 151.654C153.787 151.525 154.309 151.282 154.764 150.942C155.442 150.448 155.957 149.764 156.245 148.976C156.532 148.188 156.579 147.333 156.38 146.519Z" fill="#009B77"/>
<path id="Vector_51" d="M144.992 142.317C145.939 142.089 146.19 139.755 145.552 137.104C144.914 134.452 143.629 132.487 142.682 132.715C141.735 132.943 141.484 135.277 142.122 137.929C142.76 140.58 144.045 142.545 144.992 142.317Z" fill="#3F3D56"/>
<path id="Vector_52" d="M137.938 144.434C138.885 144.206 139.135 141.871 138.497 139.22C137.859 136.568 136.574 134.604 135.627 134.832C134.68 135.059 134.43 137.394 135.068 140.045C135.706 142.697 136.991 144.661 137.938 144.434Z" fill="#3F3D56"/>
<path id="Vector_53" d="M156.725 146.434L151.293 123.853C151.082 122.972 150.615 122.172 149.951 121.555C149.287 120.937 148.456 120.53 147.562 120.382L154.976 151.224C155.708 150.688 156.265 149.947 156.576 149.094C156.888 148.242 156.94 147.316 156.725 146.434Z" fill="white"/>
<path id="Vector_54" d="M137.185 129.497C137.035 128.869 136.753 128.28 136.359 127.768C135.596 129.746 135.455 131.909 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18L137.185 129.497Z" fill="#3F3D56"/>
</g>
</g>
<defs>
<clipPath id="clip0_3_67">
<rect width="600" height="522.608" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
could you please tell me guys how to fill this SVG?
<svg class="animationCounter2" width="80%" height="80%" viewBox="0 0 295 298" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M0 45.4119C27.6939 36.5087 55.7265 28.637 84.1171 22.1956C112.508 15.7834 141.208 10.7528 170.102 7.18185C198.996 3.64005 228.073 1.63562 257.161 0.740441C271.704 0.28312 286.258 0.0982462 300.801 0.0204044C308.068 -0.0282467 315.345 0.0204044 322.622 0.0593253C329.898 0.0982462 337.165 0.0982462 344.442 0.234469C373.529 0.555567 402.607 1.45075 431.675 2.80325C460.733 4.15575 489.772 5.99476 518.772 8.30082C547.773 10.6069 576.734 13.3897 605.647 16.5715C634.56 19.7436 663.425 23.3535 692.261 27.1483C721.097 30.9431 749.894 34.9616 778.71 38.8634C807.517 42.7458 836.333 46.5892 865.217 49.7321C879.654 51.3668 894.111 52.6998 908.587 53.9453C915.825 54.4805 923.063 55.1032 930.31 55.5119C933.929 55.7259 937.558 55.9984 941.177 56.1638L952.053 56.66C966.549 57.2925 981.054 57.3898 995.53 56.7768C1009.98 56.1054 1024.46 54.8307 1038.47 51.5906C1045.44 49.9267 1052.36 47.7666 1058.44 44.2637C1061.45 42.5123 1064.22 40.3522 1066.26 37.6958C1068.32 35.0492 1069.45 31.848 1069.44 28.53C1069.45 26.9245 1069.12 25.3676 1068.4 24.0249C1067.71 22.6821 1066.61 21.5631 1065.29 20.775C1062.64 19.1889 1059.14 19.0235 1056.19 20.162C1053.2 21.2809 1050.81 23.7135 1049.5 26.7201C1048.85 28.2186 1048.4 29.8435 1048.18 31.5269C1047.96 33.2005 1047.89 34.9616 1048.07 36.5671C1048.45 39.8462 1049.98 42.921 1052.17 45.5384C1054.35 48.1655 1057.12 50.3548 1060.09 52.2522C1066.06 56.0276 1072.8 58.6742 1079.64 60.7856C1083.07 61.8365 1086.54 62.722 1090.08 63.4809C1093.6 64.2788 1097.14 64.9891 1100.7 65.641C1107.81 66.9254 1114.98 67.8984 1122.17 68.5309C1150.95 71.1191 1180.28 67.9276 1207.74 58.645C1235.18 49.3526 1260.69 34.1929 1282 14.2752C1261.22 34.7476 1235.84 50.53 1208.31 60.2991C1194.54 65.174 1180.25 68.6282 1165.74 70.3894C1151.23 72.2089 1136.53 72.4425 1121.95 71.3137C1114.67 70.7494 1107.4 69.8347 1100.19 68.6087C1096.59 67.986 1092.99 67.2952 1089.42 66.5265C1085.84 65.787 1082.26 64.8821 1078.74 63.8215C1071.7 61.6808 1064.74 58.9953 1058.38 55.0059C1055.21 52.9917 1052.19 50.637 1049.68 47.6596C1047.18 44.7113 1045.28 41.0041 1044.8 36.9855C1044.57 34.9616 1044.65 33.035 1044.9 31.089C1045.15 29.143 1045.66 27.2066 1046.48 25.3676C1047.29 23.5286 1048.44 21.8064 1049.9 20.3663C1051.35 18.9262 1053.12 17.7878 1055.04 17.058C1058.86 15.5985 1063.34 15.7736 1066.99 17.9337C1068.8 19.0041 1070.36 20.5901 1071.33 22.4875C1072.33 24.3752 1072.76 26.5061 1072.75 28.5494C1072.75 30.5441 1072.41 32.568 1071.74 34.4654C1071.07 36.3725 1070.09 38.1337 1068.89 39.7002C1066.47 42.8334 1063.35 45.2076 1060.09 47.0952C1056.82 48.9926 1053.37 50.4521 1049.87 51.6782C1046.37 52.9139 1042.81 53.8772 1039.23 54.7237C1024.87 58.0028 1010.26 59.2288 995.684 59.8613C981.102 60.4354 966.51 60.2991 951.966 59.618C937.423 58.9855 922.898 58.032 908.384 56.8838C893.879 55.6481 879.393 54.315 864.937 52.6901C836.004 49.557 807.168 45.733 778.342 41.8604C749.526 37.9683 720.729 33.9692 691.903 30.2036C634.26 22.6334 576.502 15.9682 518.569 11.3172C489.608 8.98194 460.598 7.11374 431.578 5.74178C402.549 4.36008 373.51 3.43571 344.452 3.08542C337.185 2.93947 329.927 2.92974 322.66 2.89082L300.869 2.82271C286.335 2.82271 271.811 2.92974 257.296 3.30922C228.267 4.04872 199.257 5.90719 170.411 9.27385C141.556 12.5529 112.856 17.3013 84.4461 23.4216C55.9684 29.5127 27.8197 36.9077 0 45.4119Z" fill="white"/>
</svg>
.svg-path{
fill:transparent;
stroke:white;
stroke-miterlimit:10;
stroke-width:2px;
fill-rule:evenodd;
}
.draw2{
stroke-dasharray: 3000;
animation: 5s write2;
filter: drop-shadow(0px 1px 10px gray);
}
#keyframes write2 {
0% {
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 0;
}
}
When i set the fill to white; it looks good, but i almost cant see the animation, when i set the stroke-width to for example 5px, its too thick..
I am working with a fairly simple icon animation in a app built in VueJS.
I am using a Vue transition for the fade effect on the background elements, but wanted a simple shift up animation on the icon itself.
I have it working as I'd like on the upward shift, but is there anyway to reverse the transition when the _active class is removed?
All I'm looking to do is have the icon shift up and the background fade in on click and then shift back down to it's og position and background fade out.
I have a Codesandbox ready and the code below it
Codesandbox:
https://codesandbox.io/s/animated-icon-f96df?file=/src/components/HelloWorld.vue:0-8880
<template>
<div class="wrapper">
<div class="_isActiveOrNot">{{ active }}</div>
<div class="_icons">
<div #click="activate" class="_main">
<transition name="slide">
<div :class="[active ? '_active' : '', '_cast']">
<svg
class="_icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.6 9.9C7.26274 9.9 7.8 9.36273 7.8 8.7C7.8 8.03726 7.26274 7.5 6.6 7.5C5.93726 7.5 5.4 8.03726 5.4 8.7C5.4 9.36273 5.93726 9.9 6.6 9.9ZM6.6 12.3C8.58822 12.3 10.2 10.6882 10.2 8.7C10.2 6.71178 8.58822 5.1 6.6 5.1C4.61178 5.1 3 6.71178 3 8.7C3 10.6882 4.61178 12.3 6.6 12.3Z"
fill="#712EFF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.66011 13.2C5.66597 13.2 4.86006 14.0059 4.86006 15L4.86005 16.8C4.86005 17.4628 4.32279 18 3.66004 18C2.9973 18 2.46005 17.4628 2.46005 16.8L2.46006 15C2.46008 12.6804 4.3405 10.8 6.66011 10.8C8.97969 10.8 10.8601 12.6804 10.8601 15V15.6C10.8601 16.2628 10.3228 16.8 9.66008 16.8C8.99734 16.8 8.46008 16.2628 8.46008 15.6V15C8.46008 14.0059 7.6542 13.2 6.66011 13.2Z"
fill="#712EFF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.4001 9.9C16.7374 9.9 16.2001 9.36273 16.2001 8.7C16.2001 8.03726 16.7374 7.5 17.4001 7.5C18.0628 7.5 18.6001 8.03726 18.6001 8.7C18.6001 9.36273 18.0628 9.9 17.4001 9.9ZM17.4001 12.3C15.4118 12.3 13.8001 10.6882 13.8001 8.7C13.8001 6.71178 15.4118 5.1 17.4001 5.1C19.3883 5.1 21.0001 6.71178 21.0001 8.7C21.0001 10.6882 19.3883 12.3 17.4001 12.3Z"
fill="#712EFF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.34 13.2C18.3341 13.2 19.14 14.0059 19.14 15V16.8C19.14 17.4628 19.6772 18 20.34 18C21.0027 18 21.54 17.4628 21.54 16.8V15C21.54 12.6804 19.6596 10.8 17.34 10.8C15.0204 10.8 13.14 12.6804 13.14 15V15.6C13.14 16.2628 13.6772 16.8 14.34 16.8C15.0027 16.8 15.54 16.2628 15.54 15.6V15C15.54 14.0059 16.3459 13.2 17.34 13.2Z"
fill="#712EFF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.0601 16.5C11.066 16.5 10.2601 17.3059 10.2601 18.3L10.26 20.1C10.26 20.7628 9.72278 21.3 9.06003 21.3C8.3973 21.3 7.86005 20.7628 7.86005 20.1L7.86006 18.3C7.86007 15.9804 9.7405 14.1 12.0601 14.1C14.3797 14.1 16.2601 15.9804 16.2601 18.3V20.1C16.2601 20.7628 15.7229 21.3 15.0601 21.3C14.3973 21.3 13.8601 20.7628 13.8601 20.1V18.3C13.8601 17.3059 13.0542 16.5 12.0601 16.5Z"
fill="#712EFF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 13.2C12.6628 13.2 13.2 12.6628 13.2 12C13.2 11.3373 12.6628 10.8 12 10.8C11.3373 10.8 10.8 11.3373 10.8 12C10.8 12.6628 11.3373 13.2 12 13.2ZM12 15.6C13.9883 15.6 15.6 13.9883 15.6 12C15.6 10.0118 13.9883 8.4 12 8.4C10.0118 8.4 8.39999 10.0118 8.39999 12C8.39999 13.9883 10.0118 15.6 12 15.6Z"
fill="#712EFF"
/>
</svg>
</div>
</transition>
<transition name="fade" mode="out-in">
<div v-if="active" key="1" class="_circle">
<svg
class="_icon"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="40" height="40" rx="20" fill="#F9F9FF" />
</svg>
</div>
</transition>
<transition name="fade" mode="out-in">
<div v-if="active" key="2" class="_text">
<svg
class="_icon"
width="30"
height="12"
viewBox="0 0 30 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.99159 10.146C8.87959 10.2393 8.66959 10.3653 8.36159 10.524C8.06293 10.6827 7.69426 10.8227 7.25559 10.944C6.81693 11.0653 6.33159 11.1213 5.79959 11.112C4.98759 11.0933 4.25959 10.9487 3.61559 10.678C2.98093 10.398 2.43959 10.02 1.99159 9.544C1.55293 9.068 1.21693 8.522 0.983594 7.906C0.75026 7.29 0.633594 6.632 0.633594 5.932C0.633594 4.88667 0.843594 3.96267 1.26359 3.16C1.68359 2.35733 2.26693 1.72733 3.01359 1.27C3.76959 0.812666 4.64693 0.584 5.64559 0.584C6.33626 0.584 6.94759 0.677333 7.47959 0.863999C8.01159 1.05067 8.44559 1.25133 8.78159 1.466L7.98359 3.384C7.75026 3.20667 7.43759 3.02467 7.04559 2.838C6.66293 2.642 6.21959 2.544 5.71559 2.544C5.19293 2.544 4.70293 2.68867 4.24559 2.978C3.79759 3.26733 3.43359 3.65933 3.15359 4.154C2.88293 4.63933 2.74759 5.19467 2.74759 5.82C2.74759 6.48267 2.87359 7.066 3.12559 7.57C3.37759 8.06467 3.73693 8.452 4.20359 8.732C4.67026 9.012 5.21626 9.152 5.84159 9.152C6.39226 9.152 6.86359 9.06333 7.25559 8.886C7.64759 8.70867 7.94626 8.522 8.15159 8.326L8.99159 10.146ZM13.2793 11.168C12.71 11.168 12.192 11.056 11.7253 10.832C11.268 10.5987 10.904 10.244 10.6333 9.768C10.3626 9.292 10.2273 8.68533 10.2273 7.948C10.2273 7.25733 10.3673 6.66 10.6473 6.156C10.9273 5.652 11.296 5.26467 11.7533 4.994C12.2106 4.714 12.696 4.574 13.2093 4.574C13.816 4.574 14.2733 4.672 14.5813 4.868C14.8986 5.064 15.1506 5.27867 15.3373 5.512L15.4633 4.882H17.2833V11H15.3233V10.244C15.23 10.3373 15.09 10.4587 14.9033 10.608C14.726 10.7573 14.502 10.888 14.2313 11C13.9606 11.112 13.6433 11.168 13.2793 11.168ZM13.8393 9.572C14.5206 9.572 15.0153 9.264 15.3233 8.648V7.15C15.2113 6.85133 15.0153 6.61333 14.7353 6.436C14.4646 6.25867 14.1426 6.17 13.7693 6.17C13.3493 6.17 12.9853 6.32867 12.6773 6.646C12.3693 6.954 12.2153 7.35533 12.2153 7.85C12.2153 8.17667 12.29 8.47067 12.4393 8.732C12.5886 8.99333 12.7846 9.19867 13.0273 9.348C13.2793 9.49733 13.55 9.572 13.8393 9.572ZM21.2909 11.126C20.7869 11.126 20.3156 11.0373 19.8769 10.86C19.4476 10.6827 19.0836 10.4353 18.7849 10.118L19.5969 9.04C19.8956 9.31067 20.1709 9.50667 20.4229 9.628C20.6843 9.74 20.9176 9.796 21.1229 9.796C21.3656 9.796 21.5663 9.75867 21.7249 9.684C21.8836 9.60933 21.9629 9.488 21.9629 9.32C21.9629 9.16133 21.8976 9.03533 21.7669 8.942C21.6456 8.84867 21.4869 8.774 21.2909 8.718C21.0949 8.65267 20.8849 8.58733 20.6609 8.522C20.1009 8.34467 19.6949 8.088 19.4429 7.752C19.2003 7.40667 19.0789 7.03333 19.0789 6.632C19.0789 6.324 19.1583 6.016 19.3169 5.708C19.4849 5.39067 19.7463 5.12933 20.1009 4.924C20.4649 4.70933 20.9316 4.602 21.5009 4.602C22.0143 4.602 22.4483 4.65333 22.8029 4.756C23.1576 4.85867 23.4936 5.02667 23.8109 5.26L23.0689 6.408C22.8916 6.268 22.6909 6.15133 22.4669 6.058C22.2523 5.95533 22.0516 5.89933 21.8649 5.89C21.6129 5.88067 21.4169 5.92733 21.2769 6.03C21.1369 6.12333 21.0669 6.23533 21.0669 6.366C21.0576 6.54333 21.1229 6.68333 21.2629 6.786C21.4123 6.88867 21.5989 6.968 21.8229 7.024C22.0469 7.08 22.2663 7.14533 22.4809 7.22C22.9196 7.36933 23.2696 7.584 23.5309 7.864C23.7923 8.13467 23.9229 8.49867 23.9229 8.956C23.9229 9.32933 23.8249 9.684 23.6289 10.02C23.4423 10.3467 23.1529 10.6127 22.7609 10.818C22.3783 11.0233 21.8883 11.126 21.2909 11.126ZM26.1386 2.194H28.0986V4.854H29.5826V6.38H28.0986V11H26.1386V6.38H25.1866V4.854H26.1386V2.194Z"
fill="#1A0050"
/>
</svg>
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
active: false,
};
},
computed: {},
methods: {
activate() {
this.active = !this.active;
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
display: flex
flex-direction: column
justify-content: center
align-items: center
height: 100vh
background-color: #d4caff
._isActiveOrNot
margin-bottom: 50px
font-weight: bold
color: purple
._icons
display: flex
justify-content: space-around
align-items: flex-end
width: 100%
._icon
cursor: pointer
transform: scale(2)
._main
position: relative
display: flex
flex-direction: column
justify-content: center
align-items: center
min-height: 124px
._circle
position: absolute
top: 20px
z-index: 1
._cast
z-index: 2
._text
position: absolute
bottom: 0
z-index: 2
._active
transition: all .5s ease-in-out
transform: translateY(-20px)
.fade-enter-active, .fade-leave-active
transition: opacity .8s ease-in-out
.fade-enter, .fade-leave-to
opacity: 0
</style>
Yes, CSS has this functionality built in - you just need to have the transition property persist on the element's base styles, so that it applies regardless of whether the modifier class is added/removed.
For example:
.sliding-box {
transition: transform .5s;
background: green;
height: 5em;
width: 5em;
}
.sliding-box.active {
transform: translateX(5em);
}
<div class="sliding-box"></div>
<br>
<button
onclick="document
.getElementsByClassName('sliding-box')[0]
.classList.toggle('active')">
Toggle Slide</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
i want the bottom right animated thing to be animated like translatedX 0 to translatedX 20px then come back to -20px then to up with translateY -10px straight then come down to translateY 0px straight and then get back to translateX 0px. but it is not heppening whtn it is going up and down diagonally.
codesendbox: https://codesandbox.io/s/svg-animation-ch1vz?file=/index.html:602-930
Try using this:
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
Working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#stob1 {
animation: leftStob 6s linear infinite;
transform-origin: 10% 70%;
transform-box: fill-box;
}
#stob2 {
}
#like1 {
}
#like2 {
}
#love1 {
}
#love2 {
}
#love3 {
}
/* #pata1 {
animation: pata 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
i want the bottom right animated thing to be animated like translatedX
0 to translatedX 20px then come back to -20px then to up with translateY
-10px straight then come down to translateY 0px straight and then get back to translateX 0px.
but it is not heppening whtn it is going up and down diagonaly.
} */
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
#keyframes pata {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(5deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(-5deg);
}
100% {
transform: rotateZ(0deg);
}
}
</style>
</head>
<body>
<div id="wrapper">
<svg
width="646"
height="479"
viewBox="0 0 646 479"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_Social_life_re_x7t5 1" clip-path="url(#clip0)">
<g id="stob2">
<path
id="Vector"
d="M39.8701 476.965C39.8701 467.152 43.7683 457.741 50.7071 450.802C57.646 443.863 67.0571 439.965 76.8701 439.965C86.6831 439.965 96.0942 443.863 103.033 450.802C109.972 457.741 113.87 467.152 113.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="stob1">
<path
id="Vector_2"
d="M153.87 476.965C153.87 467.152 157.768 457.741 164.707 450.802C171.646 443.863 181.057 439.965 190.87 439.965C200.683 439.965 210.094 443.863 217.033 450.802C223.972 457.741 227.87 467.152 227.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="like2">
<path
id="Vector_3"
d="M230.87 144.402C227.903 144.402 225.003 145.282 222.537 146.93C220.07 148.578 218.147 150.921 217.012 153.662C215.877 156.402 215.58 159.418 216.158 162.328C216.737 165.238 218.166 167.911 220.264 170.008C222.361 172.106 225.034 173.535 227.944 174.114C230.853 174.692 233.869 174.395 236.61 173.26C239.351 172.125 241.694 170.202 243.342 167.735C244.99 165.269 245.87 162.369 245.87 159.402C245.87 155.424 244.29 151.608 241.477 148.795C238.664 145.982 234.848 144.402 230.87 144.402V144.402ZM227.279 165.951C227.279 166.063 227.234 166.171 227.155 166.25C227.076 166.329 226.968 166.374 226.856 166.374H223.476C223.364 166.374 223.256 166.329 223.177 166.25C223.098 166.171 223.053 166.063 223.053 165.951V157.923C223.053 157.811 223.098 157.703 223.177 157.624C223.256 157.545 223.364 157.5 223.476 157.5H226.856C226.968 157.5 227.076 157.545 227.155 157.624C227.234 157.703 227.279 157.811 227.279 157.923V165.951ZM238.687 159.613C238.687 159.949 238.553 160.272 238.316 160.509C238.078 160.747 237.756 160.881 237.419 160.881V160.902C237.658 160.951 237.872 161.08 238.026 161.269C238.18 161.458 238.264 161.694 238.264 161.937C238.264 162.181 238.18 162.417 238.026 162.605C237.872 162.794 237.658 162.923 237.419 162.972V163.416C237.644 163.416 237.858 163.505 238.017 163.663C238.175 163.822 238.264 164.037 238.264 164.261C238.264 164.485 238.175 164.7 238.017 164.859C237.858 165.017 237.644 165.106 237.419 165.106H228.969C228.857 165.106 228.749 165.062 228.67 164.982C228.591 164.903 228.546 164.796 228.546 164.684V157.923C228.546 155.81 231.926 152.852 231.926 152.852V151.822C231.926 151.509 232.041 151.207 232.249 150.972C232.456 150.738 232.743 150.588 233.054 150.551C233.365 150.514 233.679 150.593 233.936 150.772C234.193 150.951 234.375 151.218 234.448 151.522L234.462 151.585C234.626 153.074 234.263 154.573 233.435 155.822H236.036C236.075 155.818 236.112 155.81 236.152 155.81H237.419C237.083 156.483 237.028 157.261 237.266 157.974C237.503 158.687 238.015 159.277 238.687 159.613V159.613Z"
fill="#5E90FF"
/>
</g>
<g id="like1">
<path
id="Vector_4"
d="M252.87 51.4018C248.717 51.4018 244.657 52.6334 241.203 54.9409C237.75 57.2484 235.058 60.5282 233.469 64.3654C231.879 68.2027 231.463 72.4251 232.274 76.4987C233.084 80.5723 235.084 84.3141 238.021 87.251C240.958 90.1879 244.7 92.188 248.773 92.9983C252.847 93.8086 257.069 93.3927 260.906 91.8033C264.744 90.2138 268.023 87.5222 270.331 84.0688C272.638 80.6153 273.87 76.5552 273.87 72.4018C273.87 66.8322 271.658 61.4908 267.719 57.5526C263.781 53.6143 258.44 51.4018 252.87 51.4018ZM247.842 81.5708C247.842 81.7277 247.78 81.8781 247.669 81.9891C247.558 82.1 247.407 82.1623 247.25 82.1623H242.518C242.361 82.1623 242.211 82.1 242.1 81.9891C241.989 81.8781 241.926 81.7277 241.926 81.5708V70.3314C241.926 70.1745 241.989 70.024 242.1 69.9131C242.211 69.8021 242.361 69.7398 242.518 69.7398H247.25C247.407 69.7398 247.558 69.8021 247.669 69.9131C247.78 70.024 247.842 70.1745 247.842 70.3314V81.5708ZM263.814 72.6975C263.814 73.1682 263.627 73.6196 263.294 73.9524C262.961 74.2852 262.51 74.4722 262.039 74.4722V74.502C262.373 74.5702 262.673 74.7517 262.889 75.0157C263.104 75.2798 263.222 75.6102 263.222 75.9511C263.222 76.292 263.104 76.6224 262.889 76.8864C262.673 77.1505 262.373 77.3319 262.039 77.4001V78.0215C262.353 78.0215 262.654 78.1461 262.876 78.368C263.098 78.5899 263.222 78.8908 263.222 79.2046C263.222 79.5184 263.098 79.8193 262.876 80.0412C262.654 80.263 262.353 80.3877 262.039 80.3877H250.208C250.051 80.3877 249.901 80.3254 249.79 80.2144C249.679 80.1035 249.617 79.953 249.617 79.7961V70.3314C249.617 67.3736 254.349 63.2328 254.349 63.2328V61.7906C254.348 61.3521 254.509 60.9287 254.8 60.6006C255.091 60.2726 255.492 60.0627 255.928 60.0109C256.363 59.9591 256.802 60.069 257.162 60.3196C257.522 60.5702 257.777 60.9442 257.88 61.3706C257.886 61.3994 257.892 61.4286 257.898 61.4581C258.49 64.4159 256.461 67.3899 256.461 67.3899H260.103C260.157 67.385 260.209 67.3736 260.264 67.3736H262.039C262.51 67.3736 262.961 67.5606 263.294 67.8934C263.627 68.2262 263.814 68.6776 263.814 69.1483C263.814 69.6189 263.627 70.0703 263.294 70.4031C262.961 70.7359 262.51 70.9229 262.039 70.9229C262.51 70.9229 262.961 71.1099 263.294 71.4427C263.627 71.7755 263.814 72.2269 263.814 72.6975Z"
fill="#5E90FF"
/>
</g>
<g id="mobile">
<path
id="Vector_5"
d="M258.702 209.928L282.994 227.126C283.305 227.352 283.68 227.474 284.064 227.474C284.449 227.474 284.824 227.352 285.135 227.126L291.699 222.198C291.917 222.038 292.097 221.831 292.224 221.593C292.351 221.354 292.423 221.09 292.435 220.82C292.446 220.55 292.396 220.281 292.289 220.033C292.182 219.784 292.021 219.563 291.817 219.386L273.124 202.717C272.879 202.503 272.581 202.357 272.26 202.295C271.94 202.233 271.609 202.257 271.301 202.364L259.138 206.717C258.825 206.832 258.55 207.03 258.342 207.29C258.133 207.55 258 207.862 257.955 208.192C257.91 208.522 257.956 208.858 258.088 209.164C258.219 209.469 258.432 209.734 258.702 209.928H258.702Z"
fill="#3F3D56"
/>
<path
id="Vector_6"
d="M260.91 208.601L282.802 224.1C282.911 224.183 283.045 224.229 283.183 224.23C283.32 224.231 283.455 224.188 283.566 224.107L289.47 219.675C289.537 219.627 289.594 219.566 289.638 219.496C289.682 219.426 289.711 219.347 289.725 219.266C289.738 219.184 289.735 219.101 289.716 219.02C289.697 218.94 289.663 218.864 289.614 218.797C289.587 218.76 289.556 218.727 289.522 218.697L272.662 203.662C272.574 203.587 272.468 203.536 272.354 203.515C272.24 203.494 272.123 203.503 272.014 203.542L261.058 207.462C260.948 207.504 260.852 207.576 260.779 207.668C260.707 207.761 260.66 207.871 260.645 207.988C260.63 208.104 260.647 208.223 260.693 208.331C260.74 208.439 260.815 208.533 260.91 208.602V208.601Z"
fill="white"
/>
</g>
<g id="body">
<path
id="Vector_7"
d="M299.623 297.6C301.153 297.244 302.586 296.558 303.822 295.589C305.057 294.62 306.066 293.391 306.776 291.991C307.485 290.59 307.879 289.05 307.93 287.48C307.98 285.911 307.686 284.349 307.067 282.905L346.67 193.433L324.015 187.727L292.211 277.47C289.855 278.669 288.02 280.692 287.055 283.153C286.09 285.615 286.062 288.345 286.976 290.827C287.889 293.308 289.681 295.368 292.012 296.616C294.343 297.865 297.051 298.215 299.623 297.6V297.6Z"
fill="#A0616A"
/>
<path
id="Vector_8"
d="M335.309 221.435L313.275 211.121C312.648 210.828 312.092 210.403 311.644 209.875C311.196 209.347 310.868 208.729 310.68 208.062C310.493 207.396 310.451 206.697 310.558 206.013C310.666 205.329 310.919 204.677 311.301 204.1L324.691 183.877C326.212 180.68 328.938 178.216 332.272 177.026C335.606 175.835 339.276 176.014 342.478 177.525C345.68 179.035 348.153 181.753 349.354 185.083C350.556 188.413 350.389 192.083 348.889 195.29L341.965 218.453C341.767 219.116 341.428 219.729 340.971 220.249C340.515 220.769 339.951 221.185 339.32 221.468C338.688 221.751 338.003 221.895 337.31 221.889C336.618 221.883 335.935 221.728 335.309 221.435H335.309Z"
fill="#FF63E5"
/>
<path
id="Vector_9"
d="M347.236 466.333L334.976 466.332L329.144 419.044L347.238 419.045L347.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_10"
d="M350.363 478.217L310.832 478.216V477.716C310.832 475.695 311.23 473.694 312.003 471.828C312.776 469.961 313.91 468.265 315.339 466.836C316.767 465.407 318.464 464.274 320.33 463.501C322.197 462.727 324.198 462.329 326.219 462.329H326.22L350.363 462.33L350.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_11"
d="M388.236 466.333L375.976 466.332L370.144 419.044L388.238 419.045L388.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_12"
d="M391.363 478.217L351.832 478.216V477.716C351.832 475.695 352.23 473.694 353.003 471.828C353.776 469.961 354.91 468.265 356.339 466.836C357.767 465.407 359.464 464.274 361.33 463.501C363.197 462.727 365.198 462.329 367.219 462.329H367.22L391.363 462.33L391.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_13"
d="M387.675 453.178C387.564 453.178 387.453 453.174 387.342 453.166L373.243 452.122C372.277 452.046 371.361 451.662 370.629 451.027C369.897 450.391 369.389 449.538 369.178 448.592L344.698 314.22C344.617 313.848 344.398 313.521 344.086 313.305C343.773 313.089 343.39 313 343.014 313.055C342.637 313.111 342.296 313.307 342.06 313.604C341.823 313.902 341.708 314.278 341.737 314.657L350.43 447.05C350.478 447.668 350.398 448.291 350.195 448.877C349.992 449.463 349.669 450.001 349.248 450.457C348.827 450.913 348.315 451.277 347.747 451.525C347.178 451.774 346.564 451.902 345.944 451.902H335.208C334.302 451.903 333.418 451.63 332.67 451.119C331.922 450.609 331.345 449.885 331.015 449.042C304.015 378.336 313.792 239.795 313.87 238.402L314.87 237.402L368.648 246.687L368.762 246.798C387.136 260.294 395.088 418.348 392.167 448.414C392.148 449.691 391.677 450.92 390.837 451.882C389.994 452.712 388.858 453.178 387.675 453.178V453.178Z"
fill="#2F2E41"
/>
<path
id="Vector_14"
d="M376.404 269.505C376.154 269.505 375.904 269.48 375.659 269.43L312.581 261.336C310.323 260.88 308.711 258.47 308.833 255.728L314.87 222.402C306.87 212.402 314.429 186.576 319.318 180.046L317.427 174.93C316.94 173.602 316.91 172.149 317.343 170.801C317.715 169.533 318.567 168.46 319.719 167.812L345.318 154.21C347.588 153.004 350.25 154.239 351.256 156.959L356.276 170.545L356.199 170.585C368.219 177.028 378.87 183.402 370.87 217.402L380.9 264.358C380.866 265.839 380.27 267.251 379.231 268.307C378.481 269.06 377.467 269.49 376.404 269.505Z"
fill="#FF63E5"
/>
<path
id="Vector_15"
d="M287.403 214.455C287.806 214.834 288.179 215.244 288.517 215.682L337.993 212.263L343.3 201.448L360.67 207.324L353.135 227.385C352.526 229.005 351.408 230.385 349.949 231.316C348.489 232.247 346.767 232.68 345.041 232.549L288.781 228.282C287.535 230.012 285.793 231.322 283.785 232.037C281.777 232.752 279.598 232.84 277.54 232.287C275.481 231.734 273.639 230.567 272.26 228.942C270.88 227.317 270.028 225.311 269.817 223.189C269.605 221.068 270.045 218.933 271.077 217.068C272.108 215.202 273.684 213.696 275.593 212.747C277.502 211.799 279.655 211.455 281.764 211.76C283.874 212.065 285.841 213.005 287.403 214.455V214.455Z"
fill="#A0616A"
/>
<path
id="Vector_16"
d="M337.099 209.879C336.853 209.281 336.739 208.637 336.764 207.991C336.789 207.344 336.953 206.711 337.245 206.134L347.448 185.985C348.493 182.846 350.739 180.249 353.696 178.764C356.652 177.279 360.077 177.027 363.219 178.062C366.36 179.098 368.964 181.338 370.457 184.29C371.951 187.242 372.213 190.665 371.186 193.81L367.256 216.126C367.144 216.763 366.896 217.368 366.529 217.9C366.162 218.432 365.684 218.879 365.129 219.21C364.573 219.542 363.953 219.749 363.31 219.819C362.667 219.889 362.017 219.819 361.403 219.615L339.839 212.436C339.226 212.232 338.663 211.898 338.19 211.456C337.717 211.015 337.345 210.477 337.099 209.879Z"
fill="#FF63E5"
/>
</g>
<g id="love3">
<path
id="Vector_17"
d="M262.48 196.17C262.277 196.36 262.01 196.465 261.732 196.465C261.455 196.465 261.188 196.36 260.985 196.17L260.411 195.651C255.713 191.341 253 188.54 253 185.049C253 182.201 254.802 180 257.628 180C258.412 180.004 259.184 180.179 259.893 180.512C260.602 180.844 261.23 181.327 261.734 181.927C262.237 181.327 262.865 180.845 263.573 180.512C264.281 180.179 265.054 180.005 265.836 180C268.666 180 270.465 182.194 270.465 185.049C270.465 188.533 267.752 191.334 263.054 195.651L262.48 196.17Z"
fill="#FF6584"
/>
</g>
<g id="love2">
<path
id="Vector_18"
d="M225.57 133.698C225.181 134.061 224.669 134.262 224.138 134.262C223.606 134.262 223.094 134.061 222.705 133.698L221.605 132.704C212.603 124.444 207.406 119.078 207.406 112.388C207.406 106.931 210.859 102.714 216.274 102.714C217.775 102.722 219.255 103.057 220.614 103.694C221.972 104.332 223.176 105.257 224.141 106.406C225.105 105.257 226.308 104.332 227.665 103.695C229.022 103.057 230.502 102.722 232.001 102.714C237.423 102.714 240.87 106.917 240.87 112.388C240.87 119.064 235.672 124.43 226.67 132.704L225.57 133.698Z"
fill="#FF6584"
/>
</g>
<g id="love1">
<path
id="Vector_19"
d="M226.999 40.2437C226.493 40.7144 225.828 40.9762 225.138 40.9762C224.447 40.9762 223.782 40.7144 223.277 40.2437L221.849 38.9517C210.157 28.2243 203.406 21.2547 203.406 12.5654C203.406 5.47747 207.891 3.05176e-05 214.924 3.05176e-05C216.873 0.0111436 218.797 0.445725 220.561 1.27367C222.325 2.10161 223.888 3.30314 225.142 4.79504C226.395 3.30336 227.956 2.10188 229.719 1.2739C231.482 0.445914 233.404 0.0112366 235.351 3.05176e-05C242.394 3.05176e-05 246.87 5.45928 246.87 12.5654C246.87 21.2365 240.119 28.2061 228.427 38.9517L226.999 40.2437Z"
fill="#FF6584"
/>
</g>
<g id="floor">
<path
id="Vector_20"
d="M645 478.402H1C0.734784 478.402 0.480444 478.296 0.292908 478.109C0.105371 477.921 0 477.667 0 477.402C0 477.137 0.105371 476.882 0.292908 476.695C0.480444 476.507 0.734784 476.402 1 476.402H645C645.265 476.402 645.52 476.507 645.707 476.695C645.895 476.882 646 477.137 646 477.402C646 477.667 645.895 477.921 645.707 478.109C645.52 478.296 645.265 478.402 645 478.402Z"
fill="#CCCCCC"
/>
</g>
<g id="head">
<path
id="Vector_21"
d="M320.074 156.357C333.639 156.357 344.635 145.361 344.635 131.796C344.635 118.231 333.639 107.235 320.074 107.235C306.509 107.235 295.513 118.231 295.513 131.796C295.513 145.361 306.509 156.357 320.074 156.357Z"
fill="#A0616A"
/>
<path
id="Vector_22"
d="M333.87 112.402C344.916 112.402 353.87 103.447 353.87 92.4018C353.87 81.3561 344.916 72.4018 333.87 72.4018C322.824 72.4018 313.87 81.3561 313.87 92.4018C313.87 103.447 322.824 112.402 333.87 112.402Z"
fill="#352404"
/>
<path
id="Vector_23"
d="M296.823 134.833C294.869 135.039 292.792 135.225 291.034 134.347C290.093 133.814 289.292 133.066 288.695 132.165C288.098 131.264 287.721 130.235 287.596 129.161C283.87 104.402 304.923 106.438 307.414 105.366C309.088 104.645 310.321 103.194 311.817 102.153C315.089 99.8756 319.334 99.7091 323.32 99.6232C328.051 99.5211 332.954 99.4509 337.297 101.332C341.202 103.162 344.447 106.153 346.588 109.896C348.707 113.623 350.259 117.645 351.195 121.829C352.399 126.616 353.218 131.68 351.978 136.457C350.955 140.089 348.823 143.31 345.878 145.669C342.934 148.029 339.326 149.408 335.559 149.616C337.175 143.909 333.648 137.583 328.416 134.79C324.194 132.714 319.39 132.142 314.799 133.169C311.821 133.772 308.802 134.148 305.767 134.294C302.789 134.405 299.214 134.58 296.823 134.833Z"
fill="#352404"
/>
</g>
<g id="pata1">
<path
id="Vector_24"
d="M616.896 203.791C616.896 155.527 577.745 41 529.448 41C481.152 41 442 155.527 442 203.791C442.018 226.972 451.239 249.198 467.636 265.583C484.034 281.969 506.267 291.173 529.448 291.173C552.63 291.173 574.862 281.969 591.26 265.583C607.658 249.198 616.879 226.972 616.896 203.791V203.791Z"
fill="#46BB0F"
/>
</g>
<g id="wood">
<path
id="Vector_25"
d="M530.164 477.402C529.898 477.402 529.644 477.296 529.456 477.109C529.269 476.921 529.164 476.667 529.164 476.402V200.261C529.164 199.996 529.269 199.742 529.456 199.554C529.644 199.367 529.898 199.261 530.164 199.261C530.429 199.261 530.683 199.367 530.871 199.554C531.058 199.742 531.164 199.996 531.164 200.261V476.402C531.163 476.667 531.058 476.921 530.871 477.109C530.683 477.296 530.429 477.402 530.164 477.402V477.402Z"
fill="#CAC0C0"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="646" height="478.402" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>
I have two svgs with different viewports. I use vector-effect: non-scaling-stroke to make stroke-width the same for both svgs.
The problem is that when I use vector-effect: non-scaling-stroke, duration of css transition doesn't work.
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
Example with working animation without vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
/* vector-effect: non-scaling-stroke; */
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
Animation doesn't work with vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
vector-effect: non-scaling-stroke;
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
I think the problem here doesn't lie with the transition duration. If, for example, you change the timing function from cubic-bezier() to linear you'll see that the duration value is honoured in both states. The issue therefore may lie with the bezier-values for the un/toggled state of #pause > #circleStroke.
Adding a CSS transition to #circleStroke.play may be one way of addressing this, and while something like this...
...
#circleStroke {
transition: all 800ms cubic-bezier(0, 0.25, 0.01, 0.99);
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
transition: all 800ms cubic-bezier(0.99, 0.01, 0.25, 0);
stroke-dashoffset: 0;
}
...
... may be a little extreme it does show that each state of #pause > #circleStroke can operate to it's own transition timing function.
I generally prefer to do this sort of thing with CSS animate rather than transitions - something I picked up a while back from Jake Archbald's blog here.
Additionally, you can also use Element.classList.toggle('class') for your state-changing function...
document.getElementById("pause").addEventListener("click", function( event ) {
document.getElementById("circleStroke").classList.toggle('play');
}, false);
... Not part of the question I know, but a little tidier nonetheless.
Hoped that helps :)