Animate a SVG made only of one stroke - animation
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>
Related
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 curve low quality (steps, edges) on MacOS Chrome
The example The SVG: <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 2000" height="2000px" width="900px"> <g transform="translate(300,50)"> <-- The curve which looks with edges in MacOS Chrome --> <path d="M-120.83544557088219 1738.5018312545567 C -118.08223960250174 1670.3356213839381 -85.72445908423663 -7.022567888738819 -4.350971392762291 -6.5264570891434355 19.999547450916797 -6.377998964552493 62.00037168873135 -6.121931993756162 82 -6 90.9998327400709 -5.9451306028097255 90.99979315194402 5.938981787787313 82 6 62.000459662346636 6.135596027139307 19.999640336539393 6.420359783756897 4.350971392762291 6.5264570891434355 -77.02215835606484 7.078163424566491 -89.52618961315629 1672.1434954260517 -96.16455442911781 1739.4981687454433 -101.16314519095648 1749.8779851769993 -117.13209354719626 1748.8816476861125 -120.83544557088219 1738.5018312545567" fill="#786CB4" stroke="none" stroke-width="0"></path> </g> </svg> I have shape-rendering, but it do different thing. How can one make curve smooth in MacOS Chrome?
svg path inside path
How i can use path inside path? </svg> <svg height="210" width="400"> <path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" > <title>test</title> <path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" > </path> </svg> In fact, this is what I want ideally: bagel Paint over part of the strip below, depending on the percentage. I work in d3
You cannot nest one path tag within another. How commented #Robert Longson just put the paths one after the other. The later path will draw on top of the earlier path. <path ..... /> <path ..... /> <svg height="210" width="400"> <path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" /> <title>test</title> <path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" /> </svg>
You cannot [1]: Allowed are only the following: Any number of the following elements, in any order: animation elements descriptive elements paint server elements clipPath, marker, mask, script, style [1] https://svgwg.org/specs/paths/#PathElement
In SVG, elements render from top to bottom: each renders on top of another. If you want one path to render over another one, put it further down: <svg height="210" width="400"> <path fill="rgb(176, 60, 178)" fill-opacity="0.4" d="M150 0 L75 200 L225 200 Z" > <title>test</title> </path> <path fill="rgb(14, 88, 228)" d="M100 0 L50 100 L125 100 Z" > </svg>
SVG path animation from lineto to cubic-bezier curve command
I am trying to animate an svg <path> element. The initial <path> element has L(lineto) commands whereas the <path> that I'm trying to animate it to has C(cubic-bezier curve) commands. I've tried animating it but it doesn't really transition between the two paths. Is something like this possible? <svg> <path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" /> <animate xlink:href="#path" attributeName="d" dur="3s" from="M 0 50 L 25 40 L 50 60 L 75 40 L 100 60 L 125 40 L 150 50" to="M 0 80 C 25 55 50 55 75 80 C 100 105 125 105 150 80" repeatCount="indefinite" /> </svg>
As you found out, path data animations need to list the exact same sequence of commands and points to work. That said, you can divide a path into as many segments as you need, and a cubic bezier can describe a straight line if its control points are positioned in a straight line. For your example to work, you need to rewrite each L segment as a C segment divide each C segment into three C segments so that the curve is unchanged Both tasks are best performed with a grafical editor like Inkscape that has appropriate tools. <svg> <path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" /> <animate xlink:href="#path" attributeName="d" dur="3s" from="M 0,50 C 12.5,45 12.5,45 25,40 37.5,50 37.5,50 50,60 62.5,50 62.5,50 75,40 87.5,50 87.5,50 100,60 112.5,50 112.5,50 125,40 137.5,45 137.5,45 150,50" to="M 0,80 C 8.33333,71.6667 16.6667,66.1111 25,63.3333 33.3333,60.5556 41.6667,60.5556 50,63.3333 58.3333,66.1111 66.6667,71.6667 75,80 83.3333,88.3333 91.6667,93.8889 100,96.6667 108.333,99.4444 116.667,99.4444 125,96.6667 133.333,93.8889 141.667,88.3333 150,80" repeatCount="indefinite" /> </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>