SVG animate path’s d attribute Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of SVG animate path’s d attribute without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Is it possible to use SVG to animate the d attribute of <path>?

I can draw both a diamond and a circle as a path made of eight bezier curves:

    <script src=""></script>
        var a = 50;

        var draw = function(b, c, d, e, f){
          return [
            'M', a, 0, 

            'C', b, c, ',', d, e, ',', f, f,
            'C', e, d, ',', c, b, ',', 0, a,

            'C', -c, b, ',', -e, d, ',', -f, f,
            'C', -d, e, ',', -b, c, ',', -a, 0,

            'C', -b, -c, ',', -d, -e, ',', -f, -f,
            'C', -e, -d, ',', -c, -b, ',', 0, -a,

            'C', c, -b, ',', e, -d, ',', f, -f,
            'C', d, -e, ',', b, -c, ',', a, 0,
          ].join(' ');

        $('#diamond').attr({ d: draw( 5*a/6,          a/6,                    2*a/3,         a/3,            a/2 ) });
        $('#circle' ).attr({ d: draw(     a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
    <svg width="200" height="200">
      <g transform="translate(100,100)">
        <path id=diamond fill="blue" stroke="black"/>
    <svg width="200" height="200">
      <g transform="translate(100,100)">
        <path id=circle fill="red" stroke="black"/>

I’d like to animate the transformation from one to the other.

I could simulate this in javascript (just by linearly interpolating the bezier curve parameters at certain times), but I want to know if there’s a way to do it with SVG.

(The circle and diamond are just an example – in reality I’d like to transition between two arbitrary solids made of the same number of bezier curves).


It’s possible. There are lots of examples of animating the d element of a path here: including animating bezier curves. You should be able to adapt one for your specific use case.

This is path15 without the arc flag animation. The large arc flag can only be 0 or 1 so animating it linearly doesn’t make a lot of sense.

<svg xmlns="" version="1.1" width="400px" height="400px" viewBox="-500 100 1500 1500">
<path id="p1"
    d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
    stroke="blue" fill="none"
    stroke-width="4" />
<animate xlink:href="#p1"
    from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
        to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
    fill="freeze" />
We are here to answer your question about SVG animate path’s d attribute - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji