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>
Expected Behavior:
Icon to fit only the area of the 24 x 24 viewbox.
Actual Behavior:
The svg tag takes up the correct area of 24 x 24 but the path element is not contained inside of the 24 x 24 area.
How would I be able to have the path be constrained to the 24 x 24 area and not go over? Currently this is what my svg tag looks like.
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
</path>
</svg>
</a>
Remember, the viewBox doesn't have to match your dimensions, so adjust your viewBox - that's what it's there for! The viewBox settings below seems to work. (I scaled up the SVG size and added a 1px border red to show the effect).
svg {
border: 1px solid red;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="1.6 2 28.73 27.99">
<path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
</path>
</svg>
The problem is with your SVG path. It is bleeding outside the view box. This is what it looks like in Illustrator:
This is after editing the path in illustrator to contain it to the view box:
a {
display: inline-block;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.3 0 11.9c0 5 3 9.4 7.6 11.2-.1-1-.2-2.4 0-3.4l1.4-6s-.4-.7-.4-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.3 3.8-5.5 0-2.9-2.1-4.9-5-4.9-2.9-.1-5.3 2.1-5.4 4.9v.3c0 1 .4 2.1.9 2.7.1.1.1.2.1.3l-.3 1.4c-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.7 0-3.8 2.7-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.7-1.4l-.8 3c-.4 1.1-.9 2.2-1.5 3.1 6.3 2 13-1.6 15-7.9.4-1.2.5-2.4.5-3.6C24 5.4 18.6 0 12 0z"/>
</path>
</svg>
</a>
Also, adding display: inline-block to your anchor tag allows the SVG to take up it's space.
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>