How to animate SVG path polymorphing circle images?

Viewed 13

SVG animation - for example

https://theplusaddons.com/widgets/morphing-sections/

How can I do such animation?

<div class="polymorphing">
        <svg viewBox="0 0 200 200" height="600" width="600" xmlns="http://www.w3.org/2000/svg">
            <clipPath id="myClip">
              <path fill="#FF0066"
                d="M42.3,-45.7C56.3,-38.7,70.1,-26.8,73.3,-12.4C76.5,2,69.1,18.8,58.1,29.6C47.1,40.4,32.7,45.1,17.7,51.9C2.8,58.7,-12.5,67.6,-28.1,66.5C-43.7,65.4,-59.5,54.5,-69.8,39.1C-80.2,23.7,-85.1,3.9,-80.7,-13.1C-76.4,-30.2,-62.9,-44.5,-47.9,-51.3C-32.9,-58.1,-16.4,-57.5,-1.1,-56.1C14.2,-54.8,28.4,-52.7,42.3,-45.7Z"
                transform="translate(100 100)" />
                
            </clipPath>

            <g clip-path="url(#myClip)">
                <image class="morph-image"
                    xlink:href="https://theplusaddons.com/wp-content/uploads/2019/04/digitalagency3.jpg" x="0" y="0"
                    height="100%" width="100%">
                </image>
            </g>
        </svg>
    </div>
0 Answers
Related