За базу возьмём «холст» 800х600 пикселей. Как уже ранее говорилось, вектор позволяет после изменять ширину и высоту поля.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
Начнём с градиента.
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
<defs>
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#000011"/>
<stop offset="0%" stop-color="#000011"/><stop offset="50%" stop-color="#000022"/>
<stop offset="0%" stop-color="#000011"/><stop offset="100%" stop-color="#000000"/>
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#spaceGradient)"/>
</svg>
Здесь в "defs" мы сначала указываем настройки градиента для id="spaceGradient", а после вызываем эти настройки у rect в fill="url(#spaceGradient). Теперь начнём добавлять звёзды, начнём с ближних:
Добавим в код комментарии, чтобы понимать, что и где у нас происходит. Далее этот блок вставляем после блока (rect) с фоном:
<g id="fastStarsLayer">
<!-- Звезда 1 -->
<circle cx="850" cy="150" r="2.5" fill="#ffffff">
<animate attributeName="r" values="2;3;2" dur="0.4s" repeatCount="indefinite"/>
<animate attributeName="cx" from="850" to="-50" dur="1.2s" repeatCount="indefinite"/>
</circle>
<!-- Звезда 2 -->
<circle cx="900" cy="300" r="2" fill="#ffffcc">
<animate attributeName="r" values="1.5;2.5;1.5" dur="0.5s" repeatCount="indefinite"/>
<animate attributeName="cx" from="900" to="-50" dur="1.5s" repeatCount="indefinite" begin="0.2s"/>
</circle>
<!-- Звезда 3 -->
<circle cx="950" cy="450" r="3" fill="#ffffff">
<animate attributeName="r" values="2.5;3.5;2.5" dur="0.3s" repeatCount="indefinite"/>
<animate attributeName="cx" from="950" to="-50" dur="1s" repeatCount="indefinite" begin="0.4s"/>
</circle>
<!-- Звезда 4 -->
<circle cx="1000" cy="200" r="1.8" fill="#ccffff">
<animate attributeName="r" values="1.3;2.3;1.3" dur="0.6s" repeatCount="indefinite"/>
<animate attributeName="cx" from="1000" to="-50" dur="1.8s" repeatCount="indefinite" begin="0.1s"/>
</circle>
<!-- Звезда 5 -->
<circle cx="1050" cy="350" r="2.2" fill="#ffffff">
<animate attributeName="r" values="1.7;2.7;1.7" dur="0.45s" repeatCount="indefinite"/>
<animate attributeName="cx" from="1050" to="-50" dur="1.3s" repeatCount="indefinite" begin="0.3s"/>
</circle>
</g>
Что мы только что сделали? У нас есть 5 звёзд с разными настройками, поскольку они однотипны разберём подробно только первую, здесь мы видим круг (circle), далее cx=850, это точка старта при ширине поля 800, получается что "звезда" находится за пределами поля на высоте (cy) 150 пикселей от верхней границы вниз. r="2.5" это размер (радиус) нашей звёздочки и fill цвет заливки. Далее в ход включаются два параметра анимации, один указывает на атрибут радиуса, изменяя 2.5 на 2-3-2, dur 0.4s это длительность "шага". Попробуйте "поиграть" с этими значениями, например вместо 2;3;2 напишите 20;30;20 а 0.4s замените на 4s разницу увидите сразу. repeatCount="indefinite", говорит гонять нашу звезду по кругу (повторять бесконечно). Следующий параметр анимации изменяет значение cx от 850 (за полем справа) до -50 (за полем слева) со скоростью 1.2s, чем меньше значение тем быстрее звезда будет перемещаться и наоборот.
Далее увеличиваем количество звёзд до нужного нам количества и получаем результат. Но давайте добавим ещё эффект свечения, для этого нам надо будет дополнить блок def в начале, следующим фильтром:
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
<defs>
<!-- Градиент для глубокого космоса -->
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#000011"/>
<stop offset="0%" stop-color="#000011"/><stop offset="50%" stop-color="#000022"/>
<stop offset="0%" stop-color="#000011"/><stop offset="100%" stop-color="#000000"/>
</radialGradient>
<!-- Эффект свечения для звёзд -->
<filter id="starGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="100%" height="100%" fill="url(#spaceGradient)"/>
<!-- ниже наши звёзды -->
И теперь каждой звёздочке укажем добавленный фильтр:
<g id="fastStarsLayer">
<!-- Звезда 1 -->
<circle cx="850" cy="150" r="2.5" fill="#ffffff" filter="url(#starGlow)">
<animate attributeName="r" values="2;3;2" dur="0.4s" repeatCount="indefinite"/>
<animate attributeName="cx" from="850" to="-50" dur="1.2s" repeatCount="indefinite"/>
</circle>
Кроме того, можно добавить и "статические" звёзды:
<g id="backgroundStars" opacity="0.5">
<circle cx="100" cy="50" r="1.5" fill="white">
<animate attributeName="opacity" values="1.3;1.7;1.3" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="200" cy="150" r="1.6" fill="white">
<animate attributeName="opacity" values="1.4;1.8;1.4" dur="3s" repeatCount="indefinite" begin="1s"/>
</circle>
<circle cx="300" cy="80" r="1.4" fill="white">
<aanimate attributeName="opacity" values="1.2;1.6;1.2" dur="5s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<circle cx="150" cy="250" r="1.7" fill="white">
<animate attributeName="opacity" values="1.3;1.9;1.3" dur="3.5s" repeatCount="indefinite" begin="2s"/>
</circle>
<circle cx="400" cy="200" r="1.5" fill="white">
<animate attributeName="opacity" values="1.4;1.8;1.4" dur="4.5s" repeatCount="indefinite" begin="1.5s"/>
</circle>
</g>
Сколько добавлять тех или иных звёзд, какую им дать скорость движения, уже каждый для себя решает самостоятельно.
