Максим

ну так fill это аналог background
а что бы сделать границу - применяют stroke :color; stroke-width:px;

float это обтекание картинки текстом
flex - это позиционирование которое ни каким образом не заменит float

к примеру : все знают что shape не кроссбраузерный , но на float это делается абсолютно кроссбраузерно

1) wget на linux справляется с этим на Ура.
2) "Сохранить страницу как" и потом выпиливать от туда лишнее.

https://threejs.org/
https://threejs.org/examples/

https://jsfiddle.net/8mtqrzbk/10/ примерно так - дальше по шагам - адаптировать текст - так как само svg резиновое - если что то не ясно спрашивайте

проверял в Chrome Firefox IE11 EDGE - работает везде

svg или clip-path

если добавить для body в тот момент когда меню фиксируется отступ равный высоте меню - тогда скачка не будет ...
и кстати я не увидел скачка в 4х браузерах

https://codepen.io/iiil/pen/InDbp
Как сделать плавное появление меню при скролле?

Как удалить и добавить класс на JS (jQuery) при изменении размера экрана? Проблема после обновления страницы?

https://jsfiddle.net/sa4gempf/3/

https://jsfiddle.net/8eLnfg69/15/ я верно понял ?