Show Percentage in SVG Graphic - javascript

I am trying to show current vaccination-data from a CSV-File provided by local authorities as a progress-bar in style of a syringe.
Depending on the percentage of vaccinated people, the bar should show a part of the syringe-icon in a different color.
I already found this awesome project: https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/
But when trying to add the following code as icon, nothing happens.
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16"><path fill="currentColor" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" class=""></path></svg>
What am i doing wrong?


Easier done with a green path-stroke and pathLength=100
A stroke-dasharray="78 100" then sets percentage
svg {
width: 150px;
}
<script>
function updatePercentage(v = 50) {
document.querySelector("#ceringe").setAttribute("stroke-dasharray", v + " 100");
}
</script>
<input type="range" min="0" max="100" oninput="updatePercentage(this.value)">
<br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path id="ceringe" stroke-dasharray="50 100" pathLength="100" d="M108 403L380 132"
stroke="green" stroke-width="130" />
<path fill="black" d="M510 82 431 2C428-1 423-1 420 2L409 13C406 16 406 21 409 24L437
52 392 97 335 40 318 23C315 20 310 20 307 23L296 34C293 37 293 42 296 45L313 62 85 292
C68 309 59 333 62 357L69 421 2 487C-1 490-1 495 2 498L13 509C16 512 21 512 24 509
L90 443 154 450C178 453 202 445 219 427L446 200 463 217C466 220 471 220 474 217L487 206
C490 203 490 198 487 195L413 121 458 76 486 104C489 107 494 107 497 104L508 93
C511 90 511 85 508 82ZM425 178 198 405C188 415 173 420 159 419L107 402 93 353
C91 338 96 324 107 314L131 290 171 330C174 333 179 333 182 330L193 319C196 316 196
311 193 308L153 268 198 223 238 263C241 266 246 266 249 263L260 252C263 249 263 244
260 241L220 201 265 156 305 196C308 199 313 199 316 196L327 185C330 182 330 177 327
174L289 132 334 87 425 178Z"/>
</svg>


I would recommend adding a clipping mask and then altering the width of the clipping mask with JS based on the values in the CSV file.
This example shows have the icon in green and the full icon in black. If you change 0.5512 to 0.1512, it would be 10% full, etc.
let clipping = document.getElementById("clipping-rectangle")
clipping.width.baseVal.value = 0.5 * 512;
#container {
margin: 20px;
width: 200px;
height: 200px;
}
<div id="container">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16">
<defs>
<clipPath id="clipping">
<rect x="0" y="0" width="800" height="512" id="clipping-rectangle"/>
</clipPath>
</defs>
<path fill="black" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path"/>
<path fill="green" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path-green" clip-path="url(#clipping)"/></svg>
</div>

Related

react svg on hover not changing color

I am trying to make it so when you hover over the div containing an svg, that the svg changes color.
I have a total of 4 svg icons, and 3 of them work, but the second to last svg, for some reason, when I hover over it, does not change color, is it because my svg (below) is made up of multiple elements?
{/* toggle open projects tab */}
<a className="sidebarIcon" href="#">
<svg
className="sidebarSvg"
width="50px"
height="50px"
version="1.0"
viewBox="0 0 168.000000 149.000000"
>
<g
transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
fill="#818181"
stroke="none"
>
<path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
<path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
</g>
</svg>
</a>
Code sandbox link:
https://codesandbox.io/s/cranky-hooks-8hdktn?file=/src/App.js:182-193

remove the fill="#818181remove the fill="#818181remove the fill="#818181remove the fill="#818181

SVG Icon getting distorted against transparent background

I am trying to display an svg icon against transparent background, however, when the transparent background is applied the svg looks like this:
ideally, I am expecting the svg icon to look like the first svg icon. One important thing to note here is that the background will dynamically be applied.
Here is the svg code:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='white'
opacity={0.8}
></path>

The posted image with the transparent background looks like the checkered background in Photoshop. Not a real life situation.
However you are mentioning that The background is dynamic. It can be changed to any color. and this is a problem since your icon is white.
Here is a what you can do: you can use an outline filter around your icon. This way it will be visible on every background.
As an observation: 16px width and height is way too small. I would recomend at least 24px.
svg{border:solid}
<svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none">
<filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius=".5"/>
<feComposite in="SourceGraphic"/>
</filter>
<path id="globe" filter="url(#outline)"
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='white'
opacity="0.8"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none" style="background:black;">
<use xlink:href="#globe" filter="url(#outline)" fill='white'opac ity="0.8"></use>
</svg>

get rid of the fill="none" inside svg tag, if you want background dynamically applied.
also you could look closer to your svg on https://yqnn.github.io/svg-path-editor/
I changed it a bit
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.1 0.1 16 16">
<path d="M 8 0.5 C 12.1 0.5 15.5 3.9 15.5 8 C 15.5 12.1 12.1 15.5 8 15.5 C 3.9 15.5 0.5 12.1 0.5 8 C 0.5 3.9 3.9 0.5 8 0.5 Z M 10.2 11.4 H 5.8 C 6.3 13.2 7.1 14.4 8 14.4 C 8.9 14.4 9.7 13.2 10.2 11.4 H 10.2 Z M 4.6 11.4 H 2.6 C 3.3 12.5 4.4 13.4 5.7 13.9 C 5.3 13.3 4.9 12.5 4.7 11.7 L 4.6 11.4 L 4.6 11.4 Z M 13.4 11.4 H 11.4 C 11.1 12.4 10.8 13.3 10.3 13.9 C 11.5 13.5 12.6 12.6 13.3 11.6 L 13.4 11.4 V 11.4 Z M 4.3 6.5 H 1.8 L 1.8 6.5 C 1.7 7 1.6 7.5 1.6 8 C 1.6 8.8 1.8 9.6 2 10.3 H 4.4 C 4.2 9 4.2 7.7 4.3 6.5 L 4.3 6.5 Z M 10.5 6.5 H 5.5 C 5.3 7.7 5.4 9 5.6 10.3 H 10.4 C 10.6 9 10.7 7.7 10.5 6.5 Z M 14.2 6.5 H 11.7 C 11.7 7 11.8 7.5 11.8 8 C 11.8 8.8 11.7 9.5 11.6 10.3 H 14 C 14.2 9.5 14.4 8.8 14.4 8 C 14.4 7.5 14.3 7 14.2 6.5 Z M 5.7 2.1 L 5.6 2.1 C 4.1 2.7 2.9 3.9 2.2 5.4 H 4.5 C 4.7 4.1 5.1 2.9 5.7 2.1 H 5.7 Z M 8 1.6 L 7.9 1.6 C 7 1.7 6 3.2 5.6 5.4 H 10.4 C 10 3.2 9 1.7 8.1 1.6 L 8 1.6 V 1.6 Z M 10.3 2.1 L 10.4 2.2 C 10.9 3 11.3 4.1 11.5 5.4 H 13.8 C 13.2 3.9 12 2.8 10.6 2.2 L 10.3 2.1 V 2.1 Z" fill="#fff"/>
</svg>
transparent globe svg inside my button
it looks exactly as you wanted

At this scale, a shape that uses fill rather than just stroke to define the shape could give you problems because anti-aliasing might just give up.
If you don't want to recreate the shape using single strokes, then at least make it bigger and add a stroke-linejoin/round- because the shape itself isn't particularly well drawn.
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16">
<path
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='grey'
opacity='0.8'
stroke="none"
stroke-linejoin="round"
></path>
</svg>

How can I animate SVG text to be "written out"

I'm trying to animate an svg as if it's being written out, like this example on Codepen.
I'm trying to understand how to do this by comparing svg elements but so far I'm not seeing much difference. I replaced the svg in the codepen with my own but it wouldn't work. Why is this? And how could I make my own SVG's (such as the one below) animate in the same fashion as on the Codepen? (Besides replacing the path id!)
<svg xmlns="http://www.w3.org/2000/svg" width="417.773" height="224.047" viewBox="0 0 417.773 224.047">
<path id="Path_35" data-name="Path 35" d="M-3.875-234.323c-1.516,0-8.928,23.415-22.236,70.078-2.021.842-29.143,6.907-81.533,18.193-.505,0-.842-.674-1.348-2.021.842-1.179,6.57-22.742,16.846-64.687,0-.842-.505-1.179-1.348-1.348h-1.348c-1.179,0-7.581,22.91-18.867,68.73q-8.844,3.285-95.01,23.584c-35.881,7.917-53.906,12.3-53.906,13.477v2.021a4.017,4.017,0,0,1,2.021.674q56.1-14.15,143.525-33.691c0,.505.168.674.674.674h.674q0,1.516-23.584,92.988a4.017,4.017,0,0,1,.674,2.021h2.7l25.605-96.357c10.276-3.538,37.566-9.6,81.533-18.193h.674q-17.435,69.236-33.691,141.5c.674,1.853,1.348,2.7,2.021,2.7h.674l1.348-.674c11.624-53.738,23.415-101.916,35.039-144.873,38.408-8.591,66.035-12.8,82.881-12.8h5.391l3.369,3.369h.674c.674,0,1.348-.842,2.021-2.7,0-3.2-3.2-4.717-9.434-4.717h-.674c-15.5,0-42.451,3.875-80.859,11.455,0-.505-.505-.674-1.348-.674,2.7-11.624,9.265-33.86,19.541-66.709,0-1.348-.505-2.021-1.348-2.021Zm14.993,93.662c-8.254,0-13.982,6.738-17.519,20.215,0,6.57,4.548,10.276,13.477,11.455,9.434,0,19.036-7.917,28.975-23.584,0-1.348-.505-2.021-1.348-2.021H33.354c-8.76,13.477-16.677,20.215-23.584,20.215H2.358a7.891,7.891,0,0,1-4.043-4.043v-2.021a26.887,26.887,0,0,1,1.348-6.064c11.624-3.706,17.519-6.57,17.519-8.76v-2.021a5.721,5.721,0,0,0-5.391-3.369Zm-8.591,9.939c1.516-3.2,3.369-4.885,5.559-5.222l3.369-.168-4.717,2.864ZM98.716-238.029c-1.516,0-3.875,6.738-7.412,20.215q-4.3,20.973-34.365,78.838c-8.254,14.319-13.645,21.562-16.172,21.562H38.745c-1.853-.505-2.7-2.527-2.7-6.064v-10.107c14.487-43.63,24.089-76.311,28.975-97.7-.337-3.2-1.011-4.717-2.021-4.717H60.981l-4.043,4.043c-17.014,44.978-25.605,79.006-25.605,101.748v4.043c0,7.581,2.527,12.129,7.412,13.477,7.581,0,20.215-18.025,37.734-53.906h.674c-3.538,17.183-5.391,29.817-5.391,37.734v4.043c0,6.233,1.516,10.276,4.717,12.129h2.7c4.548,0,11.624-7.244,21.562-21.562-.505,0-.674-.505-.674-1.348H98.042C88.1-123.479,81.533-117.414,78.5-117.414c-1.348-.337-2.021-2.19-2.021-5.391v-4.717c0-12.971,3.2-31.838,9.434-56.6,10.276-31,15.5-48.347,15.5-51.885,0-1.348-.505-2.021-1.348-2.021Zm-41.1,17.519v.674c-2.19,11.118-6.738,26.448-13.477,45.82h-.674v-.674c0-5.054,4.548-20.383,13.477-45.82ZM106.3-139.482c-6.57,0-11.118,6.738-13.477,20.215,0,6.233,2.864,9.939,8.76,11.455,4.548,0,8.928-4.043,13.477-12.129,14.319-5.391,22.4-9.939,24.258-13.477v-.674c0-.842-.505-1.179-1.348-1.348h-1.348c-8.591,5.9-14.656,8.76-18.193,8.76h-.674C116.909-135.271,113.035-139.482,106.3-139.482Zm-1.348,5.391c3.875-1.516,6.57.168,8.086,5.391v2.021q-6.822,0-8.086-6.064Zm-4.717,5.391c4.885,3.706,8.423,5.9,10.781,6.738-2.021,5.9-4.885,8.76-8.76,8.76h-2.021c-1.348-.674-2.19-2.358-2.7-5.222C97.2-121.12,98.042-124.49,100.232-128.7Zm51.211,7.244c-4.043,0-7.075,2.19-8.928,6.738l3.032,2.864c5.728-1.685,8.928-3.538,9.6-5.728-.168-2.527-.842-3.875-1.685-3.875Z" transform="translate(262.624 238.029)" fill="#949ba5"/>
</svg>

And how could I make my own SVG's (such as the one below) animate in
the same fashion as on the Codepen? (Besides replacing the path id!)
For this you need to change your SVG
Your shapes is drawn with double paths:
You need to redraw the shape using single paths and make the line thicker (stroke-width ="6")
This is how it looks in the end:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="horizont" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"/>
<path id="vert1" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" />
<path id="vert2" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6" />
<path id="sign" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" />
<path id="dot" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" />
</g>
</svg>
Animating one element with stroke-dashoffset
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign"
attributeName="stroke-dashoffset"
begin="0s;anSign.end+1s"
dur="3s"
values="750;0"
repeatCount="1"
fill="freeze" />
</path>
</svg>
Animating all the elements of the shape:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="4" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>
Color scheme option as in the question:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="6" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>

How to do draw animation effect fill SVG?

I am trying to animate the SVG logo like drawing fill path without stroke. my logo is looking like that.
Is it possible to create fill drawing instead of strokes? I saw many solutions about that but all are used by strokes. I also found This solution is pretty similar to my problem. but my SVG path is a bit complicated and can't create a fake path with stroke-like they created. I want it growing from nothing and drawing animation effect with fill.
My full SVG code here
<svg
class="logo-white"
xmlns="http://www.w3.org/2000/svg"
width="184"
height="90"
viewBox="0 0 184 90.733"
>
<path
class="draw-logo"
id="logo-path"
data-name="Path 1"
d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587"
fill="#f7f7f7"
transform="translate(52 -300)"
/>
</svg>

Because your SVG file is not in the same shape as my logo. can you
please tell me how can I modify the path to achieve the exact same
shape. I don't have much knowledge about the illustrator by the way.
Unfortunately I do not use the illustrator. Path painted in Inkscape
Open the file from the previous answer to edit the path form inInkscape
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" fill="none" stroke="black" stroke-width="25" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
</svg>
Select in the vector editor on the toolbar Edit contour nodes F2 (arrow red -1)
Edit the shape of the curve by dragging the nodal points and change the length and position of the control levers of the nodal points (arrow red -2)
Vector editor saves a lot of overhead information. To remove it, you need to optimize the saved file using SVG Editor
Replace the old path with the new one from the optimized file
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,443;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,443;}
100% {stroke-dasharray: 443,0;}
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m78 34.5c0 0-1.3-1.3-1.9-2.1C74.8 30.9 73.8 29.1 72.7 27.4 71.4 26.2 61.9 10.9 46.6 11.2c-5.1 0.1-10.4 1.5-14.9 4-4.7 2.5-8.8 6.3-11.8 10.7-2.6 3.9-4.3 8.5-4.9 13.1-0.9 6.7-0.5 13.9 2.1 20.2 2.4 5.7 6.5 11 11.6 14.3 5.1 3.3 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.1-38 55.1-52.2 5.4-3.7 11.4-7.3 17.9-8.2 6-0.8 12.6 0 17.9 2.9 6.8 3.9 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 8.1-22.2 7-9.7-1.3-20-7.4-24.5-16.1-2.7-5.3-4-10.1-4.4-15.4-0.4-4.7 0.5-11 1.6-14.1 1.9-5.2 8.5-12.4 8.5-12.4" />
</svg>
</div>

Your figure is drawn in double stroke
Therefore, it is impossible to animate its filling with color using stroke-dasharray
Consider creating a single outline that runs in the middle of the shape.
Set the width of this line 25px and we will animate its appearance by changing the attributes ofstroke-dasharray
Animation CSS
.container {
padding:10px;
background-color:#151515;
width:50%;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,425;}
100% {stroke-dasharray: 425,0;}
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
</svg>
</div>
Animation SVG
To start the animation click on the black rectangle
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" >
<animate attributeName="stroke-dasharray" begin="svg1.click+0.5s" dur="4s" values="0,425;425,0" repeatCount="2" fill="freeze" />
</path>
</svg>
</div>
An additional example of filling the logo from one point with two lines
To start the animation, click on any letter in the circle
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>

Divide image into segments to change them with css on hover

I have an image like this, divided into 4 segments. I want to be able to change the blur of each segment on hover. For example:
#segment1:hover {
filter: blur(50px);
}
I tried turning those segments into svg masks and then using clip path like in this example this example, but css still interprets it like a whole image even though only a part of it is visible.
The shape of the curves dividing those segments is complex and (I suppose) svg should be used, so javascript tricks for checking x and y position don't work, as well as html < map > tag.
How would you solve such problem? Thank you!
Here's the svg code for the first segment mask (just in case).
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1920.000000pt" height="1081.000000pt" viewBox="0 0 1920.000000 1081.000000"
preserveAspectRatio="xMidYMid meet">
<path transform="translate(0.000000,1081.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none" d="M0 6557 l0 -4254 118 -12 c64 -7 137 -18 162 -23 73 -17 432 -19 530
-3 47 8 124 18 171 24 109 12 305 56 389 86 36 13 88 32 115 41 178 62 184 64
500 247 204 118 404 270 593 451 204 195 424 506 538 758 20 45 46 97 56 113
10 17 18 38 18 48 0 10 12 41 26 69 15 29 35 83 46 121 10 38 27 86 38 107 10
20 24 59 31 86 7 27 24 76 39 109 30 65 68 168 96 255 53 169 121 283 298 499
158 193 340 327 536 393 l95 33 220 -1 220 0 136 -36 c75 -20 179 -55 231 -77
52 -22 153 -57 224 -76 71 -20 143 -40 159 -46 68 -24 166 -48 241 -58 43 -5
121 -16 171 -23 115 -15 205 -4 378 47 180 53 220 70 314 135 312 214 446 443
523 890 15 89 4 313 -28 595 -34 301 -43 630 -21 771 15 89 90 341 131 436 18
41 95 177 159 278 64 100 141 195 251 308 233 239 386 339 746 487 307 126
430 214 538 382 41 63 51 115 52 247 0 84 -6 132 -26 215 -15 58 -27 116 -29
128 -6 61 -160 292 -289 435 l-61 68 -4317 0 -4318 0 0 -4253z"/>
</svg>

Something like this, perhaps:
.x { opacity:0; }
.x:hover { opacity:1; }
<svg width="400" height="300" viewBox="0 0 800 600">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="8"/>
</filter>
<image href="https://i.stack.imgur.com/DkIzu.jpg"
width="800" height="600" id="img"/>
<clipPath id="c1">
<path d="M0 0h400v300h-400z"/>
</clipPath>
<clipPath id="c2">
<path d="M400 0h400v300h-400z"/>
</clipPath>
<clipPath id="c3">
<path d="M0 300h400v300h-400z"/>
</clipPath>
<clipPath id="c4">
<path d="M400 300h400v300h-400z"/>
</clipPath>
</defs>
<use xlink:href="#img"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c1)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c2)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c3)" class="x"/>
<use xlink:href="#img" filter="url(#blur)"
clip-path="url(#c4)" class="x"/>
</svg>
This is just a simple example with rectangular clipping masks, but should work with masks of any shape.

Categories