Можно ли такое сверстать с помощью CSS и может JS?

Может быть какой-нибудь piechart на максималках?)

Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.

Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:

Теоретически - все возможно.
По времени - долго