Новогодний конкурс 2022 года!
У нас, на RuSO каждый Новый Год организуются Новогодние конкурсы:
В этом году было выбрано изображение ёлочки, стилизованное под печатную плату и это не случайный выбор понравившейся картинки, так как на нашем ресурсе есть люди причастные к разработке процессора "Байкал" и других радиоэлектронных устройств.
Сценарий визуализации:
- Изображение ёлочки
- Анимация гирлянд на ёлке
- Анимация звезды на ёлке
- Анимация падающего снега
- Изображение Деда Мороза и Снегурочки
Критерии выбора победителя
Для победы в Новогоднем конкурсе необходимо реализовать, как минимум одну анимацию из указанных в сценарии визуализации. Это условие действует, если все ответы реализуют только один пункт сценария. В этом случае выбирается ответ, получивший наибольшее количество голосов
upvoteПри наличии ответов, в которых реализовано несколько пунктов сценария, преимущество получает ответ с наибольшим количеством выполненных пунктов при условии качества решения ( эмоциональный позитив, создающий праздничное, новогоднее настроение) В этом случае выбирается ответ, получивший наибольшее количество голосов
upvote
Ответы (4 шт):
Автор решения: HamSter
→ Ссылка
Более полная версия на codepen:
SVG SMIL:
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
background: #0F1525;
}
svg {
height: 100%;
display: block;
margin: auto;
}
svg path {
stroke: #fff;
}<svg width="425" height="451" viewBox="0 0 425 451" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="stree"> <g id="sline1"> <path id="s0" d="M221 446L221 451L231 451L231 446L221 446ZM231 418C231 415.239 228.761 413 226 413C223.239 413 221 415.239 221 418L231 418ZM231 446L231 418L221 418L221 446L231 446Z" fill="white" stroke-dasharray="131.71, 131.71" stroke-dashoffset="131.71" > <animate id="sa0" begin="0s" attributeName="stroke-dashoffset" from="131.71" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s1" d="M226.5 417.5V402L212.5 388V191L230 173.5V106L248 88V79.5" stroke="black" stroke-width="5" stroke-linecap="square" stroke-dasharray="358.504, 358.504" stroke-dashoffset="358.504" > <animate id="sa1" begin="sa0.end" attributeName="stroke-dashoffset" from="358.504" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s2" d="M260.5 65C260.5 71.9036 254.904 77.5 248 77.5C241.096 77.5 235.5 71.9036 235.5 65C235.5 58.0964 241.096 52.5 248 52.5C254.904 52.5 260.5 58.0964 260.5 65Z" stroke="black" stroke-width="5" stroke-linecap="square" stroke-dasharray="78.5514, 78.5514" stroke-dashoffset="78.5514" > <animate id="sa2" begin="sa1.end" attributeName="stroke-dashoffset" from="78.5514" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s3" d="M213.5 330L233.5 310V290.5" stroke="black" stroke-width="3" stroke-dasharray="47.7843, 47.7843" stroke-dashoffset="47.7843" > <animate id="sa3" begin="sa2.end" attributeName="stroke-dashoffset" from="47.7843" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s4" d="M242.5 280C242.5 284.971 238.471 289 233.5 289C228.529 289 224.5 284.971 224.5 280C224.5 275.029 228.529 271 233.5 271C238.471 271 242.5 275.029 242.5 280Z" stroke="black" stroke-width="4" stroke-dasharray="56.5577, 56.5577" stroke-dashoffset="56.5577" > <animate id="sa4" begin="sa3.end" attributeName="stroke-dashoffset" from="56.5577" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s5" d="M241 272L277 237.5V231" stroke="black" stroke-width="3" stroke-dasharray="56.3623, 56.3623" stroke-dashoffset="56.3623" > <animate id="sa5" begin="sa4.end" attributeName="stroke-dashoffset" from="56.3623" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s6" d="M287 221C287 225.971 282.971 230 278 230C273.029 230 269 225.971 269 221C269 216.029 273.029 212 278 212C282.971 212 287 216.029 287 221Z" stroke="black" stroke-width="4" stroke-dasharray="56.5577, 56.5577" stroke-dashoffset="56.5577" > <animate id="sa6" begin="sa5.end" attributeName="stroke-dashoffset" from="56.5577" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s7" d="M278 212L278 178" stroke="black" stroke-width="3" stroke-dasharray="34, 34" stroke-dashoffset="34" > <animate id="sa7" begin="sa6.end" attributeName="stroke-dashoffset" from="34" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s8" d="M287 169C287 173.971 282.971 178 278 178C273.029 178 269 173.971 269 169C269 164.029 273.029 160 278 160C282.971 160 287 164.029 287 169Z" stroke="black" stroke-width="4" stroke-dasharray="56.5577, 56.5577" stroke-dashoffset="56.5577" > <animate id="sa8" begin="sa7.end" attributeName="stroke-dashoffset" from="56.5577" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s9" d="M212 303L185 280.578V233" stroke="black" stroke-width="5" stroke-dasharray="82.6742, 82.6742" stroke-dashoffset="82.6742" > <animate id="sa9" begin="sa8.end" attributeName="stroke-dashoffset" from="82.6742" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s10" d="M195.5 223C195.5 228.799 190.799 233.5 185 233.5C179.201 233.5 174.5 228.799 174.5 223C174.5 217.201 179.201 212.5 185 212.5C190.799 212.5 195.5 217.201 195.5 223Z" stroke="black" stroke-width="7" stroke-dasharray="65.9829, 65.9829" stroke-dashoffset="65.9829" > <animate id="sa10" begin="sa9.end" attributeName="stroke-dashoffset" from="65.9829" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s11" d="M184 266L156 238V205.5" stroke="black" stroke-width="4" stroke-dasharray="72.098, 72.098" stroke-dashoffset="72.098" > <animate id="sa11" begin="sa10.end" attributeName="stroke-dashoffset" from="72.098" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s12" d="M165 195C165 199.971 160.971 204 156 204C151.029 204 147 199.971 147 195C147 190.029 151.029 186 156 186C160.971 186 165 190.029 165 195Z" stroke="black" stroke-width="4" stroke-dasharray="56.5575, 56.5575" stroke-dashoffset="56.5575" > <animate id="sa12" begin="sa11.end" attributeName="stroke-dashoffset" from="56.5575" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s13" d="M146.5 192.5L125.5 171.5" stroke="black" stroke-width="4" stroke-dasharray="29.6985, 29.6985" stroke-dashoffset="29.6985" > <animate id="sa13" begin="sa12.end" attributeName="stroke-dashoffset" from="29.6985" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s14" d="M129 163C129 167.971 124.971 172 120 172C115.029 172 111 167.971 111 163C111 158.029 115.029 154 120 154C124.971 154 129 158.029 129 163Z" stroke="black" stroke-width="4" stroke-dasharray="56.5574, 56.5574" stroke-dashoffset="56.5574" > <animate id="sa14" begin="sa13.end" attributeName="stroke-dashoffset" from="56.5574" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s15" d="M212.5 204.5L180.5 172.5V125" stroke="black" stroke-width="4" stroke-dasharray="92.7548, 92.7548" stroke-dashoffset="92.7548" > <animate id="sa15" begin="sa14.end" attributeName="stroke-dashoffset" from="92.7548" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s16" d="M189 116C189 120.971 184.971 125 180 125C175.029 125 171 120.971 171 116C171 111.029 175.029 107 180 107C184.971 107 189 111.029 189 116Z" stroke="black" stroke-width="4" stroke-dasharray="56.5575, 56.5575" stroke-dashoffset="56.5575" > <animate id="sa16" begin="sa15.end" attributeName="stroke-dashoffset" from="56.5575" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s17" d="M229.5 148L211.5 130V70.5" stroke="black" stroke-width="4" stroke-dasharray="84.9558, 84.9558" stroke-dashoffset="84.9558" > <animate id="sa17" begin="sa16.end" attributeName="stroke-dashoffset" from="84.9558" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s18" d="M221 60C221 65.5228 216.523 70 211 70C205.477 70 201 65.5228 201 60C201 54.4772 205.477 50 211 50C216.523 50 221 54.4772 221 60Z" stroke="black" stroke-width="4" stroke-dasharray="62.8409, 62.8409" stroke-dashoffset="62.8409" > <animate id="sa18" begin="sa17.end" attributeName="stroke-dashoffset" from="62.8409" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s19" d="M211.5 103.5L183 75V50.5" stroke="black" stroke-width="3" stroke-dasharray="64.8051, 64.8051" stroke-dashoffset="64.8051" > <animate id="sa19" begin="sa18.end" attributeName="stroke-dashoffset" from="64.8051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s20" d="M192 42.5C192 47.1944 188.194 51 183.5 51C178.806 51 175 47.1944 175 42.5C175 37.8056 178.806 34 183.5 34C188.194 34 192 37.8056 192 42.5Z" stroke="black" stroke-width="2" stroke-dasharray="53.4142, 53.4142" stroke-dashoffset="53.4142" > <animate id="sa20" begin="sa19.end" attributeName="stroke-dashoffset" from="53.4142" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s21" d="M211 50V26L216.5 20.5" stroke="black" stroke-width="4" stroke-dasharray="31.7782, 31.7782" stroke-dashoffset="31.7782" > <animate id="sa21" begin="sa20.end" attributeName="stroke-dashoffset" from="31.7782" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s22" d="M230.5 12C230.5 17.2467 226.247 21.5 221 21.5C215.753 21.5 211.5 17.2467 211.5 12C211.5 6.75329 215.753 2.5 221 2.5C226.247 2.5 230.5 6.75329 230.5 12Z" stroke="black" stroke-width="5" stroke-dasharray="59.699, 59.699" stroke-dashoffset="59.699" > <animate id="sa22" begin="sa21.end" attributeName="stroke-dashoffset" from="59.699" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s23" d="M210 41.5L200 31.5V15.5" stroke="black" stroke-width="2" stroke-dasharray="30.1421, 30.1421" stroke-dashoffset="30.1421" > <animate id="sa23" begin="sa22.end" attributeName="stroke-dashoffset" from="30.1421" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s24" d="M205.5 9C205.5 12.0376 203.038 14.5 200 14.5C196.962 14.5 194.5 12.0376 194.5 9C194.5 5.96243 196.962 3.5 200 3.5C203.038 3.5 205.5 5.96243 205.5 9Z" stroke="black" stroke-width="3" stroke-dasharray="34.563, 34.563" stroke-dashoffset="34.563" > <animate id="sa24" begin="sa23.end" attributeName="stroke-dashoffset" from="34.563" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s25" d="M213 266.5L236.5 243V216.5" stroke="black" stroke-width="2" stroke-dasharray="59.734, 59.734" stroke-dashoffset="59.734" > <animate id="sa25" begin="sa24.end" attributeName="stroke-dashoffset" from="59.734" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s26" d="M242 210C242 213.314 239.314 216 236 216C232.686 216 230 213.314 230 210C230 206.686 232.686 204 236 204C239.314 204 242 206.686 242 210Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa26" begin="sa25.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s27" d="M214 256.5L226.5 244V230" stroke="black" stroke-width="2" stroke-dasharray="31.6777, 31.6777" stroke-dashoffset="31.6777" > <animate id="sa27" begin="sa26.end" attributeName="stroke-dashoffset" from="31.6777" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s28" d="M232 223C232 226.314 229.314 229 226 229C222.686 229 220 226.314 220 223C220 219.686 222.686 217 226 217C229.314 217 232 219.686 232 223Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa28" begin="sa27.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s29" d="M278 189.5L254 165.5V135" stroke="black" stroke-width="2" stroke-dasharray="64.4411, 64.4411" stroke-dashoffset="64.4411" > <animate id="sa29" begin="sa28.end" attributeName="stroke-dashoffset" from="64.4411" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s30" d="M260 129C260 132.314 257.314 135 254 135C250.686 135 248 132.314 248 129C248 125.686 250.686 123 254 123C257.314 123 260 125.686 260 129Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa30" begin="sa29.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s31" d="M256.5 167.5L282 142V117" stroke="black" stroke-width="2" stroke-dasharray="61.0624, 61.0624" stroke-dashoffset="61.0624" > <animate id="sa31" begin="sa30.end" attributeName="stroke-dashoffset" from="61.0624" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s32" d="M291 112C291 115.314 288.314 118 285 118C281.686 118 279 115.314 279 112C279 108.686 281.686 106 285 106C288.314 106 291 108.686 291 112Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa32" begin="sa31.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s33" d="M254 157L275 136.5V102" stroke="black" stroke-width="2" stroke-dasharray="63.8471, 63.8471" stroke-dashoffset="63.8471" > <animate id="sa33" begin="sa32.end" attributeName="stroke-dashoffset" from="63.8471" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s34" d="M281 96C281 99.3137 278.314 102 275 102C271.686 102 269 99.3137 269 96C269 92.6863 271.686 90 275 90C278.314 90 281 92.6863 281 96Z" stroke="black" stroke-width="2" stroke-dasharray="37.7048, 37.7048" stroke-dashoffset="37.7048" > <animate id="sa34" begin="sa33.end" attributeName="stroke-dashoffset" from="37.7048" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s35" d="M254 148L268.5 133.5V117L261.5 110" stroke="black" stroke-width="2" stroke-dasharray="46.9056, 46.9056" stroke-dashoffset="46.9056" > <animate id="sa35" begin="sa34.end" attributeName="stroke-dashoffset" from="46.9056" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s36" d="M264 105C264 108.314 261.314 111 258 111C254.686 111 252 108.314 252 105C252 101.686 254.686 99 258 99C261.314 99 264 101.686 264 105Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa36" begin="sa35.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s37" d="M198.5 190.5V161.5" stroke="black" stroke-width="2" stroke-dasharray="29, 29" stroke-dashoffset="29" > <animate id="sa37" begin="sa36.end" attributeName="stroke-dashoffset" from="29" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s38" d="M204 155C204 158.314 201.314 161 198 161C194.686 161 192 158.314 192 155C192 151.686 194.686 149 198 149C201.314 149 204 151.686 204 155Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa38" begin="sa37.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s39" d="M157.5 185V173.5L137 153V146.5" stroke="black" stroke-width="2" stroke-dasharray="46.9914, 46.9914" stroke-dashoffset="46.9914" > <animate id="sa39" begin="sa38.end" attributeName="stroke-dashoffset" from="46.9914" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s40" d="M143 140C143 143.314 140.314 146 137 146C133.686 146 131 143.314 131 140C131 136.686 133.686 134 137 134C140.314 134 143 136.686 143 140Z" stroke="black" stroke-width="2" stroke-dasharray="37.7051, 37.7051" stroke-dashoffset="37.7051" > <animate id="sa40" begin="sa39.end" attributeName="stroke-dashoffset" from="37.7051" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s41" d="M180.5 157.5L151 128V97.5" stroke="black" stroke-width="2" stroke-dasharray="72.2193, 72.2193" stroke-dashoffset="72.2193" > <animate id="sa41" begin="sa40.end" attributeName="stroke-dashoffset" from="72.2193" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s42" d="M157 91C157 94.3137 154.314 97 151 97C147.686 97 145 94.3137 145 91C145 87.6863 147.686 85 151 85C154.314 85 157 87.6863 157 91Z" stroke="black" stroke-width="2" stroke-dasharray="37.7047, 37.7047" stroke-dashoffset="37.7047" > <animate id="sa42" begin="sa41.end" attributeName="stroke-dashoffset" from="37.7047" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s43" d="M158 135V103.5L166.5 95" stroke="black" stroke-width="2" stroke-dasharray="43.5208, 43.5208" stroke-dashoffset="43.5208" > <animate id="sa43" begin="sa42.end" attributeName="stroke-dashoffset" from="43.5208" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s44" d="M176 91C176 94.3137 173.314 97 170 97C166.686 97 164 94.3137 164 91C164 87.6863 166.686 85 170 85C173.314 85 176 87.6863 176 91Z" stroke="black" stroke-width="2" stroke-dasharray="37.7048, 37.7048" stroke-dashoffset="37.7048" > <animate id="sa44" begin="sa43.end" attributeName="stroke-dashoffset" from="37.7048" to="0" dur="0.5s" fill="freeze"/> </path> </g> <g id="sline2"> <path id="s0_2" d="M251 446L251 451L261 451L261 446L251 446ZM261 418C261 415.239 258.761 413 256 413C253.239 413 251 415.239 251 418L261 418ZM261 446L261 418L251 418L251 446L261 446Z" fill="white" stroke-dasharray="131.71, 131.71" stroke-dashoffset="131.71" > <animate id="sa0_2" begin="0s" attributeName="stroke-dashoffset" from="131.71" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s1_2" d="M256.5 418V401.5L233 378V343L265 311V295L307.5 252.5V198" stroke="black" stroke-width="4" stroke-dasharray="260.593, 260.593" stroke-dashoffset="260.593" > <animate id="sa1_2" begin="sa0_2.end" attributeName="stroke-dashoffset" from="260.593" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s2_2" d="M316.5 186.5C316.5 192.023 312.023 196.5 306.5 196.5C300.977 196.5 296.5 192.023 296.5 186.5C296.5 180.977 300.977 176.5 306.5 176.5C312.023 176.5 316.5 180.977 316.5 186.5Z" stroke="black" stroke-width="5" stroke-dasharray="62.8413, 62.8413" stroke-dashoffset="62.8413" > <animate id="sa2_2" begin="sa1_2.end" attributeName="stroke-dashoffset" from="62.8413" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s3_2" d="M308 241L329 221" stroke="black" stroke-width="4" stroke-dasharray="29, 29" stroke-dashoffset="29" > <animate id="sa3_2" begin="sa2_2.end" attributeName="stroke-dashoffset" from="29" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s4_2" d="M344.5 211.5C344.5 217.023 340.023 221.5 334.5 221.5C328.977 221.5 324.5 217.023 324.5 211.5C324.5 205.977 328.977 201.5 334.5 201.5C340.023 201.5 344.5 205.977 344.5 211.5Z" stroke="black" stroke-width="5" stroke-dasharray="62.8413, 62.8413" stroke-dashoffset="62.8413" > <animate id="sa4_2" begin="sa3_2.end" attributeName="stroke-dashoffset" from="62.8413" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s5_2" d="M233 346.5H255L268 359.5H285.5L314.5 330.5H355.5L365 321" stroke="black" stroke-width="4" stroke-dasharray="153.332, 153.332" stroke-dashoffset="153.332" > <animate id="sa5_2" begin="sa4_2.end" attributeName="stroke-dashoffset" from="153.332" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s6_2" d="M378.5 315.5C378.5 319.918 374.918 323.5 370.5 323.5C366.082 323.5 362.5 319.918 362.5 315.5C362.5 311.082 366.082 307.5 370.5 307.5C374.918 307.5 378.5 311.082 378.5 315.5Z" stroke="black" stroke-width="5" stroke-dasharray="50.2724, 50.2724" stroke-dashoffset="50.2724" > <animate id="sa6_2" begin="sa5_2.end" attributeName="stroke-dashoffset" from="50.2724" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s7_2" d="M307 338.5L319.5 351H364" stroke="black" stroke-width="4" stroke-dasharray="62.1777, 62.1777" stroke-dashoffset="62.1777" > <animate id="sa7_2" begin="sa6_2.end" attributeName="stroke-dashoffset" from="62.1777" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s8_2" d="M384.5 350.5C384.5 356.575 379.575 361.5 373.5 361.5C367.425 361.5 362.5 356.575 362.5 350.5C362.5 344.425 367.425 339.5 373.5 339.5C379.575 339.5 384.5 344.425 384.5 350.5Z" stroke="black" stroke-width="5" stroke-dasharray="69.125, 69.125" stroke-dashoffset="69.125" > <animate id="sa8_2" begin="sa7_2.end" attributeName="stroke-dashoffset" from="69.125" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s9_2" d="M265.5 301.5H290.5L318.5 273.5H365.5" stroke="black" stroke-width="3" stroke-dasharray="111.598, 111.598" stroke-dashoffset="111.598" > <animate id="sa9_2" begin="sa8_2.end" attributeName="stroke-dashoffset" from="111.598" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s10_2" d="M384 274.5C384 279.194 380.194 283 375.5 283C370.806 283 367 279.194 367 274.5C367 269.806 370.806 266 375.5 266C380.194 266 384 269.806 384 274.5Z" stroke="black" stroke-width="4" stroke-dasharray="53.4141, 53.4141" stroke-dashoffset="53.4141" > <animate id="sa10_2" begin="sa9_2.end" attributeName="stroke-dashoffset" from="53.4141" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s11_2" d="M244.5 346L252.5 338H277L309.5 305.5H340.5L346 311" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="120.554, 120.554" stroke-dashoffset="120.554" > <animate id="sa11_2" begin="sa10_2.end" attributeName="stroke-dashoffset" from="120.554" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s12_2" d="M354 317.5C354 321.09 351.09 324 347.5 324C343.91 324 341 321.09 341 317.5C341 313.91 343.91 311 347.5 311C351.09 311 354 313.91 354 317.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa12_2" begin="sa11_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s13_2" d="M330 305L342 294" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="16.2788, 16.2788" stroke-dashoffset="16.2788" > <animate id="sa13_2" begin="sa12_2.end" attributeName="stroke-dashoffset" from="16.2788" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s14_2" d="M352 288.5C352 292.09 349.09 295 345.5 295C341.91 295 339 292.09 339 288.5C339 284.91 341.91 282 345.5 282C349.09 282 352 284.91 352 288.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa14_2" begin="sa13_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s15_2" d="M258.5 348.5H278L310.5 316H323" stroke="black" stroke-width="2" stroke-dasharray="77.9619, 77.9619" stroke-dashoffset="77.9619" > <animate id="sa15_2" begin="sa14_2.end" attributeName="stroke-dashoffset" from="77.9619" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s16_2" d="M337 316.5C337 320.09 334.09 323 330.5 323C326.91 323 324 320.09 324 316.5C324 312.91 326.91 310 330.5 310C334.09 310 337 312.91 337 316.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa16_2" begin="sa15_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s17_2" d="M358 330H392.286L398 324" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="42.5715, 42.5715" stroke-dashoffset="42.5715" > <animate id="sa17_2" begin="sa16_2.end" attributeName="stroke-dashoffset" from="42.5715" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s18_2" d="M409 318.5C409 322.09 406.09 325 402.5 325C398.91 325 396 322.09 396 318.5C396 314.91 398.91 312 402.5 312C406.09 312 409 314.91 409 318.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa18_2" begin="sa17_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s19_2" d="M386.5 330L396 339.5H405L413 347.5" stroke="black" stroke-width="2" stroke-dasharray="33.7487, 33.7487" stroke-dashoffset="33.7487" > <animate id="sa19_2" begin="sa18_2.end" attributeName="stroke-dashoffset" from="33.7487" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s20_2" d="M424 352.5C424 356.09 421.09 359 417.5 359C413.91 359 411 356.09 411 352.5C411 348.91 413.91 346 417.5 346C421.09 346 424 348.91 424 352.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa20_2" begin="sa19_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s21_2" d="M289 272H302.028L313.493 261H326" stroke="black" stroke-width="2" stroke-dasharray="41.4236, 41.4236" stroke-dashoffset="41.4236" > <animate id="sa21_2" begin="sa20_2.end" attributeName="stroke-dashoffset" from="41.4236" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s22_2" d="M339 260.5C339 264.09 336.09 267 332.5 267C328.91 267 326 264.09 326 260.5C326 256.91 328.91 254 332.5 254C336.09 254 339 256.91 339 260.5Z" stroke="black" stroke-width="2" stroke-dasharray="40.8469, 40.8469" stroke-dashoffset="40.8469" > <animate id="sa22_2" begin="sa21_2.end" attributeName="stroke-dashoffset" from="40.8469" to="0" dur="0.5s" fill="freeze"/> </path> </g> <g id="sline4"> <path id="s0_4" d="M166 446L166 451L176 451L176 446L166 446ZM176 418C176 415.239 173.761 413 171 413C168.239 413 166 415.239 166 418L176 418ZM176 446L176 418L166 418L166 446L176 446Z" fill="white" stroke-dasharray="131.71, 131.71" stroke-dashoffset="131.71" > <animate id="sa0_4" begin="0s" attributeName="stroke-dashoffset" from="131.71" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s1_4" d="M171.5 417.5V402.5L193.5 380.5V345L137 288.5V269L118 250H89.5L83.5 244V234.5" stroke="black" stroke-width="4" stroke-dasharray="254.371, 254.371" stroke-dashoffset="254.371" > <animate id="sa1_4" begin="sa0_4.end" attributeName="stroke-dashoffset" from="254.371" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s2_4" d="M94.5 223.5C94.5 229.575 89.5751 234.5 83.5 234.5C77.4249 234.5 72.5 229.575 72.5 223.5C72.5 217.425 77.4249 212.5 83.5 212.5C89.5751 212.5 94.5 217.425 94.5 223.5Z" stroke="black" stroke-width="5" stroke-dasharray="69.1247, 69.1247" stroke-dashoffset="69.1247" > <animate id="sa2_4" begin="sa1_4.end" attributeName="stroke-dashoffset" from="69.1247" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s3_4" d="M193 360L178.443 345.337H148.827L140.294 353.933H117.204L78.5529 315H65" stroke="black" stroke-width="4" stroke-dasharray="153.893, 153.893" stroke-dashoffset="153.893" > <animate id="sa3_4" begin="sa2_4.end" attributeName="stroke-dashoffset" from="153.893" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s4_4" d="M63.5 313.5C63.5 319.575 58.5751 324.5 52.5 324.5C46.4249 324.5 41.5 319.575 41.5 313.5C41.5 307.425 46.4249 302.5 52.5 302.5C58.5751 302.5 63.5 307.425 63.5 313.5Z" stroke="black" stroke-width="5" stroke-dasharray="69.1248, 69.1248" stroke-dashoffset="69.1248" > <animate id="sa4_4" begin="sa3_4.end" attributeName="stroke-dashoffset" from="69.1248" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s5_4" d="M158 310H135L112 288" stroke="black" stroke-width="4" stroke-dasharray="54.8277, 54.8277" stroke-dashoffset="54.8277" > <animate id="sa5_4" begin="sa4_4.end" attributeName="stroke-dashoffset" from="54.8277" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s6_4" d="M114 279.5C114 285.299 109.299 290 103.5 290C97.701 290 93 285.299 93 279.5C93 273.701 97.701 269 103.5 269C109.299 269 114 273.701 114 279.5Z" stroke="black" stroke-width="4" stroke-dasharray="65.9829, 65.9829" stroke-dashoffset="65.9829" > <animate id="sa6_4" begin="sa5_4.end" attributeName="stroke-dashoffset" from="65.9829" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s7_4" d="M169 321H129L107 299H90L59 268" stroke="black" stroke-width="2" stroke-dasharray="131.953, 131.953" stroke-dashoffset="131.953" > <animate id="sa7_4" begin="sa6_4.end" attributeName="stroke-dashoffset" from="131.953" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s8_4" d="M61 264C61 267.314 58.3137 270 55 270C51.6863 270 49 267.314 49 264C49 260.686 51.6863 258 55 258C58.3137 258 61 260.686 61 264Z" stroke="black" stroke-width="2" stroke-dasharray="37.7048, 37.7048" stroke-dashoffset="37.7048" > <animate id="sa8_4" begin="sa7_4.end" attributeName="stroke-dashoffset" from="37.7048" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s9_4" d="M92 278H84.7018L66 259.127V249" stroke="black" stroke-width="2" stroke-dasharray="43.9949, 43.9949" stroke-dashoffset="43.9949" > <animate id="sa9_4" begin="sa8_4.end" attributeName="stroke-dashoffset" from="43.9949" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s10_4" d="M72 243C72 246.314 69.3137 249 66 249C62.6863 249 60 246.314 60 243C60 239.686 62.6863 237 66 237C69.3137 237 72 239.686 72 243Z" stroke="black" stroke-width="2" stroke-dasharray="37.7049, 37.7049" stroke-dashoffset="37.7049" > <animate id="sa10_4" begin="sa9_4.end" attributeName="stroke-dashoffset" from="37.7049" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s11_4" d="M186 337V307L172 293" stroke="black" stroke-width="2" stroke-dasharray="49.799, 49.799" stroke-dashoffset="49.799" > <animate id="sa11_4" begin="sa10_4.end" attributeName="stroke-dashoffset" from="49.799" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s12_4" d="M175 286.5C175 290.642 171.642 294 167.5 294C163.358 294 160 290.642 160 286.5C160 282.358 163.358 279 167.5 279C171.642 279 175 282.358 175 286.5Z" stroke="black" stroke-width="2" stroke-dasharray="47.1305, 47.1305" stroke-dashoffset="47.1305" > <animate id="sa12_4" begin="sa11_4.end" attributeName="stroke-dashoffset" from="47.1305" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s13_4" d="M100 336.5L77.5 359H20.5L11.5 350" stroke="black" stroke-width="2" stroke-dasharray="101.548, 101.548" stroke-dashoffset="101.548" > <animate id="sa13_4" begin="sa12_4.end" attributeName="stroke-dashoffset" from="101.548" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s14_4" d="M13 347C13 350.314 10.3137 353 7 353C3.68629 353 1 350.314 1 347C1 343.686 3.68629 341 7 341C10.3137 341 13 343.686 13 347Z" stroke="black" stroke-width="2" stroke-dasharray="37.7048, 37.7048" stroke-dashoffset="37.7048" > <animate id="sa14_4" begin="sa13_4.end" attributeName="stroke-dashoffset" from="37.7048" to="0" dur="0.5s" fill="freeze"/> </path> <path id="s15_4" d="M93 330.5L73 350.5H31L19 338.5V330.5" stroke="black" stroke-width="2" stroke-dasharray="95.2548, 95.2548" stroke-dashoffset="95.2548" > <animate id="sa15_4" begin="sa14_4.end" attributeName="stroke-dashoffset" from="95.2548" to="0" dur="0.5s" fill="freeze"/> </path> </g> </g> </svg>
Автор решения: freestyle_HD
→ Ссылка
Дорожки печатной платы + снег =
"use strict";
let ns = "http://www.w3.org/2000/svg";
let numb_of_snow_items = 100;
document.addEventListener("DOMContentLoaded", function() {
let dpk = document.querySelector('.dpk');
let inner_width = dpk.offsetWidth;
let inner_height = dpk.offsetHeight;
startBtn();
let start_func = function() {
let svg_snow = add_svg_item("snow");
dpk.append(svg_snow);
let i = 0;
while(i < numb_of_snow_items) {
let pat_rand_arr = generateRandPointsOfSnowPath(inner_width);
let stroke_width = randomInteger(1, 5);
let rand_opacity = randomInteger(70, 100);
let path = document.createElementNS(ns, "path");
path.setAttributeNS(null, "d", pat_rand_arr);
path.setAttributeNS(null, "fill", "transparent");
path.setAttributeNS(null, "stroke", `rgb(2 157 215 / ${rand_opacity}%)`);
path.setAttributeNS(null, "stroke-width", stroke_width);
svg_snow.append(path);
let length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
let anim_dur = randomInteger(2, 4);
let anim_delay = randomInteger(0, 2000)/100;
path.style.transition = path.style.WebkitTransition =
`stroke-dashoffset ${anim_dur}s ease-in-out ${anim_delay}s`;
path.style.strokeDashoffset = '0';
path.animate([
{
opacity: '100%'
},
{
opacity: `20%`
}
],
{
duration: (anim_dur + anim_delay)*1000,
iterations: 1
});
let iou_x = +pat_rand_arr[pat_rand_arr.length - 1].split(' ')[1];
let iou_y = +pat_rand_arr[pat_rand_arr.length - 1].split(' ')[2];
setTimeout(() => {
let poly = svgPoly(0.4*stroke_width, `rgb(2 157 215 / ${randomInteger(10, 100)}%)`, "poly_item", iou_x, iou_y);
path.style.transform = path.style.WebkitTransform =
`stroke-dashoffset ${anim_dur}s ease-in-out ${anim_delay}s`;
poly.setAttribute('style', `transform-origin: ${iou_x}px ${iou_y}px`);
svg_snow.append(poly);
let poly_anim_dur = (anim_dur*randomInteger(1, 3))*5000;
setTimeout(() => {
poly.classList.toggle('active');
}, poly_anim_dur/2);
poly.animate([
{
transform: `translateY(0) rotate(0)`
},
{
transform: `translateY(${3000}px) rotate(${randomInteger(-480, 480)}deg)`
}
],
{
duration: poly_anim_dur,
iterations: 1
});
}, (anim_dur + anim_delay)*1000);
i++;
}
setTimeout(() => {
let start_btn = document.querySelector('.dpk button');
if (!start_btn) {
startBtn();
}
}, 25000);
}
window.addEventListener('resize', function() {
inner_width = dpk.offsetWidth;
});
function startBtn() {
let dpk = document.querySelector('.dpk');
let svg_snow = document.querySelector('.snow');
let start_btn = document.createElement('button');
start_btn.textContent = 'start!';
dpk.append(start_btn);
start_btn.addEventListener("click", event => {
start_btn.remove();
if (svg_snow) {
svg_snow.remove();
}
start_func();
});
}
});
function add_svg_item(css_class) {
let svg_snow = document.createElementNS(ns, "svg");
svg_snow.setAttribute("width", "100%");
svg_snow.setAttribute("height", "100%");
svg_snow.setAttribute("class", css_class);
return svg_snow;
}
function randomInteger(min, max) {
let rand = min - 0.5 + Math.random() * (max - min + 1);
return Math.round(rand);
}
function generateRandPointsOfSnowPath(inner_width, inner_height) {
let quantity_of_rand_items = randomInteger(3, 10);
let rand_x_initial = Math.floor(inner_width*randomInteger(0, 100)/100);
let rand_arr = [];
let i = 0;
let iter_func = function(i) {
if (i === 1) {
return `L ${rand_x_initial} ${randomInteger(0, 100)}`;
}
if (i % 2 === 0) {
return `L ${+rand_arr[(i - 1)].split(' ')[1] + randomInteger(-70, 70)} ${+rand_arr[(i - 1)].split(' ')[2] + randomInteger(0, 100)}`;
} else {
return `L ${rand_arr[(i - 1)].split(' ')[1]} ${+rand_arr[(i - 1)].split(' ')[2] + randomInteger(0, 100)}`;
}
}
while(i < quantity_of_rand_items) {
let item;
if (i === 0) {
item = `M ${rand_x_initial} 0`;
} else if (i > 0) {
item = iter_func(i);
}
rand_arr.push(item);
i++;
}
return rand_arr;
}
function svgPoly(poly_k, poly_fill, poly_css_class, iou_x, iou_y) {
let svg_poly = document.createElementNS(ns, "svg");
let base = 46;
svg_poly.setAttribute("width", base*poly_k);
svg_poly.setAttribute("height", base*poly_k);
let arr = [44.1535,34.6644,37.3955,30.762400000000003,43.8697,29.0354,43.1342,26.2782,33.896699999999996,28.742399999999996,28.453500000000002,25.599899999999998,33.949,22.4271,43.1299,24.9242,43.878699999999995,22.1705,37.4311,20.416800000000002,44.1535,16.5356,42.726600000000005,14.064400000000001,35.968599999999995,17.966,37.71,11.4956,34.9545,10.7541,32.4697,19.9861,27.026999999999997,23.1285,27.026999999999997,16.783099999999997,33.779700000000005,10.0809,31.7695,8.0554,27.026999999999997,12.7624,27.026999999999997,5,24.1732,5,24.1732,12.8036,19.4404,8.0604,17.4203,10.076,24.1732,16.843799999999998,24.1732,23.1286,18.6779,19.9558,16.2498,10.756499999999999,13.4906,11.4847,15.195699999999999,17.945500000000003,8.4732,14.064400000000001,7.0465,16.5356,13.804499999999999,20.4373,7.330299999999999,22.1645,8.065999999999999,24.921799999999998,17.3035,22.4574,22.7465,25.599899999999998,17.250999999999998,28.772699999999997,8.0701,26.275799999999997,7.3210999999999995,29.0293,13.768799999999999,30.7832,7.0465,34.6644,8.4732,37.1356,15.231200000000001,33.2337,13.489799999999999,39.7042,16.2457,40.4459,18.7303,31.2137,24.1732,28.0711,24.1732,34.4169,17.4203,41.119099999999996,19.430699999999998,43.144600000000004,24.1732,38.437599999999996,24.1732,46.2,27.026999999999997,46.2,27.026999999999997,38.3964,31.759800000000002,43.1396,33.779700000000005,41.124,27.026999999999997,34.3562,27.026999999999997,28.071199999999997,32.5223,31.243900000000004,34.9502,40.4435,37.7094,39.714999999999996,36.0043,33.2545,42.7268,37.1356];
for(let key of arr.keys()) {
if (key%2 === 0) {
arr[key] = arr[key]*poly_k + iou_x - base*poly_k/2.5;
} else {
arr[key] = arr[key]*poly_k + iou_y - base*poly_k/2;
}
}
let polygon = document.createElementNS(ns, "polygon");
polygon.setAttributeNS(null, "points", arr);
polygon.setAttributeNS(null, "fill", poly_fill);
polygon.setAttributeNS(null, "class", poly_css_class);
return polygon;
}* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.dpk {
width: 100%;
height: 100vh;
position: relative;
background-color: #08051b;
}
.snow {
background-color: #08051b;
}
.snow path {
opacity: 0.2;
}
.snow polygon.active {
display: none;
}
button {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
color: #08051b;
background: rgb(2 157 215 / 100%);
border: none;
border-radius: 3px;
}<div class="dpk"></div>
Автор решения: Nikolya Shirshov
→ Ссылка
- Ёлка
- Гирлянда
- Звезда
- Снег
- Анимация текста
- Панель настроек
Codepen https://codepen.io/everythingmaybe-the-sans/full/jOGKzMp
Github https://github.com/Everythingmaybe/NY2022
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let WIDTH = canvas.width = window.innerWidth;
let HEIGHT = canvas.height = window.innerHeight;
document.body.append(canvas);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
/** SETTINGS **/
/** SHADOWS **/
let SHADOWS = true
/** COLORS **/
let BACKGROUND_COLOR = '#000000';
let TREE_COLOR = '#ffffff';
let TREE_SHADOW_COLOR = '#004CB8';
let SNOWFLAKE_COLOR = '#ffffff';
let SNOWFLAKE_SHADOW_COLOR = '#004CB8';
/** TEXT **/
let TEXT = 'С Новым 2022 Годом!';
let TEXT_INPUT_INTERVAL = 150;
let TEXT_INPUT_DELAY = 1000;
const FONT_FAMILY = 'Press Start 2P';
/** SNOW **/
let SNOWFLAKES_COUNT = 100;
let SNOW_SPEED = 1;
/** WIND **/
let WIND_POWER = 1;
let WIND_SPEED = 1;
/** TREE MAPS **/
const FIRST_TREE_MAP = {middle: {length: 10, size: 4, right: {length: 30, left: {length: 20, left: {length: 15, left: {length: 20, left: {length: 10, right: {length: 25, right: {length: 20, left: {length: 1, size: 2, left: {length: 20, right: {length: 38, right: {length: 8}}}}, middle: {length: 5, left: {length: 1, size: 2, left: {length: 19, right: {length: 30, right: {length: 8, right: {length: 8}}}}}, middle: {length: 5, left: {length: 1, size: 2, left: {length: 17, right: {length: 20, right: { length: 1 }}}}, middle: {length: 12, left: { length: 8 }}}}}}}}}, middle: {length: 12, left: {length: 10, right: {size: 2, length: 20, left: {length: 15,}}, middle: {length: 20, left: {length: 25, size: 2, right: {length: 22, left: {length: 10, right: {length: 30}}}}, middle: {length: 10, left: {length: 15, right: { length: 25 }}, middle: {length: 15, right: {length: 20, middle: {length: 30, size: 2, left: {length: 30}}, left: {length: 5, right: {length: 24, size: 2, left: {length: 24, left: {length: 10, right: {length: 8, right: {length: 1}}}}}, middle: {length: 5, right: {length: 18, size: 2, left: {length: 15, left: {length: 5, left: {length: 1, left: {length: 5}}}}}, middle: {length: 10, left: {length: 25, right: {length: 5, right: {length: 5}}}}}}}}}}}}}}}};
const SECOND_TREE_MAP = {middle: {length: 10, size: 2, left: {length: 17, middle: {length: 0}}}};
const THIRD_TREE_MAP = {middle: {length: 10, size: 5, left: {length: 18, right: {length: 50, right: {length: 20, size: 4, left: {length: 16, right: {length: 50, left: {length: 30, middle: {length: 13}, left: {length: 28, size: 2, right: {length: 1, right: {length: 24, left: {length: 20, right: {length: 1}}}, middle: {length: 5, right: {length: 18, left: {length: 30,}}, middle: {length: 5, right: {length: 12, left: {length: 18, left: {length: 10}}}, middle: {length: 14}}}}}}}}}, middle: {length: 20,/**/ left: {length: 20, right: {length: 10, middle: {length: 28, left: {length: 1}}, left: {length: 38, size: 4, right: {length: 25, left: {length: 25}, middle: {length: 20, size: 2, left: {length: 20, right: {length: 5}}}}}}}, middle: {length: 20, right: {length: 25, size: 2, left: {length: 25}}, middle: {length: 7, right: {length: 14, size: 2, left: {length: 15}}, middle: {length: 50, left: {length: 10, size: 4, right: {length: 20, size: 2}, middle: {length: 20, right: {length: 10, left: {length: 20, size: 2, right: {length: 20, right: {length: 10,}}, middle: {length: 8, right: {length: 20,}}}, middle: {length: 18}}}}, middle: {length: 5, right: {length: 20, left: {length: 25, middle: {length: 30, right: {length: 20, left: {length: 5}}}, left: {length: 15, size: 4, right: {length: 22, left: {length: 25, right: {length: 20, size: 3}}, middle: {length: 45, left: {length: 10, size: 2, right: {length: 15}}, middle: {length: 15, right: {length: 10}, middle: {length: 30, star: true}}}}}}}}}}}}}}}};
const FOURTH_TREE_MAP = {middle: {length: 10, size: 4, left: {length: 30, right: {length: 30, right: {length: 1, right: {length: 10, left: {length: 10, size: 2, right: {length: 10, left: {length: 28, right: {length: 15, left: {length: 15}, middle: {length: 10, right: {length: 6}}}}}}, middle: {length: 5, right: {length: 15, left: {length: 15, left: {length: 20, right: {length: 1, right: {length: 15, left: {length: 30}}}, middle: {length: 10, right: {length: 25, left: {length: 8, size: 3}, middle: {length: 25, size: 2, left: {length: 5}, right: {length: 8, left: {length: 10, right: {length: 10}}}}}}}}}, middle: {length: 14, size: 2, left: {length: 26, right: {length: 14}}}}}, middle: {length: 50, right: {length: 15, size: 3, left: {length: 25, right: {length: 30}}}, left: {length: 10, right: {length: 30, right: {length: 7, size: 2, left: {length: 15, right: {length: 10}}}, middle: {length: 20, right: {length: 8, size: 2, left: {length: 6, right: {length: 10}}}, middle: {length: 17, size: 2, right: {length: 20}}}, left: {length: 14, right: {length: 10, middle: {length: 20}, left: {length: 25, size: 2, right: {length: 10, left: {length: 20, left: {length: 10, left: {length: 10, right: {length: 10, right: {length: 10}}}}}}}}, middle: {length: 43}}}}}},}}}};
/** VARIABLES **/
let WIND = 0;
let TEXT_LENGTH = 0;
let SYMBOL_TIME = 0;
let SHOW_SYMBOL = true;
let TEXT_TIME = 0;
let FONT_COLOR_HLS = 0;
class TreeNode {
left;
right;
middle;
constructor(length, size, star = false) {
this.length = length;
this.size = size;
this.star = star;
this.coefficient = Math.random() * 360;
}
render() {
const prevSize = ctx.lineWidth;
const windDegreeCoefficient = Math.cos(WIND * Math.PI / 180) * WIND_POWER;
this.size && (ctx.lineWidth = this.size);
ctx.strokeStyle = TREE_COLOR;
ctx.shadowColor = TREE_SHADOW_COLOR;
SHADOWS && (ctx.shadowBlur = 30);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -this.length);
ctx.translate(0, -this.length)
ctx.closePath();
ctx.stroke();
if (this.left) this.renderBranch(this.left, -45 + windDegreeCoefficient)
if (this.right) this.renderBranch(this.right, 45 + windDegreeCoefficient)
if (this.middle) this.renderBranch(this.middle, windDegreeCoefficient)
if (!this.left && !this.right && !this.middle && this.length) {
const radius = ctx.lineWidth + ctx.lineWidth * Math.abs(Math.cos(this.coefficient * Math.PI / 180));
ctx.strokeStyle = ctx.shadowColor = `hsl(${this.coefficient},100%,50%)`;
SHADOWS && (ctx.shadowBlur = 10);
if (this.star) {
ctx.lineWidth = radius * .8;
strokeStar(0, -radius * 1.5, 5, radius * 4, radius * 1.5);
} else {
ctx.beginPath();
ctx.arc(0, -radius, radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.closePath();
}
}
ctx.translate(0, this.length);
ctx.lineWidth = prevSize;
}
update() {
this.coefficient -= 0.65;
this.left?.update();
this.right?.update();
this.middle?.update();
}
renderBranch(node, degree) {
ctx.rotate(degree * Math.PI / 180);
node.render();
ctx.rotate(-degree * Math.PI / 180);
}
}
class Snowflake {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.ySpeed = this.size / 6;
this.xSpeed = (Math.round(Math.random()) ? 1 : -1) * this.ySpeed;
}
update() {
const windDegreeCoefficient = Math.cos(WIND * Math.PI / 180) * WIND_POWER;
this.y += this.ySpeed * SNOW_SPEED;
this.x += this.xSpeed * SNOW_SPEED * windDegreeCoefficient;
if (this.y > HEIGHT + this.size * 2) {
this.y = 0;
this.x = Math.random() * WIDTH;
}
}
render() {
ctx.strokeStyle = SNOWFLAKE_COLOR;
ctx.lineWidth = this.size * 0.2;
SHADOWS && (ctx.shadowBlur = 10);
ctx.shadowColor = SNOWFLAKE_SHADOW_COLOR;
strokeStar(this.x, this.y, 10, this.size, this.size * 0.5)
}
}
function step(timestamp) {
render();
update(timestamp);
requestAnimationFrame(step);
}
requestAnimationFrame(step);
let snowflakes = createSnow(SNOWFLAKES_COUNT);
const trees = [
createTree(new TreeNode(30, 7), FIRST_TREE_MAP),
createTree(new TreeNode(30, 7), SECOND_TREE_MAP),
createTree(new TreeNode(30, 7), THIRD_TREE_MAP),
createTree(new TreeNode(30, 7), FOURTH_TREE_MAP),
];
function update(timestamp) {
snowflakes.forEach((item) => item.update());
trees.forEach((item) => item.update());
WIND += WIND_SPEED;
updateText(timestamp)
}
function updateText(timestamp) {
FONT_COLOR_HLS += 0.6;
if (timestamp - SYMBOL_TIME >= 500) {
SHOW_SYMBOL = !SHOW_SYMBOL;
SYMBOL_TIME = timestamp;
}
if (timestamp - TEXT_TIME >= TEXT_INPUT_INTERVAL && TEXT_INPUT_DELAY <= timestamp) {
TEXT_TIME = timestamp;
if (TEXT_LENGTH < TEXT.length) {
TEXT_LENGTH++
}
}
}
function render() {
ctx.fillStyle = BACKGROUND_COLOR;
ctx.fillRect(0, 0, WIDTH, HEIGHT);
renderTree();
snowflakes.forEach((item) => item.render());
renderText();
}
function renderText() {
ctx.font = `${WIDTH / 25}px "${FONT_FAMILY}"`;
ctx.fillStyle = `hsl(${FONT_COLOR_HLS},100%,50%)`;
ctx.shadowColor = `black`;
let text = TEXT.substr(0, TEXT_LENGTH) + (SHOW_SYMBOL ? '|' : ' ');
const textWidth = ctx.measureText(text).width;
ctx.fillText(text, (WIDTH - textWidth)/2, HEIGHT / 3)
}
function renderTree() {
ctx.save();
ctx.translate((WIDTH / 2) - 50, HEIGHT);
trees.forEach((item) => {
ctx.strokeStyle = TREE_COLOR;
item.render();
ctx.translate(25, 0)
})
ctx.restore();
}
function createTree(parentNode, map) {
['left', 'right', 'middle'].forEach((branch) => {
if (map[branch]) {
const node = new TreeNode(map[branch].length, map[branch].size, map[branch].star);
parentNode[branch] = node;
createTree(node, map[branch])
}
})
return parentNode;
}
function createSnow(count) {
const snowflakes = [];
for (let i = 0; i < count; i++) {
const x = WIDTH * Math.random();
const y = HEIGHT * Math.random();
const size = 25 * Math.random();
snowflakes.push(new Snowflake(x, y, size))
}
return snowflakes;
}
function strokeStar(cx, cy, spikes, outerRadius, innerRadius) {
let rot = Math.PI / 2 * 3;
let x = cx;
let y = cy;
let step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius)
for (let i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y)
rot += step
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y)
rot += step
}
ctx.lineTo(cx, cy - outerRadius)
ctx.closePath();
ctx.stroke();
}
window.addEventListener('resize', () => {
WIDTH = canvas.width = window.innerWidth;
HEIGHT = canvas.height = window.innerHeight;
snowflakes = createSnow(SNOWFLAKES_COUNT);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
})
const textInput = document.getElementById('textInput');
textInput.value = TEXT;
textInput.addEventListener('change', (e) => {
TEXT = e.target.value;
TEXT_LENGTH = 0;
})
const textIntervalInput = document.getElementById('textIntervalInput');
textIntervalInput.value = TEXT_INPUT_INTERVAL;
textIntervalInput.addEventListener('change', (e) => {
TEXT_INPUT_INTERVAL = Number(e.target.value);
})
const windPowerInput = document.getElementById('windPowerInput');
windPowerInput.value = WIND_POWER;
windPowerInput.addEventListener('change', (e) => {
WIND_POWER = Number(e.target.value);
})
const snowflakeCountInput = document.getElementById('snowflakeCountInput');
snowflakeCountInput.value = SNOWFLAKES_COUNT;
snowflakeCountInput.addEventListener('change', (e) => {
SNOWFLAKES_COUNT = Number(e.target.value);
snowflakes = createSnow(SNOWFLAKES_COUNT)
})
const backgroundColorInput = document.getElementById('backgroundColorInput');
backgroundColorInput.value = BACKGROUND_COLOR;
backgroundColorInput.addEventListener('change', (e) => {
BACKGROUND_COLOR = e.target.value;
})
const treeColorInput = document.getElementById('treeColorInput');
treeColorInput.value = TREE_COLOR;
treeColorInput.addEventListener('change', (e) => {
TREE_COLOR = e.target.value;
})
const snowColorInput = document.getElementById('snowColorInput');
snowColorInput.value = SNOWFLAKE_COLOR;
snowColorInput.addEventListener('change', (e) => {
SNOWFLAKE_COLOR = e.target.value;
})
const treeShadowColorInput = document.getElementById('treeShadowColorInput');
treeShadowColorInput.value = TREE_SHADOW_COLOR;
treeShadowColorInput.addEventListener('change', (e) => {
TREE_SHADOW_COLOR = e.target.value;
})
const snowShadowColorInput = document.getElementById('snowShadowColorInput');
snowShadowColorInput.value = SNOWFLAKE_SHADOW_COLOR;
snowShadowColorInput.addEventListener('change', (e) => {
SNOWFLAKE_SHADOW_COLOR = e.target.value;
})
const windSpeedInput = document.getElementById('windSpeedInput');
windSpeedInput.value = WIND_SPEED;
windSpeedInput.addEventListener('change', (e) => {
WIND_SPEED = Number(e.target.value)
})
const snowSpeedInput = document.getElementById('snowSpeedInput');
snowSpeedInput.value = SNOW_SPEED;
snowSpeedInput.addEventListener('change', (e) => {
SNOW_SPEED = Number(e.target.value)
})
const shadowsInput = document.getElementById('shadowsInput');
shadowsInput.checked = SHADOWS;
shadowsInput.addEventListener('change', (e) => {
SHADOWS = Boolean(e.target.checked);
ctx.shadowBlur = 0;
})body {
margin: 0;
font-family: 'Press Start 2P', cursive;
}
canvas {
display: block
}
#settings {
position: fixed;
left: 4px;
bottom: 4px;
background-color: #fff;
width: auto;
height: auto;
padding: 20px;
border-radius: 5px;
font-size: 10px;
box-shadow: 0 0 10px black;
}
#settings > div {
margin-bottom: 10px;
}
label {
display: flex;
align-items: center;
justify-content: space-around;
}
label span {
flex-grow: 1;
margin-right: 10px;
}
label input {
margin-top: 4px;
width: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NY2022</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="settings">
<div>
<label>
<span>Текст</span>
<input id="textInput" type="text">
</label>
</div>
<div>
<label>
<span>Задержка ввода</span>
<input id="textIntervalInput" type="number">
</label>
</div>
<div>
<label>
<span>Сила ветра</span>
<input id="windPowerInput" type="number">
</label>
</div>
<div>
<label>
<span>Скорость ветра</span>
<input id="windSpeedInput" type="number">
</label>
</div>
<div>
<label>
<span>Скорость снега</span>
<input id="snowSpeedInput" type="number">
</label>
</div>
<div>
<label>
<span>Количество снежинок</span>
<input id="snowflakeCountInput" type="number">
</label>
</div>
<div>
<label>
<span>Цвет фона</span>
<input id="backgroundColorInput" type="color">
</label>
</div>
<div>
<label>
<span>Цвет ёлки</span>
<input id="treeColorInput" type="color">
</label>
</div>
<div>
<label>
<span>Цвет снежинок</span>
<input id="snowColorInput" type="color">
</label>
</div>
<div>
<label>
<span>Цвет тени ёлки</span>
<input id="treeShadowColorInput" type="color">
</label>
</div>
<div>
<label>
<span>Цвет тени снега</span>
<input id="snowShadowColorInput" type="color">
</label>
</div>
<div>
<label>
<span>Тени</span>
<input id="shadowsInput" type="checkbox">
</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Автор решения: Alexandr_TT
→ Ссылка
Поздравляю всех с наступившим Новым 2022 годом!
В анимацию я добавил некую интерактивность:
- Снеговик моргает глазами, машет руками-ветками, если кликнуть по нему и удерживать курсор.
- Дед мороз двигается к ёлке и снегурочке, если удерживать левую клавишу мышки
- Снегурочка появляется после нажатия на кнопку Start
В приложении использован трек группы The_Beatles - Let It Be в исполнении Chris de Burgh
.container {
width:90vw;
height:90vh;
}
#handLeft {
transform-origin:top left;
transform-box: fill-box;
}
#snowMan:hover #handLeft {
animation: rotate 0.5s linear;
animation-iteration-count: 5;
animation-iteration-count: 5;
}
@keyframes rotate {
0% {transform:rotate(0deg);}
50% {transform:rotate(-75deg);}
100% {transform:rotate(0deg);}
}
#handRight {
transform-origin:top right;
transform-box: fill-box;
}
#snowMan:hover #handRight {
animation: rotate2 0.5s linear;
animation-iteration-count: 3;
}
@keyframes rotate2 {
0% {transform:rotate(0deg);}
50% {transform:rotate(75deg);}
100% {transform:rotate(0deg);}
}
#snowMan:hover {
animation: run1 0.5s forwards;
animation-iteration-count: 3;
}
@keyframes run1 {
0%{transform:translateY(5px);}
50%{transform:translateY(-30px);}
100%{transform:translateY(5px);}
}
#snowMan:hover + #ManShadow {
animation:shadow 0.5s linear forwards;
animation-iteration-count: 3;
}
@keyframes shadow {
0%{transform:scaleX(1);}
50%{transform:scaleX(0.9);}
100%{transform:scaleX(1);}
}
#snowMan:hover #mouth {
animation:mouth 0.5s linear forwards;
animation-iteration-count: 3;
}
@keyframes mouth {
0%{transform:scaleX(1);}
25%{transform:scaleX(1.02);}
75%{transform:scaleX(0.99);}
100%{transform:scaleX(1);}
}
#Maiden {
transform-origin:center;
transform-box:fiil-box;
}
#Ded:active {
transform-origin:center;
transform-box: fill-box;
animation:Dm 4s linear forwards ;
animation-iteration-count: 1;
}
@keyframes Dm {
0%{transform:translateX(-45px);}
100%{transform:translateX(-435px);}
}
#use1 {
fill:url(#RG1);
filter:url(#filter5);
}
#use2 {
fill:url(#RG2);
filter:url(#filter5);
}
#use3 {
fill:url(#RG3);
filter:url(#filter5);
}<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYmin meet" viewBox="0 0 1024 747">
<defs>
<filter id="myfilter" x="-20%" y="-20%" width="150%" height="150%" >
<feGaussianBlur stdDeviation="10" result="reverse-mask"/>
</filter>
<filter id="filter5" x="-20%" y="-20%" width="150%" height="150%" >
<feGaussianBlur stdDeviation="5" result="reverse-mask"/>
</filter>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
<radialGradient id="RG1" fx="50%" fy="50%" r="0%">
<stop offset="0%" stop-color ="gold" />
<stop offset="95%" stop-color ="#057BD0" />
<animate id="anFlake1"
attributeName="r"
dur="1.5s"
begin="Yes_Girl.begin+2s;anFlake3.end"
values="0%;120%;0%"
repeatCount="2"
restart="whenNotActive"
fill="freeze" />
</radialGradient>
<radialGradient id="RG2" fx="50%" fy="50%" r="0%">
<stop offset="0%" stop-color ="red" />
<stop offset="100%" stop-color ="#057BD0" />
<animate id="anFlake2"
attributeName="r"
dur="1.5s"
begin="Yes_Girl.begin+1.5s;anFlake1.end"
values="0%;130%;0%"
repeatCount="2"
restart="whenNotActive"
fill="freeze" />
</radialGradient>
<radialGradient id="RG3" fx="50%" fy="50%" r="0%">
<stop offset="0%" stop-color ="lime" />
<stop offset="95%" stop-color ="#057BD0" />
<animate id="anFlake3"
attributeName="r"
dur="1.5s"
begin="Yes_Girlbegin+1.5s;anFlake2.end"
values="0%;120%;0%"
repeatCount="1"
restart="whenNotActive"
fill="freeze" />
</radialGradient>
</defs>
<desc> Новогодняя анимация 2022г автор @Alexandr_TT
Использован трек группы Beatles - Let It Be в исполнении Chris de Burgh </desc>
<image xlink:href="https://i.stack.imgur.com/ZmYmA.jpg" id="image2" height="100%" width="100%" />
<g id="btn" opacity="1" onclick='play()' >
<rect x="5" y="10" rx="15" id="rec1" width="100px" height="40px" fill="#4975B2" />
<text x="23" y="40" font-size="32" fill="white"> Start </text>
<animate attributeName="opacity" begin="btn.click" dur="0.5s" values="1;0" fill="freeze" />
</g>
<!-- Центральная дорожка -->
<path id="trGold" stroke-dasharray="493" stroke-dashoffset="493" d="m535.7 709-.8-10.3-14.2-16.6.8-192.3 19.8-23.7v-19l-20.6-21.4s.7-38.5-.8-57.7c0 0 10.1-7.8 10.3-13.5.1-4.7-8-11.9-8-11.9s-5.4-19.3 0-26c3.1-3.9 10.7 0 14.3-3.2 3.1-2.8 5.4-8 4-12-1.8-4.7-7-5.1-13-7.8-8.5-3.8-10-25.7-10-25.7" fill="none" stroke="gold" stroke-width="8" >
<animate id="anStr" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+2s;anStr.end+1.5s" dur="1s" values="493;0" fill="freeze" restart="whenNotActive" />
</path>
<circle filter="url(#myfilter)" id="crc" cx="0" cy="0" r="20" fill="gold" >
<animateMotion id="anM" begin="Yes_Girl.begin+2s;anM.end+1.5s" dur="1s" restart="whenNotActive" fill="freeze" >
<mpath xlink:href="#trGold" />
</animateMotion>
</circle>
<!-- Зелёная левая нижняя -->
<path id="trGreen" stroke-dasharray="228.4" stroke-dashoffset="228.4" d="m478 708 .4-12 21.8-22.3.6-19.5-14.4-14.1h-29.3l-6.9 7.3-23.2.4-41-41-25 .9" fill="none" stroke="#00FF00" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anGreen" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+5s;anGreen.end+2s" dur="1.2s" values="228.4;0" fill="freeze" restart="whenNotActive" />
</path>
<circle filter="url(#myfilter)" id="crcGreen" cx="0" cy="0" r="20" fill="green" >
<animateMotion id="amGreen" begin="Yes_Girl.begin+5s;amGreen.end+2s" dur="1.2s" restart="whenNotActive" fill="freeze" >
<mpath xlink:href="#trGreen" />
</animateMotion>
< </circle>
<!-- Оранжевая левая -->
<path id="trOrange" stroke-dasharray="254.8" stroke-dashoffset="254.8" d="M506.4 706.2v-9.6l-12.9-14 6.7-8.9 1.2-33-54.3-55.4-1.1-24.6-20.2-19-25.7-.6-6.7-5-.6-18" fill="none" stroke="#f36700" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anOrange" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+6.5s;anOrange.end+1.5s" dur="1.5s" values="254.8;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcOrange" cx="0" cy="0" r="20" fill="orange" >
<animateMotion id="amOrange" begin="Yes_Girl.begin+6.5s;amOrange.end+1.5s" dur="1.5s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trOrange" />
</animateMotion>
</circle>
<!-- Красная левая -->
<path id="trRed" stroke-dasharray="294.4" stroke-dashoffset="294.4" d="m535.7 709-.8-10.3-14.2-16.6.2-86.2-20.7-20.1v-9l-35.8-33.5 1.7-30.3-7.8-7.8-4-9-25.7-28" fill="none" stroke="red" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anRed" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+3.5s;anRed.end+2s" dur="1.5s" values="294.4;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcRed" cx="0" cy="0" r="20" fill="red" >
<animateMotion id="amRed" begin="Yes_Girl.begin+3.5s;amRed.end+2s" dur="1.5s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trRed" />
</animateMotion>
</circle>
<!-- Синий правый -->
<path id="trBlue" stroke-dasharray="293.8" stroke-dashoffset="293.8" d="M535.7 709s.5-7.1-.8-10.3c-2.8-6.7-14.2-16.6-14.2-16.6l-.3-57.6 21.8-19s.4-10 .2-19.3c-.2-4.9 10.9-1.2 11-10.4 0-8.2-4.6-6.8-4-10.7a483.3 483.3 0 0 1 33-31.3c2.7-2.3 2.6-6.6 4.3-8.9 1.9-2.4 6.7-1.3 8.5-3.8 2.3-3.2 3-8.3 1.1-11.7-1.8-3.3-10.1-1.3-10-5 0-14.3 2.3-37.7 2.3-37.7" fill="none" stroke="#3E3EFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anBlue" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+1s;anBlue.end+1.5s" dur="1.5s" values="293.8;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcBlue" cx="0" cy="0" r="20" fill="blue" >
<animateMotion id="amBlue" begin="Yes_Girl.begin+1s;amBlue.end+1.5s" dur="1.5s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trBlue" />
</animateMotion>
</circle>
<!-- Пурпурный правый -->
<path id="trPurple" stroke-dasharray="231.5" stroke-dashoffset="231.5" d="m564 704.5-.5-8.4-21.9-22.7-.5-31.6 24.6.6L578 654l15.7-1.1 23-20.1 11.7 12.8 54.8.6v0" fill="none" stroke="purple" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anPurple" attributeName="stroke-dashoffset" begin="Yes_Girl.begin;anPurple.end+2.5s" dur="1.5s" values="231.5;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcPurple" cx="0" cy="0" r="20" fill="purple" >
<animateMotion id="amPurple" begin="Yes_Girl.begin;amPurple.end+2.5s" dur="1.5s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trPurple" />
</animateMotion>
</circle>
<!-- yellowgreen правый -->
<path id="trYellow" stroke-dasharray="253.4" stroke-dashoffset="253.4" d="m564.6 710.6-1.1-14.5-21.9-22.7-1-35.6 35.2-34v-14l41.2-42 .6-12 25.3-28.3" fill="none" stroke="lime" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anYellow" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+2s;anYellow.end+1.5s" dur="1s" values="253.4;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcYellow" cx="0" cy="0" r="20" fill="lime" >
<animateMotion id="amYellow" begin="Yes_Girl.begin+2s;amYellow.end+1.5s" dur="1s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trYellow" />
</animateMotion>
</circle>
<!-- Pink правый -->
<path id="trPink" stroke-dasharray="366.6" stroke-dashoffset="366.6" d="m535.7 709-.8-10.3-14.2-16.6 1.6-196.3 16.6-16.5v-68.7l18.4-19-.6-19.6" fill="none" stroke="#711EFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anPink" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+4s;anPink.end+1.5s" dur="1s" values="366.6;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcPink" cx="0" cy="0" r="20" fill="#711EFF" >
<animateMotion id="amPink" begin="Yes_Girl.begin+4s;amPink.end+1.5s" dur="1s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trPink" />
</animateMotion>
</circle>
<!-- Lime правый -->
<path id="trLime" stroke-dasharray="366.6" stroke-dashoffset="366.6" d="m535.7 709-.8-10.3-14.2-16.6.8-182.4-31.9-29.7-.6-17.3-30.7-28.6.5-38" fill="none" stroke="#50FFF3" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" >
<animate id="anPink" attributeName="stroke-dashoffset" begin="Yes_Girl.begin+4s;anPink.end+2s" dur="1s" values="366.6;0" fill="freeze" restart="whenNotActive" >
</path>
<circle filter="url(#myfilter)" id="crcPink" cx="0" cy="0" r="20" fill="#50FFF3" >
<animateMotion id="amPink" begin="Yes_Girl.begin+4s;amPink.end+2s" dur="1s" restart="whenNotActive" fill="freeze" additive="sum" >
<mpath xlink:href="#trLime" />
</animateMotion>
</circle>
<path id="path834" fill="white" stroke="grey" stroke-width="1" d="M0 738c-.8-19.6 54.3-10.6 73.9-11.1 34-1 65.6-2.4 98.4-2.3 64.6.2 129.5.6 193.6 5.6 27.6 2.1 55 .6 82.5-.1 49.4-1.3 98.6-7.8 148-7.7 45 0 134.8 7.6 134.8 7.6l95.8 8 112-2.2 58.1-1.1 26.9-1.1V747s-693.1 2.4-1024 0c-2.1-2.1.1-6 0-9z"/>
<g id="snowMan" style="transform:translateY(5px)" >
<path id="bodyMan" fill="white" stroke="#BBC2C7" stroke-width="1" d="M64.3 660.8A44.1 44.1 0 0 0 50.2 695c.4 5.8 1.8 11.8 4.8 16.7a33.6 33.6 0 0 0 21.5 14.7c4.7 1.2 9.6 1.8 14.4 1.8 5.9 0 12-.2 17.5-2a43.7 43.7 0 0 0 19.6-11.4c3.7-4.3 5.7-10 6.3-15.7.8-7.3-1-15-3.5-22-1.3-3.5-3.6-6.7-5.7-9.9-1.5-2.1-3-4.3-5-6-4.4-4-9.5-7.7-15.2-9.4a42 42 0 0 0-20.3-.4c-7.3 1.6-14.3 5-20.3 9.5z" />
<path id="scarf" fill="#1A92B7" stroke="#000" stroke-width="0" d="M66.2 652.6c-1 .4-2.3.7-3 1.7a4 4 0 0 0-.7 3.3c.6 2 2.6 3.2 4.4 4.2 2 1.2 4.3 1.8 6.5 2.2 5.2 1.1 10.5 1.2 15.7 1.4 2 .2 4.1.1 6.2.2 1.3 0 3.1-1 3.9.1 1.6 2.2 0 9 .5 13.4.4 3.5 0 7.6 2 10.5 1.3 2 3.6 3.3 5.9 4 1.7.5 4 1 5.3-.2 3.2-2.8-.5-13.2-1.6-17.3-.6-2.8-1.3-5.6-2.2-8.3-.4-1.3-.9-1.7-1.5-3.8-.5-1.3 5-1 7.2-2.2 2-1 4.1-2.3 5.4-4.2.7-1 1.3-2.5 1-3.8a6 6 0 0 0-3-3.7c-.7-.4-1.6-.2-2.4-.3-3.8-.4-7.6-.8-11.4-.9-7-.1-14 0-20.9.5-3.4.2-6.8.3-10 1-2.5.4-5 1.2-7.3 2.2z" />
<path id="headMan" fill="white" stroke="#BBC2C7" stroke-width="1" stroke-linecap="butt" d="M87.4 599.8c8 .4 15.7 5.3 21.2 11 5.6 6 9.7 14.3 10.1 22.4.3 6.5-1.8 13.7-6.1 18.4-3.5 3.9-9.2 5.5-14.3 6.4-7.2 1.2-15.1.9-22-1.8a29.7 29.7 0 0 1-14.6-11.7 27.6 27.6 0 0 1-3.1-18.4 34.1 34.1 0 0 1 11-19.2 26.6 26.6 0 0 1 17.8-7z" />
<!-- анимация правой руки -->
<path id="handRight" fill="none" stroke="#8f6513" stroke-width="3" d="m54.2 672.6-15 19.3H26.3l12.9.3-10.7 7.5 10.4-7.3-4.2 11 4.2-11 4.2 9.3" stroke-linecap="round" >
</path>
<path id="handLeft" fill="none" stroke="#8f6513" stroke-width="3" d="m128.3 672.6 21.1 20.4 10.3-4.2-9.7 4.2 9 5.3-9.6-5.3 3.6 10.4-3.6-10.4-5.6 9.5" id="path832" fill="none" stroke="#5d6766" stroke-linecap="round" stroke-linejoin="round" />
<ellipse id="eyeRight" cx="80.74" cy="624" rx="5" ry="4" fill="#151515" >
<animate id="anEye" attributeName="ry" dur="1s" begin="snowMan.click;anEye.end+2s" keyTimes=" 0;0.25;0.5;0.75;1" values="4;0;4;0;4" restart="whenNotActive" restart="whenNotActive" />
</ellipse>
<ellipse id="eyeLeft" cx="98.48" cy="621" rx="5" ry="4" fill="#151515" >
<animate id="anEye2" attributeName="ry" dur="1s" begin="snowMan.click;anEye2.end+2s" keyTimes=" 0;0.25;0.5;0.75;1" values="4;0;4;0;4" restart="whenNotActive" restart="whenNotActive" />
</ellipse>
<path id="nose" fill="#DB7816" stroke="#8B4D0E" d="M91.9 628.5c1-.4 2.3-.2 3.4 0 1.2.3 2.3 1.2 3.6 1.4 1.6.3 3.3-.1 4.9 0 2.3.2 4.7.3 7 1 1.4.4 2.8 1 4 2 .4.4 1.3.8 1.2 1.5-.2.7-1.2.8-1.9 1-2.3.8-4.8.8-7.2 1-2.6.4-5.2.6-7.9.6-2 0-4.3.3-6.3-.4a6 6 0 0 1-2.9-2c-.6-.8-1-2-.8-3 .3-1.4 1.6-2.5 2.9-3z" />
<path id="mouth" fill="none" stroke="#151515" stroke-width="2" stroke-linecap="round" d="M77.2 641s2.9 1.3 4 2.5c.7.8.4 2.6 1.5 3 1.2.3 2.2-1.7 3.5-1.9 1.6-.2 4.9 1.3 4.9 1.3l7-.5 3.5-1 4.9-3.6" />
</g>
<!-- Тень снеговика -->
<path id="ManShadow" fill="#BDC5CA" d="M74.4 731.7c11.6-1.3 23.3-.5 35 0 7.3.3 16 1 21.8 2 12.6 2 5.8 8-.4 8.8a393.5 393.5 0 0 1-66.7 2.1c-3.7-.2-13.8-2.9-14.7-5.7-2-5.6 17-7.1 25-7.2z" />
<!-- Снегурочка -->
<g>
<image id="Maiden" xlink:href="https://i.stack.imgur.com/qWesE.png" x="80" y="450" width="40%" height="40%" style="opacity:0" >
<!-- Появление Снегурочки -->
<animate
id="Yes_Girl"
attributeName="opacity"
begin="btn.click+1s"
dur="1s"
values="0;1"
restart="whenNotActive"
fill="freeze"
additive="sum" />
<!-- Движения Снегурочки -->
<animateTransform id="anMaiden"
attributeName="transform"
type="translate"
begin="Yes_Girl.end;anMaiden.end+2s"
values="
0 0;
20 -10;
30 0;
40 -10;
50 0;
40 -10;
30 10;
20 -10;
0 0 "
dur="3s"
repeatCount="2"
additive="sum"
restart="whenNotActive" />
<animateTransform id="skewMaiden"
attributeName="transform"
type="rotate"
begin="Yes_Girl.end;skewMaiden.end+2s"
values="0;2;0;-2;0;2;0;-2;0"
dur="3s"
additive="sum"
restart="whenNotActive" />
</image>
</g>
<g id="Ded" cursor="pointer"> <!-- Дед Мороз -->
<image xlink:href="https://i.stack.imgur.com/uF5lJ.png" x="700" y="450" width="40%" height="40%" />
</g>
<!-- Контур Ёлки -->
<path id="btn" d="M520.7 189.1c-20.1.5-44.4-7-60.2 5.6-25.3 20.2-19.4 61.9-30 92.5-7.3 21-9.5 45-23 62.6-13.7 18-43.2 20.4-55.4 39.5-15.6 24.7-1 61.1-15.8 86.3-8.5 14.3-31 16.8-38.8 31.6-15 29.1 11.4 71-7 98.2-7.3 10.6-31.8 4.1-35 16.6-10 39.9 31.8 98.6 72.9 99.7 126.7 3.2 225.2 1.6 353 4 20.9.3 39-17.6 53.7-32.5 15.4-15.5 28.2-35 33.3-56.2 6.2-26.2 1.6-54.7-5.6-80.7-7.1-25.7-23.6-47.8-36.4-71.2-10.5-19.3-23.8-37.1-33.2-57-10-21.4-11-47-24.5-66.5-11.2-16-34.9-21-44.4-38-9-16.3-4.4-37.1-8.7-55.3-6-25.9-2.7-59.8-23.7-76-18.8-14.5-47.5-3.7-71.2-3.2z" fill="transparent" stroke="none" />
<!-- Копии снежинок -->
<use id="use1" href="#Snowflake" transform="translate(-187,23)" />
<use id="use2" href="#Snowflake" />
<use id="use3" href="#Snowflake" transform="translate(420,-135)" fill="red" />
<!-- Анимация текста Новый Год! -->
<!-- Траектория движения Текста -->
<path id="NY_path" d="m 973.8,682.9 c 0,0 24.8,-274.1 4.6,-497.1 C 936.41505,-12.745407 653.87005,96.868422 582.65726,117.54355 363.45726,205.24355 342,782.2 145.1,652.1 87.950564,582.9199 33.885823,269.52634 87.077159,180.65056 140.09173,124.9805 218.60403,107.29871 291.29005,93.047309 461.25172,59.723263 810.799,102.40625 810.799,102.40625" fill="none" stroke="none" />
<text text-anchor="middle" font-size="64" font-weght="900" fill="#50FFF3" stroke="grey" stroke-width="1" filter="url(#shadow)" opacity="1" >
<textPath id="result" method="align" spacing="auto" startOffset="-10%" xlink:href="#NY_path"><tspan dx="0" dy="0">С Новым 2022 годом!</tspan>
<!-- Движение фразы вдоль кривой линии -->
<animate id="NY_move"
begin ="btn.click+5s;NY_move.end+15s"
dur="8s"
restart="whenNotActive"
attributeName="startOffset"
values="0%;90%"
fill="freeze"
</textPath>
</text>
<!-- Снежинка -->
<defs>
<path id="Snowflake" stroke="none" opacity="1" stroke-width="1" d="m331.2 178.8-8-4.1s-3.5-.6-4.3.6c-.8 1.2 1.2 4.3 1.2 4.3l8.5 5v4l-9.3-4.8s-2.9.1-3.6 1.2c-.6 1 .4 3.7.4 3.7l12.1 7 .6 33.6-13-20.8 5.5-12.5s-1.1-2-2-2.5c-1-.6-3.4-.8-3.4-.8l-3.1 8.5-3.2-3.4s-2.7-.8-3.8-.2c-.8.5-1.3 2.4-1.3 2.4l2.7 4.6-11-.2s-2.4 1.4-2.4 2.5c0 1.4 2.7 3.2 2.7 3.2l14 1 13.3 23.1-32-16.2-.6-13.8s-1.4-2.4-2.6-2.6c-.9-.2-2.5 1-2.5 1l-.2 11.3-3.4-1.4-.2-9.5s-1.4-1.6-2.4-2c-1-.4-3.5-.2-3.5-.2l-.2 8-6.4-3.3s-2.5 0-3.1.8c-.8 1.1.2 4 .2 4l6.1 3.4-7 6.7s.2 2 .9 2.8c.6.7 2.7 1 2.7 1l9.7-6.6 4.4 1.8-10.9 7.9c-1.4 1.9-.7 3 .2 4 .9 1 4 .6 4 .6l11.6-9.1 29.7 16.8h-24.5l-7.7-10.7h-3.4l-1.6 4.1 5.4 6.8-4.6-.2s-2.6 1.3-2.8 2.5c-.2 1.4 2 3.6 2 3.6l5.4.4-6 7.7s.5 2.7 1.4 3.6c.7.6 2.6.8 2.6.8l9.3-12.5 28.5-.4-32.7 20.8-13.6-9.7s-2.7.3-3.4 1.4c-.6.9.2 3.1.2 3.1l11 7.6-3.7 2.1-9-5.7s-3.2-.9-4.2 0c-1.1.9-.8 4.1-.8 4.1l7.9 5.8-7.5 3.7s.5 3 1.4 4c.7.9 3 1.6 3 1.6l5-3.4.9 6.5s2.2 1 3.3.6c1-.2 2.4-2 2.4-2l-.6-10 4-1 .8 10s1.5 1 2.3 1.3c1 .2 3-.2 3-.2l.4-14.5 28.3-17.6-10 20.8-14 1.6s-1.7 2.5-1.5 4c.1 1 2 2.7 2 2.7l9-1.6-1.3 4.8s.8 1.9 1.7 2.3c1 .5 3.2 0 3.2 0l2.2-3.3 3.7 9s2.5.8 3.6.3c1.3-.7 2.4-3.6 2.4-3.6l-6.4-12.5 12.1-21.5L329 290l-13 7.3s-1 3.1-.3 4.4c.6 1 3 1.8 3 1.8l9.5-5.6-.2 4.8-8.1 5s-.6 2.3 0 3.3c.5.9 2.8 1.4 2.8 1.4l5.7-3v7.5s1.8 1.3 2.8 1.2c1 0 3-1.6 3-1.6v-7.3l7.6 2.4s2.7 0 3.6-.8c.8-.8.8-3.2.8-3.2l-11.9-5.5-.4-4.8 13 6s2.6-.6 3-1.6c.6-1.3-1-4-1-4l-15-7.5.4-36.4L349 278l-4.8 12s.6 2.2 1.4 2.9c.7.6 2.6.8 2.6.8l5-8.7 3.3 4.5s2.7 0 3.5-1c.8-.8.4-3.3.4-3.3l-3-3.6 11 1.2s1.9-1.3 2.1-2.4c.4-1.5-1.2-4.5-1.2-4.5l-15.4-.6-12.3-21.8 30.1 16-.4 17.5s1.7 1 2.6 1c1.2 0 3.4-1.2 3.4-1.2V273l4 1.4-.7 12.8s1.7 1.5 2.8 1.6c1 .1 2.8-1 2.8-1l.2-10 8 3.7s2.2 0 2.8-.8c1-1 .6-4.1.6-4.1l-6.5-4 5.5-3.6s0-2.2-.5-3.1c-.5-.7-2-1.6-2-1.6l-9.3 5-3.4-1.8 8.1-6.2s1.2-2.3.6-3.3c-.5-1-3.1-1.4-3.1-1.4l-11.5 6.7-31.3-16.6 26.3-1.2 8.3 12.3s2.4.2 3.2-.4c1.1-.9 1.6-4 1.6-4l-5.6-7.1 5.2-.2s2-1.3 2.2-2.4c.2-1-1.2-3-1.2-3l-5.6-.7 5-7.4s.4-3-.6-4c-.9-.6-3.4 0-3.4 0l-9.5 11.4-24.1-.2 28.3-16.8 13.2 7s2.3-.8 2.8-1.7c.6-1 .2-3.4.2-3.4l-9.5-5.1 3.4-2.6 9.3 4.8s2.3-.5 2.7-1.4c.5-1-.7-3.4-.7-3.4l-4.6-3.1 5.3-4.2s.6-2.4 0-3.4c-.7-1.1-3.7-1.7-3.7-1.7l-6 3.7-1-7.7s-2-3.2-3.5-3.2c-1.2 0-2.8 2.4-2.8 2.4l.6 13-2.7 1.8-.8-13s-2.2-2-3.6-2.2c-1.1-.1-3.2 1.2-3.2 1.2l.6 17.4-29.8 17.4 13.6-24.3 13.9-1.6s1-2 1-3c-.2-1-1.6-2.3-1.6-2.3l-8.3-.2s1.4-3.4 1-5c-.4-1.2-1.4-2.8-2.6-2.8-2.1.2-3.6 5.2-3.6 5.2l-6.1-9.7s-3.3-2-4.6-1c-1.2 1-.4 4.6-.4 4.6l5.8 13.4-14.5 23.5-.2-36 15.9-7.9s-.2-2.4-.8-3.3c-.5-.8-2.2-1.8-2.2-1.8l-12.5 5.7-.8-4.5 11.3-5.2s1.3-2 1-3c-.4-1.2-3.2-2.1-3.2-2.1z" />
</defs>
</svg>
</div>
<script>
var zodiac = new Audio();
zodiac.src = 'https://svg-art.ru/files/Let It Be.mp3';
function play() {
zodiac.play();
}
</script>UPDATE
Добавлена анимация снежинок