Newbie A-frame : a-box elements are centred on the x-axis - d3.js

I'm trying out a-frame for the first time and simply want to add a number of different sized a-box elements into a scene, all positioned along the x-axis and extending upwards - like buildings on a street for example. If the heights are different - as in the first books of 4 boxes below, the boxes are correctly distributed left to right but vertically the midpoint of their height is centred on the x-axis with half the height going above and half going below the axis. I want each box to start its height from y=0 an extend upwards in the positive y direction to its height.
In the second block of 4 boxes below, they are all the same height and appear as expected.... they are distributed from left to right along the x-axis and extend upwards from y=0 to y=height.
The full code is below. Help appreciated..... I guess its something simple...
'''
<a-sky color="#222"></a-sky>
<a-box color="orange" depth="0.1" height="1" width="1" position="-6 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="2" width="1" position="-4 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="3" width="1" position="-2 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="7" width="1" position="0 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1" position="2 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1" position="4 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1" position="6 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1" position="8 0 -10"></a-box>
'''


From the documents the position attribute take x,y,z co-ordinates. Where y axis is vertical axis. so you need to change the y axis value. Also you can press alt + ctrl + i to open aframe's own inspect tool where you can play around positioning.
Additionally have look at this glitch code.
From the discussion in comments.
You just need to make changes in the position as per the height of first object. When you set position to 0 0 0 the center of that object is placed at 0 0 0, so if your object has height of 5, then your position needs to be 0 2.5 0.
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="red" depth="1" height="1" width="1" position="0 0 -5"></a-box>
<a-box color="green" depth="1" height="2" width="1" position="0 3 -5"></a-box>
<a-box color="blue" depth="1" height="3" width="1" position="0 7 -5"></a-box>
<a-box color="yellow" depth="1" height="4" width="1" position="0 12 -5"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>
</body>

Related

How to add depth to <a-triangle> in A-Frame

I tried to get a 3D triangle in the A-Frame framework. However, I couldn't find a way to add depth to it, it is 3D.
I tried adding depth via the geometry depth component
<a-triangle vertex-c="1 -1 0" depth="2"></a-triangle>
I also tried to group a box and triangle
<a-entity position="0 0 0"> <a-box depth="0.1" width="2" height="2" color="#6173F6"></a-box> <a-triangle vertex-a="-1 1 0.05" vertex-b="-1 -1 0.05" vertex-c="1 0 0.05" color="#6173F6"></a-triangle> </a-entity>
And I tried to scale the triangle
<a-triangle vertex-c="1 -1 0" scale="1 1 2"></a-triangle>

Animate a SVG made only of one stroke

I'm a little bit confused, I have an SVG, made only of one stroke that needs to be animated (classic drawing icon animation).
I want to animate the icon like it was drawn from one end of the sroke, to the other end, but it confuses the icon for a shape and the stroke ends up animated around that shape (so instead of having an animated stroke I have a shape that should be a stroke... with strokes animated around it). I don't know if you can get the full stroke path on illustrator to animate it, or if it will keep being a shape and I would never be able to do what I want with it
The svg :
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.02 118.55"><path d="M19.34,17.7c.03,.27,.12,.57,.25,.82,.05,.11,.11,.21,.18,.3-.18-.76-.3-1.41-.39-1.93-.04,.27-.07,.54-.04,.8Z"></path><path d="M246.98,23.58c-7.24,1.13-14.33,3.91-21.18,6.61-5.91,2.32-11.48,4.51-16.82,5.54-8.33,1.61-15.99,.38-23.4-.82-2.81-.45-5.72-.92-8.54-1.2-4.67-.46-9.47-.45-14.69,.02-4.16,.38-8.58,1.06-13.5,2.08-2.32,.48-4.64,1.01-6.68,1.48-5.62,1.29-10.48,2.4-14.51,2.4-.05,0-.1,0-.15,0-2.65-.02-5.03-.55-7.29-1.61-2.02-.96-4.04-2.39-6.35-4.5-1.89-1.73-3.85-3.79-5.93-5.97-2.64-2.77-5.34-5.62-8.31-8.22-2.47-2.17-5.19-4.23-8.07-6.1-2.9-1.89-5.88-3.55-8.84-4.92-2.25-1.04-4.45-1.9-6.49-2.67l.26-.96,.13,.02c1.6,.27,3.21,.52,4.82,.76,3.51,.54,7.12,1.08,10.29,1.86,2.46,.6,4.51,1.31,6.46,2.21,2.1,.97,4.13,2.21,6.21,3.78,2.27,1.71,4.61,3.84,6.58,5.97,1.95,2.1,3.42,4.09,4.27,5.74,1.29,2.5,1.25,4.56,1.23,6.07-.01,.74-.02,1.37,.09,1.98,.16,.85,.59,1.62,1.23,2.23,.66,.62,1.53,1.04,2.34,1.13,.72,.08,1.33-.08,1.93-.52,.5-.36,.97-.9,1.48-1.7,.58-.91,.96-1.78,1.17-2.65,.28-1.18,.25-2.38-.11-3.56-.51-1.69-1.73-3.57-3.02-5.56-.69-1.07-1.38-2.14-2-3.2-.49-.85-.94-1.7-1.38-2.55-1.31-2.51-2.55-4.88-4.63-6.9-1.45-1.41-3.22-2.56-5.42-3.53-2.24-.98-4.91-1.76-8.16-2.38-2.76-.53-6.17-.97-9.86-1.29-3.8-.33-7.79-.52-11.22-.53-3.3-.02-5.74,.14-7.05,.46-.26,.06-.48,.13-.67,.21l-.14,.06-2.75-.56c-1.85-.38-3.5-.72-5.11-1.01-1.93-.35-3.57-.58-5.02-.72-1.49-.13-2.9-.17-4.31-.11-1.66,.07-3.11,.26-4.33,.58-1.24,.32-2.22,.75-2.9,1.3-.82,.65-1.27,1.45-1.51,2.67-.22,1.14-.23,2.62-.18,4.48,.02,.64,.05,1.37,.08,2.14,.14,3.65,.32,8.2-.19,12.2-.3,2.35-.86,4.54-1.65,6.49-.79,1.95-1.84,3.73-3.12,5.29-.68,.83-1.44,1.62-2.17,2.37-1.81,1.87-3.33,3.45-3.63,5.33l-.09,.55-.54-.14c-.61-.16-1.21-.34-1.79-.53-2.25-.74-4.53-1.77-6.77-3.08-2.24-1.31-4.41-2.87-6.43-4.64-1.89-1.65-3.62-3.44-5.13-5.31-1.52-1.88-2.77-3.78-3.72-5.65-.91-1.78-1.54-3.52-1.87-5.18-.12-.57-.19-1.14-.23-1.67l-.02-.3,.25-.16c1.63-1.02,2.78-1.72,3.83-2.17,.96-.41,1.9-.63,2.8-.65,1.13-.03,1.97,.24,2.47,.47,.28,.14,.46,.24,.57,.38l.15,.15-.15,.75c-.1,.51-.22,1.09-.14,1.81,.06,.48,.21,.99,.43,1.42,.22,.45,.51,.83,.84,1.13,.35,.31,.79,.55,1.28,.7,.36,.11,.73,.17,1.1,.17h.35l.11,.34c.55,1.64,1.19,3.14,1.92,4.47,1.12,2.05,2.51,3.86,3.93,5.11,1.44,1.27,2.89,1.94,4.2,1.94h0c1.49,0,2.91-.84,4.11-2.42,1.16-1.53,2.07-3.69,2.63-6.26,.59-2.69,.82-5.87,1.04-8.95,.2-2.79,.39-5.42,.84-7.36,.74-3.18,2.23-4.47,3.12-5.24,.21-.18,.4-.34,.58-.54,.26-.29,.57-.7,.52-1.02-.04-.29-.39-.54-.67-.7-.58-.33-1.77-.55-3.56-.65-2.45-.13-5.61-.05-8.44,.22-2.8,.27-5.29,.71-7.38,1.3-2.39,.68-4.66,1.67-6.95,3.02-1.94,1.15-3.57,2.38-5.04,3.54-1.52,1.2-2.64,2.13-3.5,3.11-.99,1.12-1.58,2.24-1.88,3.52-.13,.56-.2,1.18-.22,1.82v.27l-.24,.14c-1.92,1.2-4.04,2.48-6.61,3.75,.09,.28,.18,.55,.26,.83,2.5-1.23,4.49-2.42,5.96-3.32l.65-.4,.11,.76c.04,.28,.09,.57,.15,.85,.35,1.73,1,3.54,1.95,5.4,.98,1.92,2.26,3.87,3.82,5.8,1.55,1.93,3.31,3.75,5.23,5.42,2.07,1.8,4.28,3.4,6.57,4.74,2.29,1.34,4.62,2.4,6.93,3.15,.75,.24,1.54,.47,2.42,.7l.29,.07,.07,.29c.32,1.25,1.19,2.65,2.59,4.16,1.59,1.72,3.88,3.6,6.63,5.45,2.37,1.59,4.72,2.91,7.17,4.03,1.42,.65,2.85,1.22,4.38,1.75l.12,.04,.09,.1c1.49,1.67,2.99,3.32,4.33,4.75,1.75,1.87,3.62,3.81,5.43,5.28,1.84,1.5,3.52,2.45,5.28,3,1.68,.52,3.46,.68,5.35,.85,2.15,.19,4.58,.4,7.01,1.24,2.74,.94,5.67,2.72,8.5,4.44,1.78,1.08,3.61,2.2,5.45,3.12,2.01,1.01,4.11,1.83,6.06,2.36,2.02,.55,3.78,.75,4.72,.53,1.12-.26,1.34-.72,1.01-2.13-.09-.37-.2-.73-.32-1.14-.19-.64-.41-1.34-.58-2.13-.18-.86-.31-1.82-.45-2.83-.33-2.46-.67-4.95-1.74-6.67-.76-1.21-1.89-2.04-3.56-2.62-1.54-.53-3.45-.81-5.85-1.08-.66-.07-1.65-.18-2.69-.28-4.28-.44-9.6-.98-14.52-2.29-.72-.19-1.44-.4-2.15-.63l-2.3-.73,2.4-.24c1.41-.14,2.8-.36,4.15-.65,4.91-1.07,9.76-3.21,14.04-5.1,2.36-1.04,4.58-2.02,6.41-2.63,1.47-.49,2.65-.73,3.66-.73,.8,0,1.49,.15,2.12,.46,1.5,.73,2.78,2.4,4.13,5.41,1.17,2.59,2.4,6.23,3.71,10.09,1.82,5.35,3.86,11.37,6.41,16.82,2.17,4.65,4.73,8.93,7.6,12.73,2.88,3.82,6.01,7.06,9.31,9.64,3.1,2.43,6.38,4.32,10.04,5.77,3.22,1.28,6.64,2.18,10.44,2.76,3.47,.52,7.09,.73,10.2,.59,3.17-.15,5.68-.64,7.26-1.42,.53-.26,.98-.57,1.34-.92,.61-.59,.94-1.27,1-2.07,.06-.73-.13-1.53-.55-2.39-.47-.94-1.22-1.95-2.24-3-1.26-1.29-2.88-2.61-4.61-4.02-2.57-2.09-5.47-4.44-7.52-7.04-1.88-2.39-3.1-5.04-4.39-7.84-1.03-2.23-2.09-4.54-3.54-6.83-2.24-3.54-5.38-7.02-7.9-9.81-1.18-1.3-2.16-2.39-2.84-3.25q-1.35-1.7-1.13-2.04t1.94-.05c.3,.04,.7,.11,1.13,.18,2.64,.44,6.25,1.04,11.04-.32,3.99-1.13,8.6-3.57,13.06-5.94l.11-.06c1.64-.87,3.2-1.7,4.65-2.41,2.86-1.41,5.13-2.32,7.38-2.94,2.36-.65,4.85-1.02,7.83-1.16,1.31-.06,2.78-.08,4.2-.1,5.24-.08,11.19-.16,15.49-2.26,2.84-1.38,4.68-3.5,5.73-5.02,1.79-2.62,2.44-5.27,2.28-6.74-.17-1.63-1.1-2.44-2.91-2.54-1.41-.07-3.43,.38-5.99,1.34-1.02,.39-2.12,.85-3.27,1.33-4.3,1.81-9.64,4.06-17.08,5.02-4.42,.57-9.68,.68-14.76,.79-6.05,.13-12.27,.27-17.57,1.12-4.54,.73-8.6,2.02-12.07,3.81-3.47,1.8-6.31,4.12-8.21,6.73-1.75,2.39-2.69,5-2.79,7.74-.1,2.69,.59,5.58,2.07,8.59,1.94,3.95,5.2,8.13,8.35,12.17,1.54,1.97,3.12,4,4.51,5.96,1.99,2.82,3.58,5.55,4.49,7.69,1.2,2.83,.96,3.38,.64,3.68-.39,.37-1.07,.32-3.36-.97-1.97-1.11-4.53-2.99-7.4-5.43-3.18-2.71-6.36-5.78-9.19-8.89-2.84-3.12-5.34-6.28-7.44-9.39-2.47-3.65-4.54-7.49-5.99-11.1-1.45-3.62-2.25-6.88-2.38-9.7-.12-2.76,.4-5.13,.87-7.23,.56-2.53,1.01-4.52,.2-6.32-.9-2.02-3.28-3.53-6.29-5.43-1.89-1.2-4.03-2.54-6.06-4.2-2.23-1.81-4.4-4.03-6.69-6.38-3.08-3.15-6.26-6.41-10.01-9.12-2.9-2.1-6.24-3.94-9.92-5.47-3.7-1.54-7.65-2.72-11.42-3.42-3.6-.66-6.47-.78-8.78-.36-2.66,.48-4.51,1.64-5.68,3.56-1.32,2.18-1.7,5.34-2.1,8.68-.3,2.52-.61,5.13-1.36,7.37-1.04,3.1-2.98,5.59-4.53,7.6-1.07,1.37-1.99,2.56-2.5,3.71-.51,1.15-.61,2.22-.32,3.37l.22,.86-.85-.25c-1.77-.53-3.55-.92-5.27-1.29-.8-.17-1.56-.34-2.31-.51l-.43-.1,.05-.44c.2-1.73,1.74-3.33,3.38-5.02,.75-.78,1.53-1.59,2.25-2.47,1.33-1.63,2.42-3.48,3.25-5.52,.82-2.03,1.4-4.28,1.71-6.7,.52-4.04,.34-8.63,.2-12.32v-.2c-.03-.68-.06-1.33-.08-1.95-.05-1.8-.05-3.22,.16-4.29,.19-.98,.57-1.67,1.2-2.17,.59-.47,1.46-.85,2.58-1.14,1.17-.3,2.57-.49,4.17-.55,1.33-.06,2.71-.02,4.19,.11,1.46,.13,3.03,.35,4.94,.7,1.45,.26,3.21,.63,5.09,1.01l2.28,.47,.09,.27c.05,.14,.14,.28,.28,.4,.57,.54,2.25,1.16,4.37,1.96,2,.75,4.5,1.68,7.18,2.93,2.95,1.37,5.89,3,8.74,4.86,2.84,1.85,5.52,3.88,7.97,6.03,2.91,2.56,5.61,5.39,8.21,8.12,2.1,2.21,4.07,4.28,6.01,6.05,2.38,2.17,4.47,3.65,6.57,4.64,2.37,1.12,4.87,1.68,7.65,1.7,.05,0,.1,0,.16,0,4.11,0,9.02-1.12,14.69-2.42,2.01-.46,4.28-.98,6.68-1.48,4.92-1.02,9.3-1.69,13.41-2.07,5.15-.47,9.9-.47,14.52-.02,2.79,.27,5.55,.72,8.47,1.19,7.5,1.21,15.24,2.46,23.72,.82,5.42-1.05,11.02-3.25,16.94-5.58,6.84-2.69,13.88-5.46,21.02-6.57,4.02-.62,8.25-.76,12.91-.41l-.05-.86c-4.67-.34-8.92-.2-12.98,.43ZM77.2,2.98c.54,0,1.12-.01,1.73,0,3.39,.01,7.35,.2,11.15,.53,3.7,.32,7.08,.76,9.78,1.27,3.17,.6,5.78,1.36,7.97,2.33,2.12,.93,3.81,2.02,5.17,3.35,1.98,1.93,3.24,4.35,4.47,6.69,.46,.87,.91,1.74,1.39,2.58,.66,1.15,1.38,2.26,2.01,3.23,1.27,1.95,2.45,3.78,2.92,5.35,.31,1.04,.35,2.09,.1,3.12-.19,.78-.54,1.56-1.06,2.39-.44,.7-.84,1.16-1.26,1.46-.35,.25-.73,.38-1.13,.38-.07,0-.15,0-.22-.01-.64-.07-1.32-.4-1.85-.9-.51-.48-.85-1.09-.98-1.76-.09-.5-.08-1.1-.07-1.8,.03-1.69,.07-3.78-1.32-6.48-.89-1.72-2.41-3.77-4.41-5.93-2.02-2.18-4.4-4.34-6.7-6.08-2.12-1.61-4.21-2.87-6.37-3.87-2-.93-4.11-1.65-6.62-2.26-3.21-.79-6.82-1.34-10.31-1.87-1.55-.24-3.04-.46-4.48-.7l.07-.99ZM21.92,19.78c-.42-1.52-.66-2.76-.78-3.54-.07-.43-.11-.74-.13-.97l-.06-.68,.67,.16c.08,.02,.17,.04,.26,.07,.31,.1,.6,.24,.85,.43,.31,.23,.58,.53,.79,.88,.21,.34,.34,.69,.39,1.05,.06,.37,.03,.78-.08,1.19-.11,.41-.29,.8-.53,1.11-.18,.24-.4,.44-.64,.6l-.57,.37-.18-.66ZM7.9,14.97c.26-1.13,.8-2.13,1.69-3.14,.83-.94,1.91-1.85,3.39-3.01,1.45-1.14,3.06-2.35,4.95-3.47,2.21-1.31,4.41-2.27,6.74-2.93,2.06-.59,4.5-1.02,7.23-1.28,2.77-.27,5.88-.34,8.32-.21,1.24,.07,2.11,.17,2.67,.33l.89,.25-.95,.83c-1.03,.89-2.59,2.24-3.39,5.7-.46,1.98-.65,4.66-.85,7.49-.22,3.04-.45,6.18-1.03,8.83-.54,2.45-1.39,4.5-2.47,5.92-1.03,1.36-2.22,2.08-3.43,2.08h0c-1.11,0-2.33-.58-3.63-1.73-1.34-1.19-2.67-2.92-3.74-4.88-.68-1.24-1.28-2.63-1.79-4.12l-.15-.43,.41-.19c.06-.03,.12-.06,.17-.09,.42-.23,.78-.54,1.07-.93,.31-.41,.54-.89,.68-1.41,.13-.52,.17-1.04,.09-1.53-.07-.46-.25-.94-.51-1.37-.27-.44-.61-.82-1-1.11-.33-.24-.7-.43-1.1-.56-.3-.1-.63-.16-.96-.18-.56-.04-.77-.03-.96,.55-.11,.34-.09,1,.07,2.01,.12,.74,.34,1.93,.73,3.4l.22,.82-.96-.24c-.37-.11-.7-.29-.96-.53-.25-.22-.47-.52-.64-.86-.18-.36-.3-.76-.34-1.14-.07-.57,.04-1.1,.13-1.53l.06-.31c.08-.41,.09-.68-.06-1.01-.1-.23-.32-.57-1.05-.91-.48-.23-1.47-.59-2.87-.56-1.01,.03-2.06,.27-3.11,.72-.96,.41-1.99,1.01-2.86,1.55l-.97,.6,.28-1.4ZM55.76,59.75l-.09-.1c-.54-.61-1.08-1.22-1.62-1.83-2.2-2.51-4.2-4.87-5.8-6.82-.45-.55-.86-1.06-1.24-1.55l-1.36-1.75,1.98,1c2.97,1.5,5.91,3.59,9.01,5.8,1.59,1.13,3.23,2.3,4.93,3.42,2.01,1.32,4.02,2.51,5.98,3.54l2.39,1.26-2.68-.32c-2.54-.3-5.18-.81-7.86-1.53-1.21-.32-2.4-.68-3.54-1.06l-.13-.04Zm22.8,6.04c4.99,1.33,10.35,1.88,14.65,2.32l.21,.02c.78,.08,1.53,.16,2.47,.26,2.35,.26,4.22,.54,5.67,1.04,1.47,.5,2.46,1.22,3.1,2.26,.98,1.56,1.3,3.97,1.61,6.29,.14,1.05,.27,2.05,.46,2.94,.18,.87,.41,1.61,.59,2.21,.14,.45,.25,.81,.31,1.08,.07,.29,.22,.96-.36,1.1-.22,.05-.49,.08-.77,.08-1.13,0-2.63-.35-3.53-.6-1.91-.52-3.95-1.31-5.9-2.29-1.74-.88-3.59-2-5.39-3.09-2.86-1.74-5.82-3.54-8.66-4.51-2.54-.87-4.92-1.08-7.22-1.28-1.84-.16-3.58-.32-5.17-.81-1.66-.51-3.25-1.42-4.99-2.84-1.77-1.44-3.61-3.35-5.34-5.2-.72-.77-1.46-1.58-2.23-2.42l-1.16-1.28,2.28,.62c3.52,.94,6.98,1.54,10.28,1.77,.83,.06,1.66,.09,2.47,.11l.18,.04c2.12,.89,4.28,1.63,6.42,2.2Zm-33.76-23.44c.47-1.05,1.36-2.2,2.39-3.53,1.69-2.17,3.6-4.63,4.68-7.86,.77-2.31,1.09-4.97,1.4-7.54,.39-3.24,.75-6.3,1.99-8.33,1.01-1.67,2.73-2.73,5.09-3.16,2.21-.4,4.99-.28,8.48,.36,3.72,.68,7.61,1.85,11.25,3.36,3.63,1.51,6.91,3.32,9.76,5.38,3.68,2.66,6.83,5.89,9.89,9.01,2.33,2.39,4.5,4.6,6.77,6.45,2.12,1.72,4.25,3.07,6.14,4.26,2.9,1.83,5.18,3.28,5.98,5.05,.69,1.54,.25,3.51-.26,5.78-.48,2.15-1.02,4.58-.89,7.46,.13,2.92,.95,6.28,2.44,9.98,1.46,3.65,3.56,7.54,6.08,11.26,2.12,3.14,4.65,6.33,7.52,9.48,2.87,3.16,6.07,6.26,9.27,8.98,2.91,2.47,5.51,4.38,7.53,5.52,2.11,1.19,3.66,1.5,4.36,.85,.7-.65,.55-2.34-.43-4.64-.94-2.2-2.56-4.99-4.58-7.85-1.33-1.89-2.85-3.84-4.47-5.91l-.06-.08c-3.13-4.01-6.37-8.16-8.27-12.03-1.41-2.88-2.08-5.64-1.98-8.19,.1-2.57,.98-5.02,2.63-7.27,1.82-2.49,4.56-4.72,7.92-6.47,3.4-1.76,7.37-3.01,11.81-3.73,5.25-.85,11.45-.98,17.45-1.11,5.37-.12,10.42-.22,14.85-.79,7.56-.97,12.97-3.25,17.31-5.08,1.17-.49,2.24-.94,3.24-1.32,2.48-.93,4.32-1.37,5.65-1.28,1.67,.09,2.03,1.15,2.09,1.77,.17,1.6-.67,4.03-2.14,6.17-.99,1.44-2.72,3.43-5.39,4.74-4.12,2.01-9.97,2.1-15.13,2.17-1.49,.02-2.88,.04-4.24,.11-3.05,.15-5.59,.53-8.01,1.19-2.31,.64-4.63,1.56-7.53,2.99-1.48,.73-3.03,1.55-4.68,2.43l-.09,.05c-4.43,2.35-8.99,4.77-12.9,5.88-4.6,1.3-8.25,.7-10.67,.3-.4-.07-.75-.12-1.14-.18-1.58-.22-2.43-.09-2.77,.42-.38,.57,0,1.6,1.16,3.06,.7,.89,1.76,2.05,2.87,3.29,2.5,2.77,5.61,6.22,7.82,9.7,1.43,2.25,2.47,4.52,3.48,6.71,1.32,2.87,2.56,5.56,4.5,8.03,2.11,2.68,5.05,5.06,7.64,7.17,1.72,1.4,3.33,2.71,4.54,3.95,.96,.98,1.66,1.92,2.08,2.78,.36,.72,.51,1.38,.47,1.95-.04,.57-.29,1.08-.74,1.52-.29,.28-.67,.54-1.12,.76-1.49,.74-3.88,1.2-6.93,1.34-.64,.03-1.31,.04-1.98,.04-2.56,0-5.31-.21-8.06-.63-3.74-.56-7.09-1.45-10.25-2.7-3.52-1.4-6.82-3.3-9.82-5.65-3.24-2.54-6.32-5.73-9.15-9.48-2.83-3.75-5.36-7.99-7.5-12.58-2.53-5.41-4.57-11.42-6.37-16.71-1.39-4.09-2.57-7.56-3.75-10.19-1.44-3.21-2.84-5-4.54-5.83-1.64-.79-3.56-.73-6.42,.23-1.88,.63-4.11,1.61-6.48,2.66-4.25,1.88-9.06,4-13.88,5.05-2.65,.58-5.45,.86-8.37,.84l-.19-.04c-.67-.29-1.34-.59-2.01-.9-2.68-1.27-5.32-2.77-8.08-4.58-1.65-1.08-3.3-2.25-4.89-3.39-3.57-2.54-6.92-4.92-10.38-6.46-.49-.22-.97-.42-1.46-.6l-.18-.07-.09-.17c-.06-.12-.12-.25-.17-.37-.6-1.35-.62-2.55-.08-3.77Zm-7.22,3.16c2.22,.48,4.52,.99,6.79,1.78l.17,.06,.09,.16c.69,1.17,1.68,2.45,2.95,4.02,1.42,1.74,3.18,3.83,5.11,6.04l1.43,1.64-2-.86c-.34-.15-.68-.3-1.01-.45-2.4-1.1-4.7-2.39-7.05-3.97-2.7-1.81-4.94-3.65-6.48-5.31-.9-.98-1.57-1.89-1.98-2.72l-.47-.94,2.44,.54Z"></path></svg>
It has been drawned by our graphist so If we have to remake the svg it'll be done.
Thank you !

Your graphic artist has drawn this incorrectly. You can see this if you put a very narrow stroke on it with zero fill - each curve is actually a double curve - so it is actually drawn as a shape.
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.02 118.55">
<path pathLength="100" fill="none" stroke="blue" stroke-width=".1" d="M246.98,23.58c-7.24,1.13-14.33,3.91-21.18,6.61-5.91,2.32-11.48,4.51-16.82,5.54-8.33,1.61-15.99,.38-23.4-.82-2.81-.45-5.72-.92-8.54-1.2-4.67-.46-9.47-.45-14.69,.02-4.16,.38-8.58,1.06-13.5,2.08-2.32,.48-4.64,1.01-6.68,1.48-5.62,1.29-10.48,2.4-14.51,2.4-.05,0-.1,0-.15,0-2.65-.02-5.03-.55-7.29-1.61-2.02-.96-4.04-2.39-6.35-4.5-1.89-1.73-3.85-3.79-5.93-5.97-2.64-2.77-5.34-5.62-8.31-8.22-2.47-2.17-5.19-4.23-8.07-6.1-2.9-1.89-5.88-3.55-8.84-4.92-2.25-1.04-4.45-1.9-6.49-2.67l.26-.96,.13,.02c1.6,.27,3.21,.52,4.82,.76,3.51,.54,7.12,1.08,10.29,1.86,2.46,.6,4.51,1.31,6.46,2.21,2.1,.97,4.13,2.21,6.21,3.78,2.27,1.71,4.61,3.84,6.58,5.97,1.95,2.1,3.42,4.09,4.27,5.74,1.29,2.5,1.25,4.56,1.23,6.07-.01,.74-.02,1.37,.09,1.98,.16,.85,.59,1.62,1.23,2.23,.66,.62,1.53,1.04,2.34,1.13,.72,.08,1.33-.08,1.93-.52,.5-.36,.97-.9,1.48-1.7,.58-.91,.96-1.78,1.17-2.65,.28-1.18,.25-2.38-.11-3.56-.51-1.69-1.73-3.57-3.02-5.56-.69-1.07-1.38-2.14-2-3.2-.49-.85-.94-1.7-1.38-2.55-1.31-2.51-2.55-4.88-4.63-6.9-1.45-1.41-3.22-2.56-5.42-3.53-2.24-.98-4.91-1.76-8.16-2.38-2.76-.53-6.17-.97-9.86-1.29-3.8-.33-7.79-.52-11.22-.53-3.3-.02-5.74,.14-7.05,.46-.26,.06-.48,.13-.67,.21l-.14,.06-2.75-.56c-1.85-.38-3.5-.72-5.11-1.01-1.93-.35-3.57-.58-5.02-.72-1.49-.13-2.9-.17-4.31-.11-1.66,.07-3.11,.26-4.33,.58-1.24,.32-2.22,.75-2.9,1.3-.82,.65-1.27,1.45-1.51,2.67-.22,1.14-.23,2.62-.18,4.48,.02,.64,.05,1.37,.08,2.14,.14,3.65,.32,8.2-.19,12.2-.3,2.35-.86,4.54-1.65,6.49-.79,1.95-1.84,3.73-3.12,5.29-.68,.83-1.44,1.62-2.17,2.37-1.81,1.87-3.33,3.45-3.63,5.33l-.09,.55-.54-.14c-.61-.16-1.21-.34-1.79-.53-2.25-.74-4.53-1.77-6.77-3.08-2.24-1.31-4.41-2.87-6.43-4.64-1.89-1.65-3.62-3.44-5.13-5.31-1.52-1.88-2.77-3.78-3.72-5.65-.91-1.78-1.54-3.52-1.87-5.18-.12-.57-.19-1.14-.23-1.67l-.02-.3,.25-.16c1.63-1.02,2.78-1.72,3.83-2.17,.96-.41,1.9-.63,2.8-.65,1.13-.03,1.97,.24,2.47,.47,.28,.14,.46,.24,.57,.38l.15,.15-.15,.75c-.1,.51-.22,1.09-.14,1.81,.06,.48,.21,.99,.43,1.42,.22,.45,.51,.83,.84,1.13,.35,.31,.79,.55,1.28,.7,.36,.11,.73,.17,1.1,.17h.35l.11,.34c.55,1.64,1.19,3.14,1.92,4.47,1.12,2.05,2.51,3.86,3.93,5.11,1.44,1.27,2.89,1.94,4.2,1.94h0c1.49,0,2.91-.84,4.11-2.42,1.16-1.53,2.07-3.69,2.63-6.26,.59-2.69,.82-5.87,1.04-8.95,.2-2.79,.39-5.42,.84-7.36,.74-3.18,2.23-4.47,3.12-5.24,.21-.18,.4-.34,.58-.54,.26-.29,.57-.7,.52-1.02-.04-.29-.39-.54-.67-.7-.58-.33-1.77-.55-3.56-.65-2.45-.13-5.61-.05-8.44,.22-2.8,.27-5.29,.71-7.38,1.3-2.39,.68-4.66,1.67-6.95,3.02-1.94,1.15-3.57,2.38-5.04,3.54-1.52,1.2-2.64,2.13-3.5,3.11-.99,1.12-1.58,2.24-1.88,3.52-.13,.56-.2,1.18-.22,1.82v.27l-.24,.14c-1.92,1.2-4.04,2.48-6.61,3.75,.09,.28,.18,.55,.26,.83,2.5-1.23,4.49-2.42,5.96-3.32l.65-.4,.11,.76c.04,.28,.09,.57,.15,.85,.35,1.73,1,3.54,1.95,5.4,.98,1.92,2.26,3.87,3.82,5.8,1.55,1.93,3.31,3.75,5.23,5.42,2.07,1.8,4.28,3.4,6.57,4.74,2.29,1.34,4.62,2.4,6.93,3.15,.75,.24,1.54,.47,2.42,.7l.29,.07,.07,.29c.32,1.25,1.19,2.65,2.59,4.16,1.59,1.72,3.88,3.6,6.63,5.45,2.37,1.59,4.72,2.91,7.17,4.03,1.42,.65,2.85,1.22,4.38,1.75l.12,.04,.09,.1c1.49,1.67,2.99,3.32,4.33,4.75,1.75,1.87,3.62,3.81,5.43,5.28,1.84,1.5,3.52,2.45,5.28,3,1.68,.52,3.46,.68,5.35,.85,2.15,.19,4.58,.4,7.01,1.24,2.74,.94,5.67,2.72,8.5,4.44,1.78,1.08,3.61,2.2,5.45,3.12,2.01,1.01,4.11,1.83,6.06,2.36,2.02,.55,3.78,.75,4.72,.53,1.12-.26,1.34-.72,1.01-2.13-.09-.37-.2-.73-.32-1.14-.19-.64-.41-1.34-.58-2.13-.18-.86-.31-1.82-.45-2.83-.33-2.46-.67-4.95-1.74-6.67-.76-1.21-1.89-2.04-3.56-2.62-1.54-.53-3.45-.81-5.85-1.08-.66-.07-1.65-.18-2.69-.28-4.28-.44-9.6-.98-14.52-2.29-.72-.19-1.44-.4-2.15-.63l-2.3-.73,2.4-.24c1.41-.14,2.8-.36,4.15-.65,4.91-1.07,9.76-3.21,14.04-5.1,2.36-1.04,4.58-2.02,6.41-2.63,1.47-.49,2.65-.73,3.66-.73,.8,0,1.49,.15,2.12,.46,1.5,.73,2.78,2.4,4.13,5.41,1.17,2.59,2.4,6.23,3.71,10.09,1.82,5.35,3.86,11.37,6.41,16.82,2.17,4.65,4.73,8.93,7.6,12.73,2.88,3.82,6.01,7.06,9.31,9.64,3.1,2.43,6.38,4.32,10.04,5.77,3.22,1.28,6.64,2.18,10.44,2.76,3.47,.52,7.09,.73,10.2,.59,3.17-.15,5.68-.64,7.26-1.42,.53-.26,.98-.57,1.34-.92,.61-.59,.94-1.27,1-2.07,.06-.73-.13-1.53-.55-2.39-.47-.94-1.22-1.95-2.24-3-1.26-1.29-2.88-2.61-4.61-4.02-2.57-2.09-5.47-4.44-7.52-7.04-1.88-2.39-3.1-5.04-4.39-7.84-1.03-2.23-2.09-4.54-3.54-6.83-2.24-3.54-5.38-7.02-7.9-9.81-1.18-1.3-2.16-2.39-2.84-3.25q-1.35-1.7-1.13-2.04t1.94-.05c.3,.04,.7,.11,1.13,.18,2.64,.44,6.25,1.04,11.04-.32,3.99-1.13,8.6-3.57,13.06-5.94l.11-.06c1.64-.87,3.2-1.7,4.65-2.41,2.86-1.41,5.13-2.32,7.38-2.94,2.36-.65,4.85-1.02,7.83-1.16,1.31-.06,2.78-.08,4.2-.1,5.24-.08,11.19-.16,15.49-2.26,2.84-1.38,4.68-3.5,5.73-5.02,1.79-2.62,2.44-5.27,2.28-6.74-.17-1.63-1.1-2.44-2.91-2.54-1.41-.07-3.43,.38-5.99,1.34-1.02,.39-2.12,.85-3.27,1.33-4.3,1.81-9.64,4.06-17.08,5.02-4.42,.57-9.68,.68-14.76,.79-6.05,.13-12.27,.27-17.57,1.12-4.54,.73-8.6,2.02-12.07,3.81-3.47,1.8-6.31,4.12-8.21,6.73-1.75,2.39-2.69,5-2.79,7.74-.1,2.69,.59,5.58,2.07,8.59,1.94,3.95,5.2,8.13,8.35,12.17,1.54,1.97,3.12,4,4.51,5.96,1.99,2.82,3.58,5.55,4.49,7.69,1.2,2.83,.96,3.38,.64,3.68-.39,.37-1.07,.32-3.36-.97-1.97-1.11-4.53-2.99-7.4-5.43-3.18-2.71-6.36-5.78-9.19-8.89-2.84-3.12-5.34-6.28-7.44-9.39-2.47-3.65-4.54-7.49-5.99-11.1-1.45-3.62-2.25-6.88-2.38-9.7-.12-2.76,.4-5.13,.87-7.23,.56-2.53,1.01-4.52,.2-6.32-.9-2.02-3.28-3.53-6.29-5.43-1.89-1.2-4.03-2.54-6.06-4.2-2.23-1.81-4.4-4.03-6.69-6.38-3.08-3.15-6.26-6.41-10.01-9.12-2.9-2.1-6.24-3.94-9.92-5.47-3.7-1.54-7.65-2.72-11.42-3.42-3.6-.66-6.47-.78-8.78-.36-2.66,.48-4.51,1.64-5.68,3.56-1.32,2.18-1.7,5.34-2.1,8.68-.3,2.52-.61,5.13-1.36,7.37-1.04,3.1-2.98,5.59-4.53,7.6-1.07,1.37-1.99,2.56-2.5,3.71-.51,1.15-.61,2.22-.32,3.37l.22,.86-.85-.25c-1.77-.53-3.55-.92-5.27-1.29-.8-.17-1.56-.34-2.31-.51l-.43-.1,.05-.44c.2-1.73,1.74-3.33,3.38-5.02,.75-.78,1.53-1.59,2.25-2.47,1.33-1.63,2.42-3.48,3.25-5.52,.82-2.03,1.4-4.28,1.71-6.7,.52-4.04,.34-8.63,.2-12.32v-.2c-.03-.68-.06-1.33-.08-1.95-.05-1.8-.05-3.22,.16-4.29,.19-.98,.57-1.67,1.2-2.17,.59-.47,1.46-.85,2.58-1.14,1.17-.3,2.57-.49,4.17-.55,1.33-.06,2.71-.02,4.19,.11,1.46,.13,3.03,.35,4.94,.7,1.45,.26,3.21,.63,5.09,1.01l2.28,.47,.09,.27c.05,.14,.14,.28,.28,.4,.57,.54,2.25,1.16,4.37,1.96,2,.75,4.5,1.68,7.18,2.93,2.95,1.37,5.89,3,8.74,4.86,2.84,1.85,5.52,3.88,7.97,6.03,2.91,2.56,5.61,5.39,8.21,8.12,2.1,2.21,4.07,4.28,6.01,6.05,2.38,2.17,4.47,3.65,6.57,4.64,2.37,1.12,4.87,1.68,7.65,1.7,.05,0,.1,0,.16,0,4.11,0,9.02-1.12,14.69-2.42,2.01-.46,4.28-.98,6.68-1.48,4.92-1.02,9.3-1.69,13.41-2.07,5.15-.47,9.9-.47,14.52-.02,2.79,.27,5.55,.72,8.47,1.19,7.5,1.21,15.24,2.46,23.72,.82,5.42-1.05,11.02-3.25,16.94-5.58,6.84-2.69,13.88-5.46,21.02-6.57,4.02-.62,8.25-.76,12.91-.41l-.05-.86c-4.67-.34-8.92-.2-12.98,.43ZM77.2,2.98c.54,0,1.12-.01,1.73,0,3.39,.01,7.35,.2,11.15,.53,3.7,.32,7.08,.76,9.78,1.27,3.17,.6,5.78,1.36,7.97,2.33,2.12,.93,3.81,2.02,5.17,3.35,1.98,1.93,3.24,4.35,4.47,6.69,.46,.87,.91,1.74,1.39,2.58,.66,1.15,1.38,2.26,2.01,3.23,1.27,1.95,2.45,3.78,2.92,5.35,.31,1.04,.35,2.09,.1,3.12-.19,.78-.54,1.56-1.06,2.39-.44,.7-.84,1.16-1.26,1.46-.35,.25-.73,.38-1.13,.38-.07,0-.15,0-.22-.01-.64-.07-1.32-.4-1.85-.9-.51-.48-.85-1.09-.98-1.76-.09-.5-.08-1.1-.07-1.8,.03-1.69,.07-3.78-1.32-6.48-.89-1.72-2.41-3.77-4.41-5.93-2.02-2.18-4.4-4.34-6.7-6.08-2.12-1.61-4.21-2.87-6.37-3.87-2-.93-4.11-1.65-6.62-2.26-3.21-.79-6.82-1.34-10.31-1.87-1.55-.24-3.04-.46-4.48-.7l.07-.99ZM21.92,19.78c-.42-1.52-.66-2.76-.78-3.54-.07-.43-.11-.74-.13-.97l-.06-.68,.67,.16c.08,.02,.17,.04,.26,.07,.31,.1,.6,.24,.85,.43,.31,.23,.58,.53,.79,.88,.21,.34,.34,.69,.39,1.05,.06,.37,.03,.78-.08,1.19-.11,.41-.29,.8-.53,1.11-.18,.24-.4,.44-.64,.6l-.57,.37-.18-.66ZM7.9,14.97c.26-1.13,.8-2.13,1.69-3.14,.83-.94,1.91-1.85,3.39-3.01,1.45-1.14,3.06-2.35,4.95-3.47,2.21-1.31,4.41-2.27,6.74-2.93,2.06-.59,4.5-1.02,7.23-1.28,2.77-.27,5.88-.34,8.32-.21,1.24,.07,2.11,.17,2.67,.33l.89,.25-.95,.83c-1.03,.89-2.59,2.24-3.39,5.7-.46,1.98-.65,4.66-.85,7.49-.22,3.04-.45,6.18-1.03,8.83-.54,2.45-1.39,4.5-2.47,5.92-1.03,1.36-2.22,2.08-3.43,2.08h0c-1.11,0-2.33-.58-3.63-1.73-1.34-1.19-2.67-2.92-3.74-4.88-.68-1.24-1.28-2.63-1.79-4.12l-.15-.43,.41-.19c.06-.03,.12-.06,.17-.09,.42-.23,.78-.54,1.07-.93,.31-.41,.54-.89,.68-1.41,.13-.52,.17-1.04,.09-1.53-.07-.46-.25-.94-.51-1.37-.27-.44-.61-.82-1-1.11-.33-.24-.7-.43-1.1-.56-.3-.1-.63-.16-.96-.18-.56-.04-.77-.03-.96,.55-.11,.34-.09,1,.07,2.01,.12,.74,.34,1.93,.73,3.4l.22,.82-.96-.24c-.37-.11-.7-.29-.96-.53-.25-.22-.47-.52-.64-.86-.18-.36-.3-.76-.34-1.14-.07-.57,.04-1.1,.13-1.53l.06-.31c.08-.41,.09-.68-.06-1.01-.1-.23-.32-.57-1.05-.91-.48-.23-1.47-.59-2.87-.56-1.01,.03-2.06,.27-3.11,.72-.96,.41-1.99,1.01-2.86,1.55l-.97,.6,.28-1.4ZM55.76,59.75l-.09-.1c-.54-.61-1.08-1.22-1.62-1.83-2.2-2.51-4.2-4.87-5.8-6.82-.45-.55-.86-1.06-1.24-1.55l-1.36-1.75,1.98,1c2.97,1.5,5.91,3.59,9.01,5.8,1.59,1.13,3.23,2.3,4.93,3.42,2.01,1.32,4.02,2.51,5.98,3.54l2.39,1.26-2.68-.32c-2.54-.3-5.18-.81-7.86-1.53-1.21-.32-2.4-.68-3.54-1.06l-.13-.04Zm22.8,6.04c4.99,1.33,10.35,1.88,14.65,2.32l.21,.02c.78,.08,1.53,.16,2.47,.26,2.35,.26,4.22,.54,5.67,1.04,1.47,.5,2.46,1.22,3.1,2.26,.98,1.56,1.3,3.97,1.61,6.29,.14,1.05,.27,2.05,.46,2.94,.18,.87,.41,1.61,.59,2.21,.14,.45,.25,.81,.31,1.08,.07,.29,.22,.96-.36,1.1-.22,.05-.49,.08-.77,.08-1.13,0-2.63-.35-3.53-.6-1.91-.52-3.95-1.31-5.9-2.29-1.74-.88-3.59-2-5.39-3.09-2.86-1.74-5.82-3.54-8.66-4.51-2.54-.87-4.92-1.08-7.22-1.28-1.84-.16-3.58-.32-5.17-.81-1.66-.51-3.25-1.42-4.99-2.84-1.77-1.44-3.61-3.35-5.34-5.2-.72-.77-1.46-1.58-2.23-2.42l-1.16-1.28,2.28,.62c3.52,.94,6.98,1.54,10.28,1.77,.83,.06,1.66,.09,2.47,.11l.18,.04c2.12,.89,4.28,1.63,6.42,2.2Zm-33.76-23.44c.47-1.05,1.36-2.2,2.39-3.53,1.69-2.17,3.6-4.63,4.68-7.86,.77-2.31,1.09-4.97,1.4-7.54,.39-3.24,.75-6.3,1.99-8.33,1.01-1.67,2.73-2.73,5.09-3.16,2.21-.4,4.99-.28,8.48,.36,3.72,.68,7.61,1.85,11.25,3.36,3.63,1.51,6.91,3.32,9.76,5.38,3.68,2.66,6.83,5.89,9.89,9.01,2.33,2.39,4.5,4.6,6.77,6.45,2.12,1.72,4.25,3.07,6.14,4.26,2.9,1.83,5.18,3.28,5.98,5.05,.69,1.54,.25,3.51-.26,5.78-.48,2.15-1.02,4.58-.89,7.46,.13,2.92,.95,6.28,2.44,9.98,1.46,3.65,3.56,7.54,6.08,11.26,2.12,3.14,4.65,6.33,7.52,9.48,2.87,3.16,6.07,6.26,9.27,8.98,2.91,2.47,5.51,4.38,7.53,5.52,2.11,1.19,3.66,1.5,4.36,.85,.7-.65,.55-2.34-.43-4.64-.94-2.2-2.56-4.99-4.58-7.85-1.33-1.89-2.85-3.84-4.47-5.91l-.06-.08c-3.13-4.01-6.37-8.16-8.27-12.03-1.41-2.88-2.08-5.64-1.98-8.19,.1-2.57,.98-5.02,2.63-7.27,1.82-2.49,4.56-4.72,7.92-6.47,3.4-1.76,7.37-3.01,11.81-3.73,5.25-.85,11.45-.98,17.45-1.11,5.37-.12,10.42-.22,14.85-.79,7.56-.97,12.97-3.25,17.31-5.08,1.17-.49,2.24-.94,3.24-1.32,2.48-.93,4.32-1.37,5.65-1.28,1.67,.09,2.03,1.15,2.09,1.77,.17,1.6-.67,4.03-2.14,6.17-.99,1.44-2.72,3.43-5.39,4.74-4.12,2.01-9.97,2.1-15.13,2.17-1.49,.02-2.88,.04-4.24,.11-3.05,.15-5.59,.53-8.01,1.19-2.31,.64-4.63,1.56-7.53,2.99-1.48,.73-3.03,1.55-4.68,2.43l-.09,.05c-4.43,2.35-8.99,4.77-12.9,5.88-4.6,1.3-8.25,.7-10.67,.3-.4-.07-.75-.12-1.14-.18-1.58-.22-2.43-.09-2.77,.42-.38,.57,0,1.6,1.16,3.06,.7,.89,1.76,2.05,2.87,3.29,2.5,2.77,5.61,6.22,7.82,9.7,1.43,2.25,2.47,4.52,3.48,6.71,1.32,2.87,2.56,5.56,4.5,8.03,2.11,2.68,5.05,5.06,7.64,7.17,1.72,1.4,3.33,2.71,4.54,3.95,.96,.98,1.66,1.92,2.08,2.78,.36,.72,.51,1.38,.47,1.95-.04,.57-.29,1.08-.74,1.52-.29,.28-.67,.54-1.12,.76-1.49,.74-3.88,1.2-6.93,1.34-.64,.03-1.31,.04-1.98,.04-2.56,0-5.31-.21-8.06-.63-3.74-.56-7.09-1.45-10.25-2.7-3.52-1.4-6.82-3.3-9.82-5.65-3.24-2.54-6.32-5.73-9.15-9.48-2.83-3.75-5.36-7.99-7.5-12.58-2.53-5.41-4.57-11.42-6.37-16.71-1.39-4.09-2.57-7.56-3.75-10.19-1.44-3.21-2.84-5-4.54-5.83-1.64-.79-3.56-.73-6.42,.23-1.88,.63-4.11,1.61-6.48,2.66-4.25,1.88-9.06,4-13.88,5.05-2.65,.58-5.45,.86-8.37,.84l-.19-.04c-.67-.29-1.34-.59-2.01-.9-2.68-1.27-5.32-2.77-8.08-4.58-1.65-1.08-3.3-2.25-4.89-3.39-3.57-2.54-6.92-4.92-10.38-6.46-.49-.22-.97-.42-1.46-.6l-.18-.07-.09-.17c-.06-.12-.12-.25-.17-.37-.6-1.35-.62-2.55-.08-3.77Zm-7.22,3.16c2.22,.48,4.52,.99,6.79,1.78l.17,.06,.09,.16c.69,1.17,1.68,2.45,2.95,4.02,1.42,1.74,3.18,3.83,5.11,6.04l1.43,1.64-2-.86c-.34-.15-.68-.3-1.01-.45-2.4-1.1-4.7-2.39-7.05-3.97-2.7-1.81-4.94-3.65-6.48-5.31-.9-.98-1.57-1.89-1.98-2.72l-.47-.94,2.44,.54Z"/>
</svg>

There are two options.
The "line" should be a solid path with a stroke. In that case you can animate the stroke-dasharray.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 10">
<path d="M 5 5 C 28 0 18 12 45 5" stroke="orange" stroke-width="1"
fill="none" stroke-dasharray="0 10" pathLength="10">
<animate attributeName="stroke-dasharray" values="0 10;10 10"
dur="5s" fill="freeze" />
</path>
</svg>
The "line" should be masked with one or more paths. This is the solution for your SVG as it is now. The mask is animated so that it "covers" the line. The only challenge is when the line overlaps itself. In that case there have to be more path animations timed in the mask. You can read more about it in a tutorial like this: SVG Calligraphy Handwriting Animation.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 10">
<defs>
<mask id="m1">
<path d="M 5 5 C 28 0 18 12 45 5" stroke="white"
stroke-width="2" fill="none" stroke-dasharray="0 10"
pathLength="10">
<animate attributeName="stroke-dasharray"
values="0 10;10 10" dur="5s" fill="freeze" />
</path>
</mask>
</defs>
<path d="M 6 5 C 28 1 22 12 44 5 A 4 1 0 0 1 44 6 C 19 12 28 1 6 5.5 A 4 1 0 0 1 6 5"
fill="orange" mask="url(#m1)" />
</svg>

How to animate the rotation of a specific element on its own axis in an SVG (SVG animation tag only)?

I want to animate the two flags, rotate them a little from left to right (or right to left), but I want to do it on their own axis, I don't know how to do it, this is the result I got with the right flag:
(I don't know much but I have been investigating how to make animations with svg, I know that rotate receives the degrees, the x and y position, but I can't understand clearly.
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
<g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
<g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">
<!-- How can I rotate it on its own axis -->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="9s"
repeatCount="indefinite"
/>
<path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
fill="#999" />
<rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
fill="rgba(92,92,92,0.77)" />
</g>
</g>
<g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
<path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(208,191,184,0.35)" />
<rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(53,53,53,0.77)" />
</g>
</g>
<circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
fill="rgba(208,191,184,0.35)" opacity="0.83" />
</g>
</svg>
The file was exported from adobe XD and I add the animation tag.

I always suggest that when you are creating svgs to use on the web you better create them in Inkscape as it is a Native svg editor and produces a clearer and cleanest code.
Now the good stuff:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="864" height="864" viewBox="0 0 864 864" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="aa.svg">
<path style="opacity:0.82999998" d="M 864,432 A 432,432 0 0 1 432,864 432,432 0 0 1 0,432 432,432 0 0 1 432,0 432,432 0 0 1 864,432 Z" id="Elipse_1"/>
<g inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="M 450.37451,356.87985 368.72733,776.91812"/>
<path d="M 478.9346,173.03462 792.41135,233.96833 754.96528,426.61167 441.48853,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
<g inkscape:transform-center-y="42.976369" inkscape:transform-center-x="148.56932">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="m 413.62551,356.87985 81.64718,420.03827"/>
<path d="M 385.06542,173.03462 71.588665,233.96833 109.03474,426.61167 422.51149,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="5 432 432" to="-5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
</svg>
Basically you have to set each flag's group rotation center to the background circle's rotation center. In Inkscape it is an easy task and I think that Illustrator should make it easy too.
In this case the flag's rotation center is inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369", what basically means that the original flag's group rotation center is been translated -148.56934px on the x axis and 42.976369px on the y axis to make it coincide with the circle's rotation center.
Then let's add the animation. As the circle's with and height coincide with the viewbox width and height, which is 864px, you just have to calculate the half, in this case it's 432px, which places it at 432px in both axis. This is the animation itself: <animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" /> EXPLANATION: You set 432 as the flag's animation rotating center in both axis on the from, stablish -5 degrees and 5 degrees with the same rotation center to the to, set a duration in seconds and to repeatCount you can stablish a number to state the number of repetitions or indefinite to loop forever. The result is that the flag will rotate in its center from -5 degrees to 5 degrees in 0.5 seconds and will do it forever.
For the other flag just copy and paste the same animation but interchange the values of the rotation degrees to make the second flag rotate in the other direction.
And that's it, hope you understood. If any doubt, just add a comment.

SVG - animateMotion does not work with USE element in Firefox

The following code is extracted from some produced by Tesla Powerwall gateway. The expected behaviour is that a green circle will traverse a path, and this is what Chrome shows. Under Firefox (66.0.5 in my case) it just sits at the left of the screen doing nothing.
Should it work under Firefox, and this is a bug in same, of is there something missing/wrong that I can tell Tesla about in the hope that they might get round to fixing it, even though they say they don't support Firefox?
Thanks, Sylvia.
<html>
<body bgcolor="#000000">
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>
</body>
</html>

This is a bug from Firefox, the code is fine.
I opened an issue here, note that it is a regression, so hopefully, it will get fixed quickly.
The gist of the issue is that Firefox quite recently modified <use> element's behavior so that they set their cloned content in the Shadow-DOM of the <use>, like the specs now ask to. Seems that they broke something while doing so.
For the time being, if you ever need a workaround, well... don't use an <use>...
Fixed in today's nightly 68.

Firefox supports (at least in this example) animation via animate elements in use elements but not the animateMotion element. You'll want to tweak the values array to get close to the behavior of the arc in the path, but it's possible.
So something like this works in FF.
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s" fill="freeze"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s" fill="freeze"/>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s"/>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>

Ellipse not working properly in SVG masks

While I am absolutely sure this is something I'm missing, I have a problem with SVG masks.
I have an SVG of a simple padlock icon (link to JSFiddle below) that worked fine before, but now the ellipse part of the keyhole is not working. I have the fill set to black in the mask.
I have tried a bunch of things, including changing the entire bottom part to a path (it didn't look right), changing the mask to a clip path (opposite of what I wanted) and even swapping the ellipse and the polygon. Nothing worked.
Here's a JSFiddle of the icon.
Code:
<svg viewBox="0 0 32 32" version="1.1" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="lock-mask">
<rect x="0" y="0" width="32" height="32" fill="white" />
<ellipse cx="16" cy="19" rx="3" ry="2" fill="black" />
<polygon points="15,20 14,26 18,26 17,20" fill="black" />
</mask>
</defs>
<rect x="2" y="13" width="28" height="16" rx="2" ry="2" mask="url(#lock-mask)" />
<path d="M6.5 14 V 9 A 10 6 0 0 1 25.5 9 V 14 H 22.5 V 9 A 8 5 0 0 0 9.5 9 V 14 Z" />
</svg>

Resources