Ivan Bogachev

Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

Можно использовать связку SVG+CSS:
- Берется SVG с viewbox='0 0 100 100'.
- Основная картинка вставляется в виде image.
- Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
- Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
- Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

Дальше при необходимости мы можем легко из css или js показывать или скрывать надписи и стрелки.

Masonry

1. Набор элементов с бордерами (блоки-флексы-гриды по вкусу).
2. Сверху абсолютно позиционированный элемент в 200vh/200vw с фоном в виде радиального градиента из прозрачного в цвет фона body или что там еще снизу находится.
3. В вышеупомянутых элементах текстам задаем z-index и они ложатся сверху градиента.
4. На событие mousemove вешаем обработчик, который меняет координаты градиента.

Получаем что-то такое:
codepen

P.S.: И в перспективе вставляйте картинки сюда, а не на левый хостинг.

Путей два:

• Не морочьте себе голову, оставьте только один контур у этих объектов (уберите все, что есть после буквы M в атрибуте d у #rocket-window и #rocket-outline) и поместите #rocket-window после #rocket-outline в коде.
  
• Используйте fill-rule="nonzero" у этих объектов, но убедитесь, что оба контура (внутренний и внешний) нарисованы в одну сторону (по часовой или против).
  

Видел я людей, которые называли себя программистами и при этом до жути боялись открыть консоль и что-то в ней сделать. Думаю вы встречали таких. Их еще обычно издалека можно опознать по стремлению извратиться как угодно и поставить 100500 плагинов в свою ide, только чтобы не запускать консольку. Они как будно боятся мигающего курсора. Обычно это сопровождается боязнью экспериментов и вообще изучения нового. В первую очередь требование уметь работать с linux отсеивает подобных кандидатов.

В моем окружении фраза "навыки работы в Linux-системах" подразумевает, что вы можете настроить свое рабочее окружение, можете управлять зависимостями, запускать сборку, тесты, и при этом не отвлекать коллег тупыми вопросами в духе "я вошел в vim и теперь не знаю, как из него выйти". Какое-то серьезное администрирование наша профессия не предполагает (в компаниях, где оно вообще есть, обычно есть и отдельный админ), а вот все, что связано с повседневными задачами вы должны делать сами.

хотел прикрутить HTML+CSS, но единственный вариант который я нашел - использование встроенного браузера... начинаю склонятся к альтернативным решениям в виде Electron

По вашим словам кажется, что вы придумываете приложение для одного человека работающее в единственном экземпляре. А почему бы не сделать клиент в обычном браузере (html/css/js - полный набор, верстайте, что хотите) и отдельный сервер с БД и логикой? Сервер можете и на Java делать. А можно и на PHP. Приложение по самой своей идее должно быть для нескольких людей, так что такое разделение было бы логичным.

Практически все подобные вопросы про бордеры можно решать с помощью линейных градиентов (пример). Это получается как бы не бордер, а просто нарисованные на фоне линии.

Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...

Как это может выглядеть?

Например вот так:

I.amOnPage('/');
I.click('Login');
I.fillField('Username', 'john');
I.fillField('Password', '123456');
I.click('Enter');
I.see('Welcome');

Так то ваш скрипт можно написать на чем угодно, но довольно удобными вариантами будут именно инструменты для тестирования (потому что они изначально предназначены для этого). Codecept - частный случай, он хорош в основном своим стилем написания тестов в виде сценариев. И не надо никакие велосипеды делать.

Тоже не поверил, что в FF могут быть проблемы с маской. Уже подумал, что вы баг в браузере нашли... Но все оказалось куда проще - в ответе на SO какая-то жесть творится с размерами, я ее немного поправил и все заработало:

<svg viewbox='0 0 100 100'>
    <defs>
        <mask id='mask'>
            <rect x='0' y='0' width='100' height='100' fill='rgba(255,255,255,0.5)' />
            <circle r='50' cx='50' cy='50' fill='#000' />
        </mask>
    </defs>
    <image xlink:href='....' x='0' y='0' width='100'height='100' />
    <rect x='0' y='0' width='100' height='100' fill='white' mask='url(#mask)' />
</svg>

С самой маской проблем нет.
CodePen