sasha_ka

Как-то раз использовал вот этот сервис: https://formspree.io/. Работает или нет сейчас не знаю. Попробуйте, времени много не займет.

Ради интереса попробовал обойтись без position:absolute. Не получилось... А с ним получилось.

Если хотите красиво презентовать, то совершенно точно свг. Ибо можно будет классно анимировать отрисовку.

Как всегда рекомендую для этих целей использовать D3.js, который отлично умеет строить такие штуки. Причем динамически! И обновлять хоть несколько раз в секунду, например: bl.ocks.org/mbostock/4062045

Воспользовавшись HTML+CSS вы конечно сможете сверстать такое, но это будет жутко фиксированная конструкция, внести изменения в которую будет уже не реально. Тогда уж проще картинкой вставить.

Можно через canvas или svg. Второе предпочтительнее.

Круги абсолютно позиционировать - верстать обычными дивами с border-radius: 50%;
Линии - тоже дивы с абсолютным позиционированием с нужным transform(rotate(Xdeg));