Space Around

<img src="./picture.png" alt="picture">
<img src="picture.png" alt="picture">

Если коротко, то WebSocket.

x = x0 + V * cos(alpha) * t
либо если не отказываться от однократного вычисления Vx
x = x0 +Vx * t

https://codepen.io/findelman/pen/RwPEEdv

Тут все дело в том, что вы используете для создания тени не саму кривую штуку, а "прозрачность" вокруг нее. Это немного нелогично с точки зрения понятия "тень". То есть у вас тень отбрасывает "пустота" вокруг кривой штуки (и эта "пустота" еще и обрезается в неудачном месте). Тут нужно использовать обратный подход, когда именно кривая штука используется для создания тени. В вашем примере для этого нужно поменять tableValues в feFuncA с "1 0" на "0 1" и в первом feComposite заменить "in" на "out".

Как альтернативный пример:


Вобщем сделать это можно по-разному, главное в конце проверить кроссбраузерность на всякий случай.

Трудный вопрос, в начале своей деятельности встречал таких индивидов, но сейчас встречаю таких все реже.
Пытался овладеть и тем и другим, но я никогда не умел рисовать и художественными талантами не владел, так что это оказалось не по мне.

В наше время врестальщик, должен быть Front-End Developer'ом, по сему перед тобой лежит выбор. Либо ты углубляешься в программирование, либо в дизайн (т.е. изо). А совмещать это возможно даже и не имеет смысла. Конечно, дяде заказчику возможно и проще для себя найти одного исполнителя, делающего ВСЁ, и не заморачиваться, однако сомневаюсь, что крупная компания будет брать на работу универсала (там нужны профессионалы своего дела).

Но это все не значит что нужно выбрать одно и забыть о втором. Фронт-ендеру всегда нужно понимать основные принципы построения дизайна. Часто приходится допиливать какие-то мелочи самому, и эти "мелочи", должны быть на соответствующем уровне. Да и не только для этого..

Ну там же дофега всего есть и FPS тебе и загрузку процессора покажет и можно даже искусственно затротлить процессор, получив слоудаун в разы, чтобы эмулировать более слабые девайсы.

Итак. Всем большое спасибо за участие! Решение проблемы я выбрал следующие. Как советовал TekVanDo использую Tween анимацию. Она оказалось очень удобной. Метод TweenMax.fromTo решил некоторые мои проблемы. На страницах помимо анимации скроллинга есть другая анимация (слайдер и т п). Я сделал разделение анимации по блокам. Т. е. анимация в определенном блоке запускается только тогда, когда пользователь до него доходит.

https://stackoverflow.com/a/60395056/6339052

На английском SO дали один единственный верный ответ ...я в никся и действительно задача которую я не знал

<svg id="svg" viewBox="0 0 1000 1000">
    <defs>
        <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
            <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
        </linearGradient>
        <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
            <circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
        </pattern>

        <pattern id="both" width="100%" height="100%">
           <rect width="100%" height="100%" fill="url(#grad)"/>
           <rect width="100%" height="100%" fill="url(#bg)"/>
        </pattern>
    </defs>
  <g>
    <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z"  fill="url(#both)"></path>
  </g>
</svg>

должно помочь
https://css-tricks.com/blobs/

Потому что элемент спозиционированный как absolute выпадает из потока документа. Теперь родитель будет вести себя так, словно у него нет детей. Можно сказать, родитель отказался от своего ребёнка.

Попробуйте вот этот:

Введение в высшую математику. Черкасов А.Н.

Наверное, самый известный techcrunch.com