Vai al contenuto

Realizzare un grafico a nodi con Less e SVG path

Scritto da:

carlopeluso

Oggi ho realizzato un widget per visualizzare una struttura ad albero (costituita da rami e nodi) in puro CSS ed SVG, senza l’ausilio di JS.

Vi spiego brevemente quali strumenti ho utilizzato:

  • LESS, utile per parametrizzare la “latitudine” dei rami dell’albero, tramite la funzione accoda-loop() che posiziona i link-rami uno sotto l’altro sino ad un massimo di 50 items.
  • SVG, ho utilizzato un path svg per disegnare la “curva” che lega due nodi diversi, che segue la seguente serie di punti
    M0,0 C50,0 50,100 100,100
  • I link sono posizionati in maniera assoluta (position:absolute) rispetto ad ogni nodo in modo da facitare il riuso del nodo all’interno della struttura ricorsiva.
  • Sull’HOVER vengono visualizzati dei tooltip su ogni link e viene azionata un’animazione dello “stroke-array”.

Articolo precedente

Card con animazione liquida in CSS.

Articolo successivo

"Fluence", un visual del collettivo "We are moshpit".

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *