主页 / 问题 / 1366974
Accepted
Alexandr_TT
Asked:2022-05-29 17:03:18 +0800 CST2022-05-29 17:03:18 +0800 CST

2022年新年比赛！

  • 772

我们在 RuSO 每年都会组织新年比赛：

在此处输入图像描述

今年，我们选择了风格化为印刷电路板的圣诞树图像，这不是随意选择您喜欢的图片，因为我们的资源上有人参与了贝加尔湖处理器和其他电子设备的开发。

可视化脚本：

  1. 圣诞树图像
  2. 圣诞树上的花环动画
  3. 圣诞树上星星的动画
  4. 飘落的雪花动画
  5. 霜神父与雪少女的形象
  6. 雪人动画
  7. 文字动画：2022年新年快乐！

获胜者选择标准

  1. 要赢得新年比赛，您必须至少实现可视化脚本中指定的动画之一。如果所有响应仅实现一个场景项，则此条件有效。在这种情况下，选择得票最多的答案。upvote

  2. 如果有答案实现了场景的几个点，则根据解决方案的质量（情绪积极，营造节日气氛，新年气氛），完成点数最多的答案将获得优势。情况下，选择得票最多的答案upvote

祝贺 NG 2022 竞赛的获胜者@Nikolya Shirshov！

javascript

4 个回答

  1. Best Answer

    codepen上更完整的版本：

    SVG 微笑：

    * {
  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>

    • 30

  2. 在此处输入图像描述

    • 圣诞树
    • 花环
    • 星星
    • 雪
    • 文字动画
    • 设置面板

    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>

    • 19

  3. PCB 走线 + 雪 =

    "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>

    • 16

  4. 大家2022新年快乐！

    我为动画添加了一些交互性：

    1. 如果您单击并按住光标，雪人会眨眼，挥动手臂和树枝。
    2. 如果按住鼠标左键，圣诞老人会移动到圣诞树和雪少女
    3. 按下按钮后雪少女出现 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://isstatic.askoverflow.dev/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://isstatic.askoverflow.dev/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://isstatic.askoverflow.dev/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>

    更新

    添加雪花动画

    • 10

相关问题