This is just a simple Demo of svg transition

It's not perfect, wont work on safari, but hopefully it gives you an idea of how to accomplish this design goal with svgs. The big point is that you can draw a path, and there are many stratigies for morphing from one path to another. There are js libraries to accomplish this (gsap being one of the most popular).

ideally you'd use a design tool like figma to create your svgs to satisfaction and have the hover trigger some path change using a library like gsap, but in this demo I just use the `d` css property on path svg elements to change the path and set a transition so it would "animate" the transition.

download