Antony Bark

Нужно чтобы тег img представлялся в DOM как svg, это можно сделать с помощью JS/jQuery.
Вставь это в свой JS:

jQuery('img.img-svg').each(function(){
  const $img = jQuery(this);
  const imgClass = $img.attr('class');
  const imgURL = $img.attr('src');
  jQuery.get(imgURL, function(data) {
    let $svg = jQuery(data).find('svg');
    if(typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    $svg = $svg.removeAttr('xmlns:a');
    if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
    }
    $img.replaceWith($svg);
  }, 'xml');
});

* Если jQuery определен как $, то естественно в коде заменить "jQuery" на "$".

Добавь класс тегу img:
<img src="test.svg" alt="" class="img-svg" />
После чего можно настраивать цвет и остальные параметры:

.img-svg {
     max-width: 30px;
}
 .img-svg path {
     fill: #535353;
}

Вставленное svg при помощи тега img или фоном, стилизовать нельзя.

Чтобы решить это правильно и универсально - надо использовать js и вместо input - div content editable.
Натыкался когда-то на одном сайте на такое.
Индивидуально буквы не возможно оформить, кроме первой first-letter.
И для нормального оформления нужно заворачивать хотя бы в span.
Простое решение - ваше, методом подбора шрифта ).

Основной принцип разработки - KISS - keep it simple .
Вы же сделали сами для гифку для примера, она вас не устраивает чем? Качество прекрасное, я вот с мобилки смотрю. Оптимизация проигрывания - во всех браузерах потрясающая. Даже coub.com долгое время используют гифки с аудиодорожкой (возможно сейчас для видео выдают, тем кто поддерживает, webp или webm, не суть). Лишнего оверхеда нет, блок рисуется браузером один раз, лишних репеинтов, и прочего, нет, памяти и процессора жрется, вы удивитесь, просто в разы меньше, чем любая анимация с блоками. Из минусов, понятно, не такой красочный мокап, как в пнг,всего 256 цветов и максимум 1 бит прозрачности.
Не хотите гиф, ну, тут вам уже сказали, что нет никаких проблем, в т.ч с адаптивной вёрсткой.
У вас есть блок мокапа, у которого всегда жесткое соотношение сторон (например 4x3). У вас есть блок "экран" с анимацией тоже жёстко заданного соотношения относительно мокапа. Не надо выдумывать, задайте размер и позиционирование абсолютно в процентах. Проценты всегда будут считаться от высоты и ширины родителя (мокапа). Проценты можно высчитать и задавать дробно. Например left:22.222222%.
Как верстать мокап адаптивно? Я бы использовал юнит vw. 1vw = 1% ширины всего экрана. Отличие в том что он применяется и к высоте. Хотите на всю ширину на мобиле мокап 4х3? Задайте width:100vw;height:75vw;.
И не надо js анимации использовать, всё равно не оптимизируете нормально - либо страшные интервалы, либо задолбаетесь рассчитывать requestaninationframe. Используйте css анимации, лонгскрин не надо делать картинкой, надо бекграундом.
2 блока (например сам див и :before), 2 файла изображения, от силы 15 строк css - примерно должно быть в итоге.
Если извратиться через background image - можно в 1 html элемент вообще, с анимацией и без скриптов, адаптивно, клёво.

Пожалуйста, поставьте вопрос чётче. Думаю, сейчас вы имеете один ответ из-за проблем с формулировкой.

В любом случае верстка под разные экраны предполагает собой использование адаптивных @ media запросов в css в комбинации с резиновой версткой на flex.

В консоли Google Chrome вы можете посмотреть адаптивность верстки под популярные и не очень популярные экраны, под windows, iOS и Android.

Дизайнер - фронтенд разработчик, разработчик интерфейсов можно добавить. Это очень перспективно и конкуренции нет почти. У нас в городе такие вакансии несколько лет могут закрываться. Правильно, начинай js фреймворки осваивать я бы советовал для начала React.

Я Js Full stack, и у меня очень много пробелов в знаниях из за того что я занимаюсь. Front End && Back End разработкой одновременно. При том, на проектах где нет внятных требований мне приходится писать плохой код, потому что у меня нет времени. На хороший код. И проблема в том, что система которую я пишу например. Пишется мною 2 месяца. А в нормальной команде, где я бы мог принимать участие как Front End или Back End. Я бы написал это все за месяц. Ни кому не нужны Full stack. Если вы специалист в чем то одном, вы более ценны. Как разработчик или дизайнер, так как самое ценное это время. А его у нас нету.

Держи, вроде похоже получилось

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker