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