CSS-эффекты и графика

Разброс фигур

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

Фигуры

Что разбрасываем

Количество: 45 Минимальный размер: 10 px Максимальный размер: 34 px Прозрачность от: 45% Поворачивать фигуры

Палитра

Фон

Вариант: 5

Превью

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <rect width="800" height="600" fill="#0f172a"/>
  <circle cx="230.5" cy="45.4" r="12" fill="#10b981" opacity="0.53"/>
  <circle cx="556.8" cy="384.1" r="11.7" fill="#f59e0b" opacity="0.47"/>
  <circle cx="261.2" cy="309.2" r="14" fill="#f59e0b" opacity="0.74"/>
  <circle cx="798" cy="144.6" r="8.7" fill="#10b981" opacity="0.66"/>
  <circle cx="188.2" cy="79.2" r="9.8" fill="#6366f1" opacity="0.6"/>
  <circle cx="259.2" cy="102" r="12.3" fill="#f59e0b" opacity="0.6"/>
  <circle cx="276.6" cy="147.2" r="9.8" fill="#10b981" opacity="0.54"/>
  <circle cx="459.2" cy="306.4" r="6.8" fill="#6366f1" opacity="0.84"/>
  <circle cx="118.3" cy="226.8" r="9.9" fill="#10b981" opacity="0.49"/>
  <circle cx="310.3" cy="134.5" r="10" fill="#6366f1" opacity="0.87"/>
  <circle cx="23.9" cy="357.2" r="11.2" fill="#ec4899" opacity="0.68"/>
  <circle cx="35.2" cy="321.3" r="11.8" fill="#10b981" opacity="0.86"/>
  <circle cx="479.3" cy="474" r="8.5" fill="#10b981" opacity="0.56"/>
  <circle cx="114.7" cy="532.8" r="5.8" fill="#ec4899" opacity="0.98"/>
  <circle cx="393.8" cy="181.8" r="11.2" fill="#ec4899" opacity="0.86"/>
  <circle cx="760.9" cy="320.1" r="15.8" fill="#10b981" opacity="0.51"/>
  <circle cx="411.5" cy="125.7" r="15.3" fill="#ec4899" opacity="0.48"/>
  <circle cx="476.2" cy="498.3" r="11.1" fill="#6366f1" opacity="0.59"/>
  <circle cx="657.9" cy="64.6" r="10.9" fill="#ec4899" opacity="0.55"/>
  <circle cx="190.8" cy="200.3" r="12.6" fill="#ec4899" opacity="0.87"/>
  <circle cx="109.2" cy="351.6" r="6.1" fill="#ec4899" opacity="0.81"/>
  <circle cx="362.2" cy="578.4" r="7.3" fill="#6366f1" opacity="0.81"/>
  <circle cx="383.3" cy="532.3" r="5.4" fill="#6366f1" opacity="0.51"/>
  <circle cx="387.5" cy="86.1" r="12.8" fill="#f59e0b" opacity="0.87"/>
  <circle cx="56.3" cy="0.8" r="12.8" fill="#ec4899" opacity="0.65"/>
  <circle cx="95.1" cy="64.5" r="8.9" fill="#ec4899" opacity="0.79"/>
  <circle cx="69.3" cy="264.1" r="10.5" fill="#f59e0b" opacity="0.88"/>
  <circle cx="463.6" cy="393.8" r="7.3" fill="#10b981" opacity="0.84"/>
  <circle cx="356.3" cy="193.8" r="5.8" fill="#ec4899" opacity="0.53"/>
  <circle cx="288.1" cy="496.5" r="11" fill="#f59e0b" opacity="0.97"/>
  <circle cx="286.6" cy="478.7" r="14.8" fill="#6366f1" opacity="0.45"/>
  <circle cx="542.8" cy="295.1" r="6.6" fill="#ec4899" opacity="0.81"/>
  <circle cx="617.8" cy="294.3" r="13.1" fill="#10b981" opacity="0.72"/>
  <circle cx="349.8" cy="310.2" r="14.4" fill="#f59e0b" opacity="0.79"/>
  <circle cx="256.7" cy="136" r="7.4" fill="#10b981" opacity="0.6"/>
  <circle cx="739.2" cy="217.5" r="16.6" fill="#f59e0b" opacity="0.71"/>
  <circle cx="33.3" cy="488.2" r="10.5" fill="#ec4899" opacity="0.58"/>
  <circle cx="761.3" cy="341.4" r="9.4" fill="#6366f1" opacity="0.48"/>
  <circle cx="67.2" cy="251.5" r="5" fill="#10b981" opacity="0.74"/>
  <circle cx="237.3" cy="329.2" r="12.8" fill="#6366f1" opacity="0.83"/>
  <circle cx="324.6" cy="51.5" r="14.3" fill="#f59e0b" opacity="0.81"/>
  <circle cx="633.7" cy="325.9" r="12.3" fill="#f59e0b" opacity="0.65"/>
  <circle cx="347.5" cy="241.8" r="10.3" fill="#ec4899" opacity="0.85"/>
  <circle cx="721" cy="479.4" r="7.9" fill="#10b981" opacity="0.64"/>
  <circle cx="650.8" cy="310.1" r="15.8" fill="#10b981" opacity="0.76"/>
</svg>

CSS: повторяющийся фон

.scatter {
  background-color: #0f172a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' width='800' height='600'%3E %3Crect width='800' height='600' fill='%230f172a'/%3E %3Ccircle cx='230.5' cy='45.4' r='12' fill='%2310b981' opacity='0.53'/%3E %3Ccircle cx='556.8' cy='384.1' r='11.7' fill='%23f59e0b' opacity='0.47'/%3E %3Ccircle cx='261.2' cy='309.2' r='14' fill='%23f59e0b' opacity='0.74'/%3E %3Ccircle cx='798' cy='144.6' r='8.7' fill='%2310b981' opacity='0.66'/%3E %3Ccircle cx='188.2' cy='79.2' r='9.8' fill='%236366f1' opacity='0.6'/%3E %3Ccircle cx='259.2' cy='102' r='12.3' fill='%23f59e0b' opacity='0.6'/%3E %3Ccircle cx='276.6' cy='147.2' r='9.8' fill='%2310b981' opacity='0.54'/%3E %3Ccircle cx='459.2' cy='306.4' r='6.8' fill='%236366f1' opacity='0.84'/%3E %3Ccircle cx='118.3' cy='226.8' r='9.9' fill='%2310b981' opacity='0.49'/%3E %3Ccircle cx='310.3' cy='134.5' r='10' fill='%236366f1' opacity='0.87'/%3E %3Ccircle cx='23.9' cy='357.2' r='11.2' fill='%23ec4899' opacity='0.68'/%3E %3Ccircle cx='35.2' cy='321.3' r='11.8' fill='%2310b981' opacity='0.86'/%3E %3Ccircle cx='479.3' cy='474' r='8.5' fill='%2310b981' opacity='0.56'/%3E %3Ccircle cx='114.7' cy='532.8' r='5.8' fill='%23ec4899' opacity='0.98'/%3E %3Ccircle cx='393.8' cy='181.8' r='11.2' fill='%23ec4899' opacity='0.86'/%3E %3Ccircle cx='760.9' cy='320.1' r='15.8' fill='%2310b981' opacity='0.51'/%3E %3Ccircle cx='411.5' cy='125.7' r='15.3' fill='%23ec4899' opacity='0.48'/%3E %3Ccircle cx='476.2' cy='498.3' r='11.1' fill='%236366f1' opacity='0.59'/%3E %3Ccircle cx='657.9' cy='64.6' r='10.9' fill='%23ec4899' opacity='0.55'/%3E %3Ccircle cx='190.8' cy='200.3' r='12.6' fill='%23ec4899' opacity='0.87'/%3E %3Ccircle cx='109.2' cy='351.6' r='6.1' fill='%23ec4899' opacity='0.81'/%3E %3Ccircle cx='362.2' cy='578.4' r='7.3' fill='%236366f1' opacity='0.81'/%3E %3Ccircle cx='383.3' cy='532.3' r='5.4' fill='%236366f1' opacity='0.51'/%3E %3Ccircle cx='387.5' cy='86.1' r='12.8' fill='%23f59e0b' opacity='0.87'/%3E %3Ccircle cx='56.3' cy='0.8' r='12.8' fill='%23ec4899' opacity='0.65'/%3E %3Ccircle cx='95.1' cy='64.5' r='8.9' fill='%23ec4899' opacity='0.79'/%3E %3Ccircle cx='69.3' cy='264.1' r='10.5' fill='%23f59e0b' opacity='0.88'/%3E %3Ccircle cx='463.6' cy='393.8' r='7.3' fill='%2310b981' opacity='0.84'/%3E %3Ccircle cx='356.3' cy='193.8' r='5.8' fill='%23ec4899' opacity='0.53'/%3E %3Ccircle cx='288.1' cy='496.5' r='11' fill='%23f59e0b' opacity='0.97'/%3E %3Ccircle cx='286.6' cy='478.7' r='14.8' fill='%236366f1' opacity='0.45'/%3E %3Ccircle cx='542.8' cy='295.1' r='6.6' fill='%23ec4899' opacity='0.81'/%3E %3Ccircle cx='617.8' cy='294.3' r='13.1' fill='%2310b981' opacity='0.72'/%3E %3Ccircle cx='349.8' cy='310.2' r='14.4' fill='%23f59e0b' opacity='0.79'/%3E %3Ccircle cx='256.7' cy='136' r='7.4' fill='%2310b981' opacity='0.6'/%3E %3Ccircle cx='739.2' cy='217.5' r='16.6' fill='%23f59e0b' opacity='0.71'/%3E %3Ccircle cx='33.3' cy='488.2' r='10.5' fill='%23ec4899' opacity='0.58'/%3E %3Ccircle cx='761.3' cy='341.4' r='9.4' fill='%236366f1' opacity='0.48'/%3E %3Ccircle cx='67.2' cy='251.5' r='5' fill='%2310b981' opacity='0.74'/%3E %3Ccircle cx='237.3' cy='329.2' r='12.8' fill='%236366f1' opacity='0.83'/%3E %3Ccircle cx='324.6' cy='51.5' r='14.3' fill='%23f59e0b' opacity='0.81'/%3E %3Ccircle cx='633.7' cy='325.9' r='12.3' fill='%23f59e0b' opacity='0.65'/%3E %3Ccircle cx='347.5' cy='241.8' r='10.3' fill='%23ec4899' opacity='0.85'/%3E %3Ccircle cx='721' cy='479.4' r='7.9' fill='%2310b981' opacity='0.64'/%3E %3Ccircle cx='650.8' cy='310.1' r='15.8' fill='%2310b981' opacity='0.76'/%3E %3C/svg%3E");
  background-size: 800px 600px;
  background-repeat: repeat;
}