Estoy tratando de crear una barra de navegación personalizada para un sitio web. La idea es crear, como un gráfico circular con las diferentes secciones del sitio web, expandiéndose al pasar el mouse, con una imagen en el fondo que forma parte del propio gráfico. Permítanme aclarar con algunas imágenes:

Y luego con el efecto de desplazamiento sobre una de las partes:

El vuelo estacionario extendió la espiral hacia el exterior y mostró la etiqueta "Inicio". Tenga en cuenta que la 'espiral' es representativa, normalmente sería un logotipo o una imagen. Mi pregunta es ¿Qué tecnología debo usar? CSS puro? ¿JS? LIENZO HTML? o SVG?

Otra cosa es la espiral en el fondo, si es una imagen, ¿cómo puedo modificarla mientras estoy flotando? ¿Necesito 're-crear' la imagen con código? como dibujos svg, etc.

Muchas gracias, cualquier idea es bienvenida.