tvsjke

htmlbook.ru/css3-na-primerakh/radialnyi-gradient

Дугу можно так нарисовать

<![CDATA[
    .str0 {stroke:#2B2A29;stroke-width:1.19176}
    .fil1 {fill:none}
]]>

<path class="fil1 str0" d="M429 191c-40,71 -117,115 -200,115 -126,0 -228,-98 -228,-220 0,-4 0,-8 0,-12"/>

Или рисуйте круг и кладите его под серую плашку

P.S. Можно воспользоваться векторным редактором

Посмотрите в сторону d3 например. https://d3js.org/

В SVG можно вставить foreignObject – в частности, html, где перенос строк решается просто.

Если вы новичок в SVG, для скорейшего получения результата лучше воспользоваться библиотекой, например, D3js. Вот пример, как вставлять в SVG кусок HTML контента в D3js. И другой подход – пример автоматической генерации SVG-элементов под каждую строку текста.

В вашем случае, как я понял, график не динамический, раз нарисовали и забыли. В таком случае можно поручить отрисовать его в векторе вашему дизайнеру, и вывести статичный SVG код. Вы с ним легко разберётесь и навесите логику при наведении. Например, Adobe Illustrator умеет экспортировать графику в SVG.

Кроме того, раз лейблы статичные, можно просто отрисовать по одному элементу <text> на каждую из строк.

Через svg это можно сделать, вроде

Ну, давайте по-порядку разберём!
1. Одностраничник - делается под конкретный продукт или услугу.
2. Шаблон - создаётся также уникальным, исходя направления продукта/услуги и ЦА.
3. Форма сбора контактных данных на одностраничнике - прошлый век! Никто не будет оставлять данные. Для этого есть форма: "Отправить запрос" и в ней поле, НЕОБЯЗАТЕЛЬНОЕ К ЗАПОЛНЕНИЮ: "Прошу ответить мне на e-mail:".
4. Цель одностраничника - должна быть явно задана: реклама товара, продажа, выявление интереса к продукту, приоритетная первичная регистрация на сервис в альфа/бета-тесте и т.д. Если, что-то из перечисленного будет идти вместе, - ТОЛКУ НЕ БУДЕТ!
5. Конверсия - самая интересная тема, а уж тем более, на лендинге. Здесь многое зависит от того, кто создаёт Вам шаблон и корректно ли он располагает визуальные смысловые блоки и элементы пользовательского интерфейса страницы. Т.е., нужно, чтобы это делал именно UX-дизайнер, а не простой дизайнер! Т.к. он учитывает время просмотра страницы до десятых долей секунды, направление взгляда, движение мышки, скорость понимания информации, простоту изложения информации для понимания (пункты списка, схемы, таблицы, анимацию, видео-ролики и прочее).
6. Удобство управления лендингом и структурой страницы, скорость загрузки: однозначно SPA + AJAX. Вёрстка - делается так: общий дизайн и блоки наполнения В ОТДЕЛЬНЫХ HTML-файлах, затем берём includeHTML и ставим все нужные блоки друг за другом в едином HTML, которые нам понадобятся. Затем, комментируя/переставляя строки в головном HTML-файле мы легко можем менять расположение блоков (секций лендинга).
7. Все popup-формы, разметки секций и прочее (т.е., доп. разметку для доп.блоков) - грузим через тот же includeHTML из рядом лежащих файлов, например, "vote-form.html" или "feedback-form.html", где будет нужный функционал. Т.е. Вы сможете легко менять эти файлы, чтобы получать нужную (модифицированную/новую) форму.
8. Основной список секций по лендингу можно получить здесь (Создать сайт с "нуля" -> выбрав в списке типов сайта: лендинг).
9. SEO и индексация - JSON-LD, META-тэги (включая данные для соц. сетей, fb:* и т.д.), разметка всей вёрстки - строго HTML5!

Можно осуществить через background-image и transition.
Как то так: codepen.io/anon/pen/WREOZO
UPD: Сделал смену по клику, но разобраться просто)

Анимация перехода одного изображения в другое делается только на двух загруженных изображениях. В этом суть перехода fade. Вам обязательно нужно загруженное второе изображение.

дать всем попапам один класс. к примеру .popups и закрывать его при открытии.

$('#img').on('click', function() {
        e.stopPropagation();
         $('.popups').hide();
        $('#popup').toggle();
        $('#img').toggleClass('active');
});

gif

Так черту сделайте в основном элементе, а вот текст напишите в :before и :after

Интересно почему у вас при компиляции запускается какой-то левый файл... Вы точно не пытаетесь запустить собранное приложение из студии?

Флеш (твитч.тв) и игры очень прожорливы, так что ничего удивительного что на макбуке они так сильно жрут и греют систему.
Но в целом в этом нет ничего страшного, при перегреве просто начнется троттлинг у процессора и упадет производительность на некоторое время.