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

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>

Related

Unexpected actual path when using offset-path

I'm failing to understand why the observed path the shape is moving against doesn't match the path outlined by an actual circle shape drawn - despite them both having the same value for path: inside the d attributes for circle, and inside the offset-path attribute by the line.
What am I doing wrong?
Does this have something to do with the coordinate system? The expectation is such that the "line" path touches the circle and, if virtually extended, "comes out of the circle's center" (sorry, I'm not an native english speaker and not sure how to express this in proper "math/geometry english").
For context, I am trying to learn how SVG element positioning and animations work. In particular, currently I find margin-offset: path("...") to be quite promising when moving a shape, hoping that I can re-use the value of path for both the moving shape, and the path. However, I am apparently failing to do this even with the simplest shape possible, e.g. a <path> that represents a straight line.
The full HTML of my (currently failing) experiment can be see below:
body {
justify-content: center
}
.track {
stroke: #ccc
}
.marker {
offset-path: path('M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
animation: move 3s linear infinite;
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<svg viewbox="0,0 25,25" width="200px" height="200px">
<!-- the path to be animated along -->
<path
class="track"
fill="none"
stroke-width="0.25"
d="M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
/>
<!-- the mover -->
<path d="M1,1 L1,5" class="marker" stroke="red" stroke-width=0.25></path>
</svg>

Your moving/aligned element currently has the starting coordinates x:1 y:1
So these values will be added as offsets to the offset-path aligned coordinates (closely related to your previous question).
Just change your moving path's d attribute to M0 0 l0 4 or M0 0 v4 (using vertical shorthand)
body {
justify-content: center;
}
.track {
stroke: #ccc;
}
.marker2,
.marker {
offset-path: path("M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
animation: move 3s linear infinite;
}
.marker2{
transform: translateY(-4px);
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<svg viewBox="0 0 25 25" width="200px" height="200px">
<!-- the path to be animated along -->
<path class="track" fill="none" stroke-width="0.25" d="M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0" />
<!-- the mover -->
<path d="M0 0 v4" class="marker" stroke="red" stroke-width=0.25></path>
</svg>
<svg viewBox="0 0 25 25" width="200px" height="200px">
<!-- the path to be animated along -->
<path class="track" fill="none" stroke-width="0.25" d="M 15 15 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0" />
<!-- the mover -->
<path d="M0 0 v4" class="marker2" stroke="red" stroke-width=0.25></path>
</svg>
Convert path d attribute to use relative commands
I've changed the commands to relative commands.
This way, you can easily apply or adjust x/y offsets by changing only the M commands coordinates. Also explained in Lea Verou's article: "Utility: Convert SVG path to all-relative or all-absolute commands"
Some web apps to convert path data to relative commands
yqnn's svg-path-editor
thednp's svg PathCommander
BTW: the viewBox attribute is case sensitive – always use the "camel case" notation viewBox.

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>

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

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>

Applying shadow color using feColorMatrix tag looks dull in all the browsers, Why?

I created a drop shadow in SVG using feColorMatrix for the shadow, so its kind of blue(rgba(62, 77, 184, 0)).
<feColorMatrix result="output_0" type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.3 0 0 0 0 0.7 0 0 0 1 0"></feColorMatrix>
The outcome should be the same blue color rgba(62, 77, 184, 1).
The SVG filter seems to render the color a bit too light. Is there any way to fix that?

Your math is a bit off & you need to specify sRGB. The color matrix should be:
<feColorMatrix result="output_0" color-interpolation-filters="sRGB" type="matrix"values="0 0 0 0 0.243 0 0 0 0 0.302 0 0 0 0 0.7215 0 0 0 1 0"/>

Use color-interpolation:"sRGB" as property or CSS style for the filter/feColorMatrix tag. What is color interpolation? How it works?
I spend more time to find the reason behind this issue because When I googled it, I didn't see any clear explanation and felt nobody faced kind of issue. After the so much of hard work, I figured it out the solution so I came here to raise the question and share the answer here. Hope Someone will get help from this.

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