Home > Mobile >  Animate a SVG made only of one stroke
Animate a SVG made only of one stroke

Time:06-23

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 !

CodePudding user response:

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>

CodePudding user response:

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