Ivan Bogachev

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

Можно сделать на SVG:

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="noise">
      <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
      <feColorMatrix type="saturate" values="0"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
    </filter>
    <clipPath id="the-object">
      <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
</svg>

Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.