Несколько идентичных canvas анимаций на одной странице?

@RAX7, Спасибо огромнейшее за помощь и труд!
Вижу, что в результате ваш код работает как надо, но у меня увы похоже именно js не желает запускаться - по-прежнему вижу только прямоугольник с тенью...

Буду пытаться разобраться, почему js не работает...

Несколько идентичных canvas анимаций на одной странице?

RAX7, большое спасибо за помощь, я наверное туплю, но с приведенным выше кодом у меня вообще ничего не работает - дождя нет, изображений тоже, только прямоугольник посередине...

Как расположить несколько изображений в ряд по ширине экрана?

Спасибо, попробую)

Как расположить несколько изображений в ряд по ширине экрана?

Я прошу прощения, это мой второй макет, поэтому настолько все криво получается(
Уже два дня мучаюсь.
В общем в итоге для всей правой стороны блока (где текст и изображение внизу) прописал display: flex; и flex-direction: column; , всему блоку в целом - position: relative; а самому изображению, которое нужно разместить справа внизу, position: absolute; и bottom:0;
Вроде получилось наконец-то(

Как расположить несколько изображений в ряд по ширине экрана?

Я имею ввиду правое изображение, .right-fon.
Мне нужно опустить его вниз блока, как на последней картинке, но не получается..
Если пишу для изображения

.right-fon {
background-position: bottom }

ничего не происходит (видимо потому что изображение в диве, а не самом css.

Если пишу для него padding-top: 23.8% ;

то при нормально масштабе оно ровно внизу, а при увеличении оно "съезжает" еще ниже блока..

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

Как расположить несколько изображений в ряд по ширине экрана?

Огромное спасибо, флексы помогли. Осталась только одна небольшая проблема - изображение велосипеда справа не прибивается к нижнему краю. background-position: bottom не работает. А если указать для изображение верхний padding в em, при увеличии окна браузера изображение съезжает ниже блока почему-то...

<section class="vintage-byke">

<img src="https://habrastorage.org/webt/5e/77/62/5e776201ca02e520262568.jpeg" alt="image"/>

        <div class="byke">
            <img src="img/vinrage-main-fon.jpg" alt="" class="left-section">

            <div class="right-section">
                <img src="img/vintage-line.png" alt="">
                <h2>vintage Oliva</h2>
                <p class="byke_subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has </p>

                <img src="img/vintage-second-fon.jpg" alt="" class="right-fon">
            </div>
        </div>
</section>

.vintage-byke{
    height: 100%;
}

.byke {
    display: flex;
    flex-wrap: nowrap;
    background-color: khaki;
    height: 30em ;

.left-section {
    width: 60%;
}
.right-section {

  width: 40% ;
  height: 43%;
  text-align: center;
 }

.byke_subtitle {
    padding-left: 2em;
    padding-right: 2em;
   text-align: center; 
}
.right-fon {
    width: 100%;
    height: 100%;   
}

Как должно быть:

Как нарисовать тень для круглого изображения только с одной стороны (снизу)?

Ок, понял, еще раз большое вам спасибо за помощь и потраченное на ответ время!)

Как нарисовать тень для круглого изображения только с одной стороны (снизу)?

Огромное спасибо! Единственный нюанс - в макете похоже тень/граница идет на равномерном расстоянии от изображения, только меняется прозрачность обводки (почти невидима сверху и жирнее снизу). А у меня получается полукруг снизу..

Макет:



У меня:



Код:
.div {
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: 0 2px 2px 0 rgba(204, 204, 204, 0.6);
}