SVG Morphing not working

[8ctopotamus]

I thought it would be cool to use react-anime to create something like this: https://tympanus.net/Development/ShapeMorphIdeas/index3.html

I tried to morph the paths by wrapping each one in and added the "d" attribute for each one respectively, but nothing happens. Any suggestions would be greatly appreciated!

Here's my code:

js

<svg className="scene" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 800">
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"
          >
            <path d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"
          >
          <path d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"
          >
          <path d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"
          >
          <path d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"
          >
          <path d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"
          >
          <path d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"
          >
          <path d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"></path>
        </Anime>
      </svg>

css

.scene {
  position: fixed;
	background: #282886;
  z-index: -10;
}

.scene g:first-child path {
	fill: #4f4fea;
}

.scene g:nth-child(2) path {
	fill: #0c27cf;
}

.scene g:nth-child(3) path {
	fill: #13269c;
}

.scene g:nth-child(4) path {
	fill: #242468;
}

.scene g:nth-child(5) path {
	fill: #2648e6;
}

.scene :nth-child(6) path {
	fill: #2c31b0;
}

.scene g:nth-child(7) path {
	fill: #262689;
}

[alaingalvan]

Yeah messing around with the d prop to make some cool animations like frame by frame stuff sounds like a pretty important use case!

Would you mind sending a CodePen our way?

[ryandunnewold]

@8ctopotamus I got something similar to this working:

const d = [
  { value: "M -88.52,-43.13 C -34.62..." }
]

<Anime
  easing="easeInOutCubic"
  duration={3000}
  d={d}
  direction='alternate'
  width={1500}
  height={1500}
  loop={true} 
>
  <path className='path' d='M -84.52,-81.13 C -94.62...' />
</Anime>

Your d prop has to be a different value than the one assigned to your actual path.

[corysimmons]

@ryandunnewold That didn't work for me. Can you post a full/barebones example? :\

Here's what I tried: https://codepen.io/corysimmons/pen/LeGaNy?editors=0010

Also, it'd be nice to pull the <svg> outside of <Anime> but that seems to break the svg all together...

It should look like this after animation is complete:

[Nifled]

It would be nice to see a full/barebones example on codepen or something. I can't seem to get it working either.

[ryandunnewold]

I'll work on putting it into a Codepen example

[Mikhail-MM]

I am having issues with triggering React-Anime animations via state change. I am conditionally rendering naked elements in their initial state -> the element with an wrapper when it is time to animate. However, when going back to the initial state, the transition back is very rough, probably because I am removing the entire Anime wrapper and re-rendering the original element, so it jumps in.

Working Example: https://codesandbox.io/embed/6lxoq1vz5r

I am having issues when I try to manually modulate the points prop in the Anime wrapper around an SVG element. The entire Polygon seems to disappear.

Error: https://codesandbox.io/s/mjv24o32rp

[jshakes]

Is there any update on this? I am having a similar problem. I can get the animation to run, but if the parent component's state changes, the Anime component disappears and I then get the error Cannot read property 'nodeType' of null (possibly the same issue as #43?)

[EricNetsch]

Update: This was fixed when adding a unique key to my Anime element:
key={11+Date.now()}

When trying this I can see the SVG path is in fact morphing but it adds a div tag around the path and messes up the SVG and creates invalid html.

Is there any way to prevent the path from being wrapped inside a div tag by anime?

I can post a codepen but it is easy to reproduce.