SVG Path Animation Technique

<h2>SVG PATH ANIMATION TECHNIQUE BY MUTHUJOO</h2>
<svg width="350" height="350" viewBox="0 0 650 650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M332.111,76.319c32.873-17.779,67.738-31.504,120-28
c52.887,3.546,94.762,27.761,125,58c36.121,36.121,62.863,85.466,58,158c-6.156,91.819-69.631,135.63-123,189
c-52.328,52.328-106.293,108.563-155,154c0-17.583,0-36.523,0-57c0-18.318-3.891-40.853,0-57c2.25-9.336,18.127-20.127,27-29
c27.293-27.293,56.373-57.373,82-83c36.498-36.498,86-69.645,86-134c0-35.728-14.639-62.64-34-82
c-18.09-18.091-45.916-33.811-81-34c-52.705-0.285-75.307,27.423-105,54c-26.496-27.731-51.458-54-102-54
c-35.928,0-64.024,16.024-82,34c-18.325,18.325-33.812,46.2-34,81c-0.315,58.389,39.443,89.443,70,120
c22.377,22.377,47.291,46.291,72,71c11.523,11.523,24.678,17.561,22,39c-3.75,1.218-8.817-4.817-13-9
c-29.16-29.16-58.458-59.458-89-90c-33.922-33.922-75.656-65.306-76-129c-0.409-75.724,57.768-130.792,130-131
c44.496-0.128,78.895,22.216,102,48c25.281-23.252,55.701-47.864,103-48c71.598-0.206,130.602,55.103,131,129
c0.381,70.266-47.914,102.914-84,139c-38.756,38.757-73.674,74.173-111,111c0,21.667,0,43.333,0,65c4.086,1.1,5.918-3.918,8-6
c41.555-41.555,85.283-84.282,128-127c50.975-50.975,112.209-94.068,106-194c-2.969-47.812-23.49-83.972-51-112
c-26.221-26.717-65.123-48.661-111-52c-53.258-3.876-86.703,12.927-119,32c-30.095-20.103-64.386-35.46-116-32
c-46.421,3.112-85.385,24.882-112,52c-31.165,31.753-55.219,76.073-51,139c5.932,88.475,70.23,130.23,122,182
c50.763,50.764,103.796,106.065,151,150c0-50.666,0-101.334,0-152c-36.924-39.022-77.903-79.383-118-119
c-19.186-18.956-42.72-34.978-46-67c-4.563-44.541,30.361-80.675,76-76c46.931,4.807,62.479,50.05,94,73
c31.699-18.96,48.287-67.775,95-73c52.455-5.867,96.135,48.562,70,100c-5.896,11.608-17.771,22.661-28,33
c-29.418,29.735-64.137,61.604-92,91c-46.037-44.579-91.944-91.944-139-139c-2.774-2.774-19.911-15.089-13-22
c7.638-7.638,25.629,16.629,29,20c26.858,26.858,52.85,52.221,79,78c25.973-24.66,52.082-52.081,79-79
c5.072-5.072,21.756-26.245,29-19c7.869,7.869-16.168,25.168-20,29c-26.039,26.039-51.943,53.402-78,78
c9.586,12.747,21.748,22.919,33,34c17.213-15.058,36.031-34.031,55-53c17.697-17.697,40.844-35.727,52-55
c25.305-43.711-19.525-101.393-71-77c-16.143,7.65-27.33,23.331-40,36c-12.885,12.885-26.205,24.751-38,38
c-15.194-11.885-26.415-25.415-39-38c-11.801-11.801-24.446-28.32-40-36c-49.518-24.45-97.787,30.281-72,76
c8.545,15.15,25.014,29.014,39,43c34.067,34.067,66.883,65.883,103,102c4.633,4.632,17.947,19.865,24,9
c4.166-7.477-9.443-18.443-15-24c-33.931-33.931-66.711-66.711-101-101c-15.783-15.783-45.91-31.721-40-64
c3.583-19.571,25.49-34.981,50-27c18.754,6.107,30.813,25.813,46,41c15.448,15.448,30.573,29.112,43,43
c14.926-11.637,28.684-27.682,44-43c14.139-14.139,29.375-35.138,46-41c31.018-10.937,59.545,15.621,49,48
c-6.457,19.83-34.209,39.21-49,54c-12.699,12.699-24.771,26.056-38,39c-3.668,3.591-7.684,9.623-13,2
c-7.668-5.132,0.695-9.695,4-13c21.072-21.072,39.799-40.799,62-63c7.816-7.816,20.465-16.304,22-27
c2.104-14.645-7.516-30.202-27-28c-11.168,1.262-19.111,13.112-27,21c-22.625,22.625-49.855,48.404-71,71
c-24.63-21.348-47.616-46.617-72-71c-5.828-5.828-17.964-19.549-26-21c-22.045-3.982-31.196,12.699-29,28
c1.983,13.815,30.601,36.601,40,46c36.635,36.635,69.015,68.015,108,107c3.379,3.378,17.484,21.85,21,22
c2.557,0.109,13.846-12.845,17-16c26.854-26.854,52.793-53.792,80-81c17.777-17.777,39.363-34.747,46-62
c19.326-79.35-70.07-134.355-133-90c-20.875,14.714-31.783,34.543-54,51c-32.07-26.009-48.916-71.167-108-67
c-61.329,4.325-103.253,77.891-63,135c8.895,12.619,23.882,24.883,37,38c32.147,32.147,60.531,61.53,93,94
c6.458,6.459,16.808,14.654,18,19c3.861,14.076,0,35.386,0,52c0,18.536,0,35.481,0,51c-3.405,0.864-6.204-3.242-8-5
c-40.844-39.97-82.517-83.518-124-125c-50.383-50.383-113.616-89.32-107-188c2.823-42.107,21.466-74.466,46-99
c23.706-23.706,57.457-43.877,98-47c54.139-4.17,88.724,13.216,118,36c31.416-21.394,64.18-40.3,120-36
c40.523,3.122,75.352,24.351,98,47c28.336,28.335,50.238,68.831,46,128c-4.846,67.652-50.498,103.498-91,144
c-40.744,40.745-80.197,80.379-117,115c-3.418-23.445,12.42-31.42,26-45c27.191-27.19,55.424-55.423,82-82
c41.15-41.15,92.979-78.208,86-162c-3.189-38.316-21.107-66.107-43-88c-21.211-21.212-49.828-40.06-88-43
c-55.426-4.27-88.443,14.757-117,41c-30.378-24.145-61.166-45.455-119-41c-75.156,5.79-138.178,74.395-131,160
c5.707,68.054,54.15,101.15,94,141c41.354,41.354,78.522,80.805,117,116c-3.553-18.248,4.724-43.396,0-63
c-2.071-8.593-14.953-16.953-23-25c-23.272-23.272-48.063-49.063-70-71c-31.859-31.859-74.261-57.82-71-117
c1.645-29.858,15.562-52.667,32-68c15.961-14.889,40.785-27.775,73-26c49.112,2.706,67.563,33.84,96,61
c31.197-25.585,47.646-58.226,98-61c61.424-3.384,107.023,43.116,105,103c-1.018,30.136-15.902,53.904-35,73
c-45.25,45.25-86.373,86.373-134,134c-7.578,7.579-23.68,18.542-26,27c-2.566,9.356,0,25.371,0,38c0,25.551,0,50.215,0,76
c0,11.389,2.9,24.913-5,32c-7.988-2.175-15.176-11.176-22-18c-47.7-47.7-98.538-98.538-147-147c-27.93-27.93-57.554-55.112-84-84
c-31.494-34.4-55.176-83.773-51-151c3.235-52.079,26.023-92.023,57-123c32.042-32.042,71.518-55.917,124-60
C263.906,44.289,300.971,57.553,332.111,76.319z" fill="#000" id="theMotionPath1"/>
<circle cx="" cy="" r="20" stroke="black" stroke-width="4" fill="yellow">
<mpath xlink:href="#theMotionPath1"/>
</animateMotion>
</circle>
</svg>
<svg width="350" height="350" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M120,4 V112 H4 V12 H48 V24 H16 V100 H108 V16 H72 V20 H104 V96 H20 V28 H52 V8 L56,4 V32 H24 V92 H100 V24 H68 V12 H112 V104 H12 V20 H44 V16 H8 V108 H116 V8 H64
V28 H96 V88 H28 V36 H56 V60 H68 V44 H80 V72 H44 V48 H40 V76 H84 V40 H64 V52 L60,56 V36 H88 V80 H36 V44 H48 V68 H76 V48 H72 V64 H52 V40 H32 V84 H92 V32 H60 V4Z"
fill="#000" id="theMotionPath"/>
<circle cx="" cy="" r="4" stroke="black" stroke-width="1" fill="yellow">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>
<svg width="240" height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="#000" stroke-width="2" fill="none" id="theMotionPath2"/>
<circle cx="" cy="" r="5" stroke="black" stroke-width="1" fill="yellow">
<mpath xlink:href="#theMotionPath2"/>
</animateMotion>
</circle>
</svg>

Tagged in:

• svg animatio
• svg path animation
• svg animation technique
• svg transform tec