Material design effect - Joining & Dividing. How to implement?

Question

css

Hello.

How can I implement such a Joining & Dividing effect on css\jquery\js?

Or are there any ready-made libraries based on Material Design with this effect on board?

Thanks

Answer 1

Poshamanit with animation, but like this: make up the final state and then push it with paddings or positioning as it should.
Well, with the action, animate the return to the initial state.
If there is content in each block, then move it to the first block, which will eventually be shared.

Answer 2

Add another svg to css\jquery\js and everything will grow together.
Like animation examples with svg:
codepen.io/suez/pen/ZGWbmE