CODEWITHSUNDEEP
cssreactjssvgstyled-componentssvg-animate
moshyfawn
moshyfawn

Reputation: 705

How to incorporate svg path morph animation into a React app

I can't manage to animate a smooth transition between two similar <path />'s

There's this background effect I try to manage in my React app, where you have some blobs floating around that need to deform over time. I've created two blob shapes and tried to animate them via svg <animate /> tag but it only shifts momentarily from one shape to another after set dur property. I've tried a few libraries like "react-spring" or react-something-svg (there's quite a stack of them out there) but the best I got was to have a path only morph animation with no fill or gradient properties.

Two shapes to shift between:

<svg>
 <defs>
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>
 </defs>
 <g transform="translate(-67.756 -51.842)">
  <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c1.008-6.2604 4.104-12.132 8.5366-16.666s10.166-7.7395 16.293-9.3701c12.256-3.2613 25.688-0.11296 36.296 6.8373 10.608 6.9503 18.58 17.4 24.228 28.755 5.6488 11.355 9.1245 23.653 12.182 35.961 3.0568 12.306 5.7394 24.802 6.0332 37.479 0.29383 12.677-1.9195 25.642-8.1354 36.694-3.1079 5.5261-7.1991 10.523-12.159 14.473-4.9595 3.9497-10.796 6.8358-17 8.1437s-12.77 1.0114-18.756-1.0776c-5.9861-2.089-11.361-5.9944-15.007-11.181-3.1833-4.5287-5.0021-9.9148-5.8599-15.383-0.85782-5.4687-0.79005-11.042-0.45735-16.567 0.6654-11.051 2.3656-22.3-0.18511-33.073-2.7384-11.566-10.084-21.385-16.303-31.514-3.1096-5.0645-5.9863-10.317-7.8786-15.95-1.8923-5.6336-2.7725-11.692-1.8278-17.56z" fill="url(#radialGradient827)" stroke-width="0"/>
 </g>
</svg>


<svg>
 <defs>
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>
 </defs>
 <g transform="translate(-60.376 -63.391)">
  <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0"/>
 </g>
</svg>

Here's a sandbox to play around: click here

I want to understand how to morph between two svg paths with a slow transition and having my gradient applied without using some specialized react animation library and incorporate it into my React app. All I can do for now is to morph between to unstyled shapes using quite a few libraries and to shift from one shape to another momentarily

Upvotes: 1

Views: 1276

Answers (1)

Gark Garcia
Gark Garcia

Reputation: 460

You can make the blobs preserve their final shape after the animation by specifying the fill property of the <animation> tag:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 141 231" xmlns="http://www.w3.org/2000/svg" >
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>

  <path id="blob" transform="translate(-60.376 -63.391) matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0">
    <animate 
    attributeName="path"
    to="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" 
    dur="1s"
    fill="freeze" />
  </path>
</svg>

NOTE: For the animation to work you need to ensure that both the initial and the final path have the same number of points, as detailed in here. Here's a great tool to make sure that the animation is possible.

On regards to your gradient, the browser should take care of that. You can simply apply it as you would on any other SVG file.

Avoiding JS libraries to deal with SVG animation is a great move, those tend to be bloated and messy. Stick to the official SVG specs whenever possible.

Upvotes: 0

Related Questions