2020年新年大赛！

Question

Alexandr_TT

Asked:2020-12-20 18:20:21 +0800 CST2020-12-20 18:20:21 +0800 CST 2020-12-20 18:20:21 +0800 CST

2020年新年大赛！

772

去年，一场类似的比赛意外地引起了 RUso 参赛者的极大兴趣。

这很有趣，人们想一次又一次地继续这个假期。
顺便说一句，举办了4场有奖比赛。

在即将到来的 2020 年新年，我们为什么不安排完全相同的，甚至更好的假期呢！

我选择了一张背景较暗的中性图片，因为我听说今年用花环、烟花来工作会很好。

解决竞争任务的推荐对象：

标题动画 2020 年新年快乐！
圣诞老人、雪少女和其他新年角色的动画
圣诞树：圣诞装饰品、花环
星空动画
雪花动画
烟花爆竹、饼干

例如，月亮的动画：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"  viewBox="0 0 73 73" >
<defs>
 <radialGradient id="RadialGrad"
           fx="50%" fy="50%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>
          <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />
        </radialGradient>

</defs>
<rect width="100%" height="100%" />
<g transform="rotate(-20 35.5 35.5)">
<circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />

 <circle cx="35.5" cy="35.5" r="35" stroke="none" fill="black" >
 
 <animate id="youngMoon" attributeName="cx" values="35.5;-35.5;" begin="1s;oldMoon.end+1s" dur="10s" fill="freeze" />
<animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" /> 

</circle> 
</g>
</svg>

圣诞树星星动画

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 
  <defs>
  <filter id="glow" filterUnits="userSpaceOnUse"
            x="-50%" y="-50%" width="300%" height="300%">
       
      <feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur5"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur10"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur20"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blur30"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="70" result="blur50"/>
       <feMerge result="blur-merged">
        <feMergeNode in="blur10"/>
        <feMergeNode in="blur20"/>
        <feMergeNode in="blur30"/>
        <feMergeNode in="blur50"/>
      </feMerge>
      
      <feColorMatrix result="yellow-blur" in="blur-merged" type="matrix"
                     values="0 0 0 0 0
                             0 1 0 0 0
                             0 0 1 0 0
                             0 0 0 0.7 0" />
      <feMerge>
        <feMergeNode in="yellow-blur"/>       
        <feMergeNode in="blur5"/>          
        <feMergeNode in="SourceGraphic"/>  
      </feMerge>
    </filter>
  </defs>  
<image xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" />
    
  <path id="star_Full" fill="#E4F6A3"  filter="url(#glow)" opacity="0" d="M580.2 76.2 837.2 71.3 774.7 5.7 845.1 62.7 850.1 8c0 0 6.8 54.2 6 54.7-4.3 2.8 70.9-57.5 70.9-57.5L862.8 71.2 1131.2 76.2 864.4 81.8 982.3 203C960.8 189.7 856.8 91.3 856.7 91.2L849.8 194.2 845.7 91.1 714.3 203.7 832.8 82.5Z">
    <animate
        id="an_star"
        attributeName="opacity"
        dur="1.5s"
        begin="1s;pause_star.end"
        values="1;1;0"              
        fill="freeze"
        repeatCount="5" /> 
    <animate
        id="pause_star"
        attributeName="opacity"
        dur="1.5s"
        begin="an_star.end"
        values="0;0"                
        fill="freeze"
        repeatCount="1" />  
   </path>      
     
<svg>

一位参与者可以在不同的帖子中给出一到三个答案。

恭喜Q中陌生人的获胜者！

在比赛的主题邀请中添加了公告

14 个回答

Voted

Stranger in the Q · Answer 1 · 2020-12-20T19:44:22+08:00

烟花在森林里

let s;
Math.random = () => (2**31-1&(s=Math.imul(48271,s)))/2**31;

let rnd = n => (Math.random()-0.5)*(n||1);
let many = (n,f) => Array(n).fill(0).map((e,i) => f(i));
let fireworks = fireworksCanvas.getContext("2d");
let forest = forestCanvas.getContext("2d");
let g, i, c;

function newSeg(s, dir, da, w){
    return {
      da, // шаг изменения угла
      col: s.col, // цвет
      width: w||s.width - 0.02, // толщина
      pts: [s.pts[2], s.pts[3]], // точки сегмента
      dir: dir+da, // направление (угол) текущего сегмента
      len: s.len, // длина сегмента
      sw: s.sw  // коэффициент для поворота (наследуется от прошлого сегмента)
    };
}

// алгоритм "роста" сегментов на основе данных о прошлом сегменте
function grow() {
    i = 0, c = rnd(360);
    let da = rnd(); // случайный компонент поворота
    let n = 5+Math.floor(Math.random()*19); // кол-во ветвей
    let s = 2 + rnd(1); // размер сегмента
    let pts = [(0.25+Math.random()*0.5)*innerWidth, (0.2+Math.random())*innerHeight/3]
    g = many(n, i => ({
        pts,
        dir: Math.PI/n*i*2 + rnd() + da,
        len: s, 
        width: 10,
        sw:  1.01 + rnd(0.02),
        col: `hsl(${Math.random()*360},66%,66%)`
    }))
    requestAnimationFrame(growIteration);
}

function growStep(count) {
  fireworks.fillStyle="#00000014" 
  fireworks.fillRect(-1e5,-1e5,2e5,2e5)
  for (var j=0; j<count; j++, i++){
    g = g.flat().map(s => {
        calcSegment(s);
        paintSegment(s);
        return growAlgorithm(s);
    });
  }
}

// алгоритм "роста"
function growAlgorithm(s) {

  let result = []

  if(s.width < 0)
     return result; 
   
   let sw = rnd(0.05) // небольшой коэф. для поворота

   //  если толщина сегмента больше 1 то с какой-то вероятностью делим ветвь на 3
   if (s.width>1 && rnd() > 0.45) {

     let dir = 0.5 + rnd(0.5); // случайное направление
     let w = s.width/2 +0.5; // делаем новые ветви тоньше
     result.push(newSeg(s, s.dir+dir + rnd(), sw, w)); 
     result.push(newSeg(s, s.dir-dir+ rnd(), -sw, w));
     result.push(newSeg(s, s.dir,-sw, w));
       
   } else if (rnd() > 0.45) { 
     
     // растем дальше и поворачиваем на коэф. этой итерации
     result.push(newSeg(s, s.dir, sw));

   } else { //  или растем дальше и поворачиваем на коэф. текущей ветки

     result.push(newSeg(s, s.dir, (s.da||0)*s.sw));
       
   }

   return result;
}

function calcSegment(s) {
  let x = s.pts[0] + Math.cos(s.dir)*s.len;
  let y = s.pts[1] + Math.sin(s.dir)*s.len;
  s.pts.push(x,y)
}

function growIteration() {
    if (g.length) 
        requestAnimationFrame(growIteration);
    else grow(0,0)
    growStep(1)
}

function paintSegment(s) {
  fireworks.lineWidth = 1;
  fireworks.lineCap ="round"
  fireworks.strokeStyle=s.col;
  fireworks.beginPath();
  fireworks.moveTo(s.pts[0], s.pts[1])
  fireworks.lineTo(s.pts[2], s.pts[3]);
  fireworks.stroke();
}

function star(c) {
    c.beginPath();
    c.arc(Math.random()*innerWidth, 
          Math.random()*innerHeight,
          Math.random(), 
          0, 
          2 * Math.PI
    );
    c.fill();
}

function moon(c) {
  c.beginPath();
  c.arc(100, 100, 30, Math.PI/2, -Math.PI/2);
  c.bezierCurveTo(75, 85, 75, 115, 100, 130);
  c.fill();
}

function snowHill(c){
   c.beginPath();
   c.arc(Math.random()*innerWidth, 
         innerHeight*5+(Math.random()*0.3+0.7)*innerHeight, 
         innerHeight*5, 
         0, Math.PI*2); 
   c.fill(); 
}

function resize() {
  s = 1;
  resizeCanvas(fireworksCanvas);
  resizeCanvas(forestCanvas);
  forest.fillStyle = 'white'  
  moon(forest);
  forest.shadowColor = "black";
  many(100, i => star(forest)); 
  forest.shadowBlur = 7;
  many(6, i => snowHill(forest));
  forest.shadowBlur = 13;     
  many(parseInt(innerWidth/20), i => [
      Math.random()*innerWidth,
      innerHeight - Math.random()*Math.random()*innerHeight/6-Math.min(90,innerHeight/5)
  ]).sort((a, b) => a[1] - b[1]).map(p => {
      let ky = p[1]/innerHeight;
      let h = 88+Math.random()*33;
      let s = 44+Math.random()*10;
      many(5, i => {
          forest.fillStyle = `hsl(${h},${s}%,${15 + i*(5 + Math.random()*5)}%)`;
          level(p[0], p[1] - 10*i, ky*70-(i*10), i)
      })
  })
}

let treeLevel = [
    [
        -0.25, 1,
        -0.5,  2,
        -1,    2
    ], [
        -0.5, 2,
        -0.35, 1.75,
        -0.2, 1.5
    ], [
        -0.15, 1.7,
        -0.15, 1.7,
        0,    2.25
    ], [
        0.15, 1.7,
        0.15, 1.7,
        0.15, 1.5
    ], [
        0.35, 1.75,
        0.5, 2,
        1,    2
    ],[
        0.5, 2,
        0.25, 1,
        0,   0
    ]
]

function level(x,y,s) {
  s = Math.max(0,s)
  let c = forest;
  c.beginPath();
  c.moveTo(x, y);
  let d = 2
  treeLevel.forEach(curve => c.bezierCurveTo(
      x+s*curve[0]+rnd(d), y+s*curve[1]+rnd(d), 
      x+s*curve[2]+rnd(d), y+s*curve[3]+rnd(d), 
      x+s*curve[4]+rnd(d), y+s*curve[5]+rnd(d)
  ));
  c.closePath();
  c.fill();
}

function resizeCanvas(canvas) {
  if (canvas.width !== innerWidth || canvas.height !== innerHeight) {
     canvas.width = innerWidth;
     canvas.height = innerHeight;
  }
}

addEventListener("resize", resize);
resize();
grow()

body {
    background-color: black;
    margin: 0;
    overflow: hidden;
}

canvas {
    position: fixed;
}

<canvas id=fireworksCanvas ></canvas>
<canvas id=forestCanvas ></canvas>

Stranger in the Q · Answer 2 · 2020-12-23T21:43:03+08:00

Осторожно, тут нужна видеокарта.

let toy = new ShaderToy(`

// перевод из палитры hsl в палитру rgb
vec3 hsl2rgb(vec3 c) {
  vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0);
  return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));
}

// генератор псевдослучайных чисел
float random (vec2 p) {
    return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453123);
}

// один залп
vec4 firework(vec2 p, float n) {

    float dur = 3000.; // время анимации одного фейерверка
    float id = floor(time/dur-n) + n*8.; // число - идентификатор залпа
    float t = smoothstep(0., 1., fract(time/dur-n)); // время анимации
    float t1 = max(0.0, 0.5 - t); // время второй фазы (взрыва)
    float t2 = max(0.0, t - 0.5); //
    
    p.y += t1; // первую половину времени летим снизу вверх 
    p.y -= random(vec2(n*35.+id, n*45.+id))*0.3; // немного по оси y на случ. величину

    p.x += n - 0.5 + mix(0., sin(id)*0.4, t1); // немного по оси x на случ.
    
    vec4 c;
    if ( dot(p,p) > 0.002 + t2 *0.1 ) // если пиксель слишком далеко
        return c; 
        
    // цвет частицы    
    vec3 rgb = hsl2rgb(vec3(id*0.3, .8, .7)); 
    
    for (float i = 0.; i < 77.; i += 1.) {
    
        // угол отлета отлёта
        float angle = i+sin(i*1234. + t); 
        
        // дистанция отлёта
        float dist = 0.2 + 0.2 * random(vec2(i*351. + id, i*135. + id)); 
        
        // конечная точка частицы
        vec2 pt = p + vec2(dist*sin(angle), dist*cos(angle)); 
        
        // находим интерполяцией текущее положение
        pt = mix(p, pt, t2); 

        // радиус частицы
        float r = .03 * (1. - t) * t2 +
                  .002*t*t*(1. - max(.0, t - .9)*10.);  
                  
        // яркость пикселя
        float d = 1. - smoothstep(sqrt(dot(pt, pt)), .0, r); 
        
        if (t>0.75 && fract(id/3.)<0.3)
          d *= 0.6 + sin(111.*(i+id*88.+t))*0.4;

        c += vec4(rgb, 1.) * d;
    }
    return c;
}

void main(void) {
  vec2 uv = gl_FragCoord.xy/resolution - 0.5;
  uv.x *= resolution.x/resolution.y; 
  for (float n = 0.; n < 6.; n += 1.) 
      gl_FragColor += firework(uv, n/6.) - 0.05; // рисуем несколько фейерверков
}`);

addEventListener("resize", () => toy.resize(innerWidth, innerHeight));
toy.resize(innerWidth, innerHeight);
requestAnimationFrame(draw);

function draw(t) {
   requestAnimationFrame(draw);
   toy.draw(t) 
}

canvas {
  background: url('https://isstatic.askoverflow.dev/PBRad.jpg');
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://raw.githack.com/strangerintheq/ShaderToy/master/ShaderToy.js"></script>

PS: если кому-то будет интересно как это работает - спрашивайте...

Alexandr_TT · Answer 3 · 2020-12-20T18:25:06+08:00

初学者的第一份工作:)

注意，当您开始时，音乐伴奏是打开的。

使用过的轨道Дискотека Авария - Новогодняя

这只是故事的开始。在同一个主题中查看完整版动画

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >  
<defs>
 <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="4" dy="8" stdDeviation="4"/>
        </filter>
</defs>

	   <!-- Изображение Ёлочки -->
<image xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" />

   
	  <path id="path1" d="m1648.6 24.4c0 0-341.5 179.4-456.4 327.2-102.2 131.4-97.5 174.6-169 242.2-125.1 118.5-275.2 220.3-439.5 272.1-61.6 19.4-193.6 11-193.6 11v0" style="fill:none;stroke-opacity:0.9;stroke-width:2;stroke:none"/>
	   

<image  id="fly"   xlink:href="https://isstatic.askoverflow.dev/qnNmf.png" width="2%" height="2%"  opacity="1" >
  	 	
	<animateMotion
	  id="MotionHal"
	  begin="btn.click+8s"
	  dur="14s"
	  fill="freeze"
	  rotate="auto-reverse"
	  repeatCount="1"  >
    <mpath xlink:href="#path1" />
    </animateMotion> 
	<animateTransform id="an_fly" attributeName="transform" type="scale" begin="MotionHal.begin" dur="14s"   values="1;2;2;2;4;6;8;9" fill="freeze" repeatCount="1" />  
	
</image>    
                 <!-- Анимация зайчика с гитарой  -->
     <image  id="zayka" filter="url(#shadow)" transform="translate(1050 750) scale(1 1)" x="0" xlink:href="https://isstatic.askoverflow.dev/3xzEW.png"  height="20vh"
           	 opacity="0"   > 
			  <!-- Появление зайца -->
			 <animate id="zayka_Hide" attributeName="opacity" begin="btn.click+8s" dur="1s" to="1" fill="freeze" />
 			 <animateTransform id="zayka_Up" attributeName="transform" type="translate" values="1070 750;1075 730;1080 710;1075 730;1070 750" dur="0.5s"  begin="zayka_Hide.end" repeatCount="indefinite" /> 
		 	<animate attributeName="x" begin="zayka_Hide.end" dur="2.5s" values="0;50;70;100;70;50;50;0" repeatCount="indefinite" />  
		</image>  
   
   <!-- Анимация текста Новый Год!   --> 
	  
	  <path id="NY_path" d="m1207.8 682.9c0 0 24.8-274.1 4.6-497.1C1193.5-23.4 777.1 18.3 579.3 97.4 360.1 185.1 336 782.2 139.1 652.1-3.1 558.3 41.8 317.2 53.1 95.6c3.9-75.7 19.5 7.8 250.5 6.4 235.6-1.5 261-34.5 261-34.5" style="fill:none;stroke:none"/>
<text text-anchor="middle" font-size="52" font-weght="900" fill="gold" stroke="white" stroke-width="1" filter="url(#shadow)"  opacity="0" >
  <textPath id="result" method="align" spacing="auto" startOffset="0%" xlink:href="#NY_path"><tspan dx="0" dy="-2">С Новым 2020 годом!</tspan>
 <!-- Движение фразы вдоль кривой линии begin ="80s" -->  
  <animate id="NY_move" 
   begin ="btn.click+10s"
   dur="10s"
   repeatCount="1"
   attributeName="startOffset"
   values="0%;9%;9%;9%;73%;73%;73%;92%;92%"
   fill="freeze"/> 
   </textPath> 
   <!-- Появление Нового Года --> 
   <!--NY_move.begin-->
   <animate attributeName="opacity" begin="NY_move.begin" dur="0.1s" values="0;1" fill="freeze" /> 
   <!-- Перемещение текста-->
  <animateTransform id="text_Up2" attributeName="transform" type="translate" values="0 0;120 20;-40 -20;120 60;-40 60;120 0;-20 80;120 80;0 0" dur="3.5s"  begin="NY_move.end;98.5s;106;114.5s" repeatCount="1" /> 
   <!-- Увеличение текста-->
  <animateTransform id="text_scale" attributeName="transform" type="scale" calcMode="discrete" values="1;1.2;1.3;1.4;1.5;2;2;2;2;1.5;1.4;1.3;1.2;1" dur="5s"  begin="text_Up2.end" repeatCount="1" /> 
  <set id="red" attributeName="fill" to="red" begin="28.5s" />
  <set id="lime" attributeName="fill" to="lime" begin="32s" />
  <set id="purple" attributeName="fill" to="purple" begin="36.5s" />
  <animateTransform id="Scale_purple" attributeName="transform" type="scale" dur="1.5s" from="1" to="2.5" begin="36.5s" fill="freeze" />
  <animateTransform id="T_skew" attributeName="transform" attributeType="XML" 
                type="skewY" values="1;-1.4;1" additive="sum"
                begin="Scale_purple.end;T2_skew.end" dur="0.8s" fill="freeze" repeatCount="3"/>
	<animateTransform id="T2_skew" attributeName="transform" attributeType="XML" 
                type="skewY" values="-4;1;-4" additive="sum"
                begin="T_skew.end" dur="1.5s" fill="freeze" repeatCount="2"/>			

</text>		
	<g id="btn" 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>
 </g>	 	
		
</svg>	 
</div>  

<script>
var zodiac = new Audio();
zodiac.src = 'https://svg-art.ru/files/diskoteka_avariya_novogodnyaya.mp3';

function play() {
  zodiac.play();
}
</script>

OPTIMUS PRIME · Answer 4 · 2020-12-28T15:09:24+08:00

Сырая версия 1.0, в идеале надо добавить еще пару сценок и доработать создание ~~ёлки~~ йолки:

let img = new Image();
    img.onload = startScene;
    img.onerror = () => console.log("Что-то пошло не так");
    img.src = "https://images.vexels.com/media/users/3/157970/isolated/preview/c156b4270aea292b9b335dd463ea17eb-earth-planet-icon-earth-icon-by-vexels.png";

/* Каждую сценку писал отдельно в песочнице.
Показалось легче завернуть каждую в свою функцию, а не заваливать в кучу,
чтобы в будущем легче было переносить-редактировать. */

function startScene() {
  let main = document.getElementById('main');

  (function enteringEarth() {
    let time = 15;

    setCSS(`
      .scene {
        background-color: #001;
      }
  
      .earth {
        position: absolute;
        width: 15px;
        animation: closeup ${time}s linear forwards;
      }
  
      @keyframes closeup {
        0% { width: 15px; }
      100% { width: 250px; }
      }
  
      .rocket {
        fill: white;
        transition: ${time + 5}s;
      }
    `);

    setHTML(`
      <svg class="scene" width="100%" height="100%">
        <image class="earth" x="150" y="150" href="https://images.vexels.com/media/users/3/157970/isolated/preview/c156b4270aea292b9b335dd463ea17eb-earth-planet-icon-earth-icon-by-vexels.png"></image>
        <circle class="rocket" cx="200" cy="-5" r="0.5"/>
        <circle class="rocket" cx="250" cy="-25" r="0.5"/>
      </svg>
    `);

    setTimeout(() => {
      main.querySelectorAll('.rocket').forEach( rocket => {
        setAttributes(rocket, {
          'cx': 190,
          'cy': 190,
          'r': 1,
        });
      });

      setTimeout(enteringEarth_closerView, time*1000);
    }, 0);
  })();

  function enteringEarth_closerView() {
    setCSS(`
      .scene {
        background-color: #001;
      }
      
      .earth {
        fill: #124;
        filter: url(#earth-shadow);
      }
      
      .rocket-head {
        width: 11px;
        height: 5px;
        fill: url(#rocket-light);
      }
      .rocket-top-1 {
        width: 15px;
        height: 2px;
        fill: url(#rocket-light);
      }
      .rocket-top-2 {
        width: 15px;
        height: 10px;
        fill: url(#rocket-dark);
      }
      .rocket-body {
        width: 15px;
        height: 140px;
        fill: url(#rocket-light);
      }
      .rocket-foot {
        width: 3px;
        height: 18px;
        fill: #111;
      }
      .rocket.first {
        position: absolute;
        animation: rocket_1 6s linear forwards;
      }
      
      @keyframes rocket_1 {
        0% { transform: rotate(0deg) scale(2); left: 60%; top: 5%; }
      84% { transform: rotate(360deg) scale(0.9); left: 40%; top: 50%; }
      100% { transform: rotate(400deg) scale(0.9); left: 40%; top: 50%; }
      }
      
      .line {
        opacity: 0;
        stroke: #fff5;
        stroke-width: 1px;
        stroke-dasharray: 1;
        animation: spray 2s linear;
        animation-delay: 4s;
      }
      
      @keyframes spray {
        0% { opacity: 1; }
      40% { opacity: 1; }
      45% { opacity: 0; }
      55% { opacity: 0; }
      60% { opacity: 1; }
      100% { opacity: 0; }
      }
      
      .rocket.second {
        position: absolute;
        animation: rocket_2 6s linear forwards;
      }
      
      @keyframes rocket_2 {
        0% { transform: rotateZ(-30deg) rotateX(20deg) scale(1.5); left: 80%; top: 5%}
      100% { transform: rotateZ(-40deg) rotateX(30deg) scale(0.9); left: 40%; top: 50%}
      }
    `);

    setHTML(`
      <svg class="scene" width="100%" height="100%">
        <defs>
          <linearGradient id="rocket-light">
            <stop offset="0" stop-color="#666"></stop>
            <stop offset="40%" stop-color="#bbb"></stop>
            <stop offset="50%" stop-color="#ccc"></stop>
            <stop offset="60%" stop-color="#bbb"></stop>
            <stop offset="100%" stop-color="#666"></stop>
          </linearGradient>
          
          <linearGradient id="rocket-dark">
            <stop offset="0" stop-color="#111"></stop>
            <stop offset="40%" stop-color="#444"></stop>
            <stop offset="50%" stop-color="#555"></stop>
            <stop offset="60%" stop-color="#444"></stop>
            <stop offset="100%" stop-color="#111"></stop>
          </linearGradient>
          
          <filter id="earth-shadow">
            <feDropShadow dx="-2" dy="-2" stdDeviation="100" flood-color="#045acf"/>
          </filter>
        </defs>
        
        <circle class="earth" cx="80vw" cy="calc(800vw + 80vh)" r="800vw"/>
      </svg>  
      
      <svg class="rocket second" width="39px" height="163px">
        <rect class="rocket-head" x="12px"/>
        <rect class="rocket-top-1" x="10" y="5px"/>
        <rect class="rocket-top-2" x="10" y="7px"/>
        <rect class="rocket-body" x="10" y="17px"/>
          
        <polygon points="9,157 26,157 28,163 7,163"></polygon>
        <rect class="rocket-foot" y="138px" x="12px"/>
        <rect class="rocket-foot" y="138px" x="21px"/>
      </svg>
      
      <svg class="rocket first" width="39px" height="163px">
        <rect class="rocket-head" x="12px"/>
        <rect class="rocket-top-1" x="10" y="5px"/>
        <rect class="rocket-top-2" x="10" y="7px"/>
        <rect class="rocket-body" x="10" y="17px"/>
          
        <polygon points="9,157 26,157 28,163 7,163"></polygon>
        <rect class="rocket-foot" y="138px" x="12px"/>
        <rect class="rocket-foot" y="138px" x="21px"/>
        
        <g class="spray">
          <line class="line" x1="26" y1="15" x2="38" y2="13"/>
          <line class="line" x1="26" y1="15" x2="39" y2="14"/>
          <line class="line" x1="26" y1="15" x2="40" y2="15"/>
          <line class="line" x1="26" y1="15" x2="39" y2="16"/>
          <line class="line" x1="26" y1="15" x2="38" y2="17"/>
        </g>
      </svg>
    `);

    setTimeout(skyViewBeforeLanding,5900);
  }

  function skyViewBeforeLanding(){
    setCSS(`
      .scene {
        background-color: #66c5ff;
      }

      .rocket-head {
        width: 11px;
        height: 5px;
        fill: url(#rocket-light);
      }
      
      .rocket-top-1 {
        width: 15px;
        height: 2px;
        fill: url(#rocket-light);
      }
      
      .rocket-top-2 {
        width: 15px;
        height: 10px;
        fill: url(#rocket-dark);
      }
      
      .rocket-body {
        width: 15px;
        height: 140px;
        fill: url(#rocket-light);
      }
      
      .rocket-feet {
        stroke: #111;
        stroke-width: 2px;
        fill: none;
      }
      
      .rocket text {
        fill: black;
        font-size: 13px;
      }
      
      .main-fire {
        fill: #ffff76;
        animation: rocket-fire 0.1s linear infinite;
      }
      
      @keyframes rocket-fire {
        0% { transform: scaleY(0.80); fill: #ffcc76; }
      }
    `);

    setHTML(`
      <svg class="scene" width="100%" height="100%">
        <defs>
          <linearGradient id="rocket-light">
            <stop offset="0" stop-color="#666"></stop>
            <stop offset="40%" stop-color="#bbb"></stop>
            <stop offset="50%" stop-color="#ccc"></stop>
            <stop offset="60%" stop-color="#bbb"></stop>
            <stop offset="100%" stop-color="#666"></stop>
          </linearGradient>

          <linearGradient id="rocket-dark">
            <stop offset="0" stop-color="#111"></stop>
            <stop offset="40%" stop-color="#444"></stop>
            <stop offset="50%" stop-color="#555"></stop>
            <stop offset="60%" stop-color="#444"></stop>
            <stop offset="100%" stop-color="#111"></stop>
          </linearGradient>
        </defs>
        
        <g class="rocket first">
          <rect class="rocket-head" x="12px" />
          <rect class="rocket-top-1" x="10" y="5px" />
          <rect class="rocket-top-2" x="10" y="7px" />
          <rect class="rocket-body" x="10" y="17px" />

          <polygon points="9,157 26,157 28,163 7,163"></polygon>
          
          <g class="rocket-feet" transform="translate(0,142)">
            <polygon points="10,0 -6,22 -2,22 10,13"></polygon>
            <polygon points="16,1 18,1 19,26 15,26"></polygon>
            <polygon points="25,0 25,13 37,22 41,22"></polygon>
          </g>

          <g transform="translate(14 40)">
            <text x="0" y="0">
              <tspan x="0" dy="1.2em">S</tspan>
              <tspan x="0" dy="1.2em">A</tspan>
              <tspan x="0" dy="1.2em">N</tspan>
              <tspan x="0" dy="1.2em">T</tspan>
              <tspan x="0" dy="1.2em">A</tspan>
              <tspan x="0" dy="1.2em" fill="#045acf">X</tspan>
            </text>
          </g>
          
          <g class="engine-fire" transform="translate(10 163)">
            <polygon class="main-fire" points="1,0 14,0 16,10 8,70 -1,10"></polygon>
          </g>
        </g>
        
        <g class="rocket second">
          <rect class="rocket-head" x="12px" />
          <rect class="rocket-top-1" x="10" y="5px" />
          <rect class="rocket-top-2" x="10" y="7px" />
          <rect class="rocket-body" x="10" y="17px" />

          <polygon points="9,157 26,157 28,163 7,163"></polygon>
          
          <g class="rocket-feet" transform="translate(0,142)">
            <polygon points="10,0 -6,22 -2,22 10,13"></polygon>
            <polygon points="16,1 18,1 19,26 15,26"></polygon>
            <polygon points="25,0 25,13 37,22 41,22"></polygon>
          </g>
          
          <g class="engine-fire" transform="translate(10 163)">
            <polygon class="main-fire" points="1,0 14,0 16,10 8,70 -1,10"></polygon>
          </g>
        </g>
      </svg>  
    `);

    let wid = window.innerWidth;
    let hei = window.innerHeight;

    let rocket = main.querySelectorAll('.rocket');
    let coors = [
      {x: wid*0.3, y: hei*0.5 - 50},
      {x: wid*0.3 + 150, y: hei*0.5 - 90},
    ];
    let dir = {
      x: 0.5,
      y: 0.8
    };
    let count = 0;

    setRocketCoors(0.1, 150);

    let interval = setInterval(function(){
      setRocketCoors(0.1, 150);
      
      if( ++count == 140 ){
        clearInterval(interval);
        coors = [
          {x: wid*0.3, y: hei*0.5 - 50},
          {x: wid*0.3 + 150, y: hei*0.5 - 90},
        ];
        
        interval = setInterval(function(){
          setRocketCoors(0.4);
        }, 20);
      }
    }, 50);

    function setRocketCoors(scale, distance = 0){
      rocket[0].setAttribute('transform', `
        translate(${(coors[0].x += dir.x)} ${(coors[0].y += dir.y)})
        rotate(-35)
        scale(${scale})
      `);
      rocket[1].setAttribute('transform', `
        translate(${(coors[1].x += dir.x) - distance} ${(coors[1].y += dir.y)})
        rotate(-35)
        scale(${scale*0.8})
      `);
    }

    setTimeout(function(){
      clearInterval(interval);
      landing();
    }, 11000);
  }

  function landing(){
    setCSS(`
      .scene {
        background-color: #66c5ff;
      }
      
      .ground {
        fill: #aaa;
      }
      
      .perspective {
        stroke: #666;
      }
      
      .rocket-head {
        width: 11px;
        height: 5px;
        fill: url(#rocket-light);
      }
      
      .rocket-top-1 {
        width: 15px;
        height: 2px;
        fill: url(#rocket-light);
      }
      
      .rocket-top-2 {
        width: 15px;
        height: 10px;
        fill: url(#rocket-dark);
      }
      
      .rocket-body {
        width: 15px;
        height: 140px;
        fill: url(#rocket-light);
      }
      
      .rocket-feet {
        stroke: #111;
        stroke-width: 2px;
        fill: none;
      }
      
      .rocket text {
        fill: black;
        font-size: 13px;
      }
      
      .main-fire {
        fill: #ffff76;
        animation: rocket-fire 0.1s linear infinite;
      }
      
      @keyframes rocket-fire {
        0% { transform: scaleY(0.80); fill: #ffcc76; }
      }
    `);

    setHTML(`
      <svg class="scene" width="100%" height="100%">
        <g class="land">
          <rect class="ground" y="50%" width="100%" height="50%" />
          <line class="perspective" x1="0" y1="80%" x2="48%" y2="50%" />
          <line class="perspective" x1="100%" y1="80%" x2="52%" y2="50%" />
        </g>

        <defs>
          <linearGradient id="rocket-light">
            <stop offset="0" stop-color="#666"></stop>
            <stop offset="40%" stop-color="#bbb"></stop>
            <stop offset="50%" stop-color="#ccc"></stop>
            <stop offset="60%" stop-color="#bbb"></stop>
            <stop offset="100%" stop-color="#666"></stop>
          </linearGradient>

          <linearGradient id="rocket-dark">
            <stop offset="0" stop-color="#111"></stop>
            <stop offset="40%" stop-color="#444"></stop>
            <stop offset="50%" stop-color="#555"></stop>
            <stop offset="60%" stop-color="#444"></stop>
            <stop offset="100%" stop-color="#111"></stop>
          </linearGradient>
        </defs>
        
        <g class="rocket first">
          <rect class="rocket-head" x="12px" />
          <rect class="rocket-top-1" x="10" y="5px" />
          <rect class="rocket-top-2" x="10" y="7px" />
          <rect class="rocket-body" x="10" y="17px" />

          <polygon points="9,157 26,157 28,163 7,163"></polygon>
          
          <g class="rocket-feet" transform="translate(0,142)">
            <polygon points="10,0 -6,22 -2,22 10,13"></polygon>
            <polygon points="16,1 18,1 19,26 15,26"></polygon>
            <polygon points="25,0 25,13 37,22 41,22"></polygon>
          </g>

          <g transform="translate(14 40)">
            <text x="0" y="0">
              <tspan x="0" dy="1.2em">S</tspan>
              <tspan x="0" dy="1.2em">A</tspan>
              <tspan x="0" dy="1.2em">N</tspan>
              <tspan x="0" dy="1.2em">T</tspan>
              <tspan x="0" dy="1.2em">A</tspan>
              <tspan x="0" dy="1.2em" fill="#045acf">X</tspan>
            </text>
          </g>
          
          <g class="engine-fire" transform="translate(10 163)">
            <polygon class="main-fire" points="1,0 14,0 16,10 8,70 -1,10"></polygon>
          </g>
        </g>
        
        <g class="rocket second">
          <rect class="rocket-head" x="12px" />
          <rect class="rocket-top-1" x="10" y="5px" />
          <rect class="rocket-top-2" x="10" y="7px" />
          <rect class="rocket-body" x="10" y="17px" />

          <polygon points="9,157 26,157 28,163 7,163"></polygon>
          
          <g class="rocket-feet" transform="translate(0,142)">
            <polygon points="10,0 -6,22 -2,22 10,13"></polygon>
            <polygon points="16,1 18,1 19,26 15,26"></polygon>
            <polygon points="25,0 25,13 37,22 41,22"></polygon>
          </g>
          
          <g class="engine-fire" transform="translate(10 163)">
            <polygon class="main-fire" points="1,0 14,0 16,10 8,70 -1,10"></polygon>
          </g>
        </g>
      </svg>
    `);

    let wid = window.innerWidth;
    let hei = window.innerHeight;

    let rocket = main.querySelectorAll('.rocket');
    let coors = [
      {x: wid*0.3, y: - 250},
      {x: wid*0.3 + 150, y: - 290},
    ];
    let move = 1;
    let stop = hei*0.5 - 50;
    let landing = stop/2.5;

    let tick = 5;
    setTimeout(handleRocketCoors, tick);

    function handleRocketCoors(){
      rocket[0].setAttribute('transform', `
        translate(${coors[0].x} ${(coors[0].y += move)})
      `);
      rocket[1].setAttribute('transform', `
        translate(${coors[1].x} ${(coors[1].y += move)})
      `);
      
      if( coors[0].y >= landing ){
        launchLandingFire();
        shakeCamera();
      }
      
      if( coors[0].y <= stop ) {
        setTimeout(handleRocketCoors, tick += 0.05);
      } else {
        let fire = main.querySelectorAll('.engine-fire');
        [...fire].forEach(el => el.outerHTML = "");
        
        setTimeout( transformAndRollout, 2000 );
      }
    }
  }

  function launchLandingFire(){
    // ?!
  }

  function shakeCamera(){
    let scene = main.querySelector('.scene');
    let count = 0;
    let interval = setInterval(function(){
      let x = (Math.random() < 0.5 ) ? 1 : -1;
      let y = (Math.random() < 0.5 ) ? 1 : -1;
      scene.style.transform = `translate(${x}px, ${y}px)`
      if( ++count >= 250 ) {
        clearInterval(interval);        
        scene.style.transform = "none";
      }
    }, 5);
  }

  function transformAndRollout(){
    let rocket = main.querySelectorAll('.rocket');
    appendTree(rocket[0]);
    appendTree(rocket[1]);

    function appendTree(rocket){
      let tree = document.createElementNS("http://www.w3.org/2000/svg", 'g');
      for( let i = 0; i < 500; i++ ){
        let points = getRandomPoints();
        let leaf = `
          <polygon
            class="leaf"
            points="${points.from}"
            fill="${getRandomGreen()}"
          >
            <animate
              attributeName="points"
              begin="10s"
              dur="5s"
              fill="freeze"
              from="${points.from}"
              to="${points.to}"/>
          </polygon>
        `;
      
        tree.insertAdjacentHTML('beforeend', leaf);
      }
      
      rocket.appendChild(tree);
    }
    
    function getRandomPoints(){
      let x1 = rand(15) + 10
      let y1 = rand(140);
      
      let x2 = x1;
      let y2 = y1 + rand(25) + 7;
      
      let x3 = rand(y2) - y2/2;
      let y3 = y2 + y2**0.5;
      
      return {
        from: `${x1},${y1} ${x2},${y2} ${x2+1},${y3}`,
        to: `${x1},${y1} ${x2},${y2} ${x3},${y3}`
      }
    }
    
    function getRandomGreen(){
      let r = Math.random() * 50;
      let g = 2 * r;
      let b = Math.random() * 50;
      return `RGB(${r}, ${g}, ${b})`;
    }
    
    function rand(n){
      return Math.floor( Math.random() * n );
    }
  }
}

function setCSS(str){
  document.getElementById('css').textContent = str;
}
function setHTML(str){
  document.getElementById('main').innerHTML = str;
}
function setAttributes(elem, obj){
  for( let attr in obj ){
    elem.setAttribute( attr, obj[attr] );
  }
}

html, body { margin: 0; padding: 0; }

#main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

<style id="css"></style>
<div id="main"></div>

P.s. впервые работал с SVG... чтение кода может вызвать боль и страдания. Анимировал то в SVG, то на CSS, то JS, "лишь бы работало"))

Alexandr_TT · Answer 5 · 2020-12-23T01:31:28+08:00

尝试 2 号。

基于第一个例子。添加了新角色。

2019 年 12 月 23 日更新

添加了月亮动画。动画从第 36 秒开始。

2019 年 12 月 24 日更新

从第 70 秒开始添加圣诞树上的星星动画

添加了雪少女汽车飞行的动画。
动画从第 45 秒开始。

2019 年 12 月 28 日更新

На первой минуте ёлка стоит вся в снегу. Работает маска - mask id="msk1" по контуру ёлки.

Затем с момента времени - 1м. 20 сек., после появления снегурочки начинает работать анимация смены заполнения цвета маски, создавая эффект мерцания гирлянд.

Дождитесь :), на мой взгляд, интересно получилось.

 <div class="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >  
    <defs>
     <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                <feDropShadow dx="4" dy="8" stdDeviation="4"/>
            </filter> 
    		 <!-- Траектория движения Деда Мороза -->
    	<path id="path1" d="m1648.6 24.4c0 0-297.1 119.8-421 217.9-78.8 62.4-107.2 182.8-196.5 228.8C866.6 555.9 658.8 532.4 478.3 521.4 243.9 507.1 306.7 176.5 680.3 210c110.3 9.9 224.9-25.6 328 11 87.5 31.1 232 76.1 221.8 168.3-17.4 156.9-281.3 146.3-431 196.6-136 45.8-420 94.4-420 94.4" style="fill:none;stroke-opacity:0.9;stroke-width:2;stroke:none"/>
    		     <!-- Траектория движения снегурочки -->
    	<path id="Girl_Path" d="m1648.6 24.4c0 0-297.1 119.8-421 217.9-78.8 62.4-107.2 182.8-196.5 228.8C866.6 555.9 658.8 532.4 478.3 521.4 243.9 507.1 306.7 176.5 680.3 210c110.3 9.9 224.9-25.6 328 11 87.5 31.1 224.8 75.6 221.8 168.3-6.3 195.5-306.6 254.1-489.2 324-170.8 65.4-542.7 80.2-542.7 80.2" style="fill:none;stroke-width:2;stroke:#f00"/>    
       <radialGradient id="RadialGrad"
               fx="50%" fy="50%" r="65%"
               spreadMethod="pad">
              <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>
              <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />
        </radialGradient>  
   <filter id="glow" filterUnits="userSpaceOnUse"
            x="-50%" y="-50%" width="300%" height="300%">
       
      <feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur5"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur10"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur20"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blur30"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="70" result="blur50"/>
       <feMerge result="blur-merged">
        <feMergeNode in="blur10"/>
        <feMergeNode in="blur20"/>
        <feMergeNode in="blur30"/>
        <feMergeNode in="blur50"/>
      </feMerge>
      
      <feColorMatrix result="yellow-blur" in="blur-merged" type="matrix"
                     values="0 0 0 0 0
                             0 1 0 0 0
                             0 0 0 0 0
                             0 0 0 0.7 0" />
      <feMerge>
        <feMergeNode in="yellow-blur"/>       
        <feMergeNode in="blur5"/>          
        <feMergeNode in="SourceGraphic"/>  
      </feMerge>
    </filter>  
	  
	   <mask id="msk1">
    <rect fill="white" width="100%" height="100%"/>
  <path fill="#9939CD"  d="m832.5 54.2c-25 19.3-14.5 57.9-13.8 93.8 0.2 11.8-8 22.2-12.5 33.1-2.3 5.7-7.5 17-7.5 17 0 0-8.4 18.5-12 28.1-5.5 15-12.7 29.7-14.5 45.6-1 9.1 3.7 18.2 2.5 27.3-1.7 12.3-11.3 22.5-13.1 34.8-1.1 7.5 1.6 15.1 1.5 22.7-0.1 8.4-2.2 25-2.2 25 0 0-0.6 8.1-2.8 11.4-3.6 5.5-12.9 6-15.6 12-2.2 4.9 1.4 10.7 1.1 16.1-0.5 10-7.2 19.7-5.3 29.5 1 5.1 6.3 8.2 8.3 13.1 1.5 3.6-2.4 15.9-6.7 23.9-2.7 5.2-9.3 4.9-10 9.5-1.4 8.4 12 22.5 12 22.5l-8.9 17.8-4.4 30 1.7 30 9.5 10c1 20.7-2.8 6-8.9 11.1-6.3 6.1 2.1 17.9-0.8 26.1-1.7 4.7-9.2 11.7-9.2 11.7 0 0-5.5 11-4.4 16.7 1.1 5.5 8.9 7.9 10 13.3 1.4 7.1-4 14-5.6 21.1-1 4.8-3.3 9.6-2.5 14.5 0.7 4.1 6 6.9 5.8 11.1-0.2 6.5-8.5 10.4-10 16.7-2.4 9.9 1.1 20.4 1.9 30.6 0.4 4.3 0.5 8.6 1.4 12.8 1.4 7 3 14.1 6.1 20.6 2.7 5.5 4.7 13.4 10.6 15 7 1.9 12.8-8.2 20-8.9 14.8-1.4 29.1 6 43.4 10 8.2 2.3 18.7 2 24.1 7.9 10.5 11.5 10.1 15.7 18 17.4 7.7 1.7 21.5 3.3 28.6-1 7.2-4.3 10-12.8 15.3-17 8.3-6.6 14-3.5 20.7-6.3 6.6-2.7 12.1-7.9 18.9-10 6.4-2 13.3-1.9 20-2.2 7-0.4 15.3 4 21.1 0 5.9-4 4.8-13.5 7.8-20 2.5-5.5 6.5-10.4 8.3-16.1 1.3-4.1 0.5-8.7 1.7-12.8 1.7-5.9 6.7-10.7 7.8-16.7 2-10.6-0.8-21.6-2.2-32.3-0.9-6.4-4.2-12.5-3.9-18.9 0.3-5.8 2.4-11.5 5-16.7 1.8-3.7 6.8-5.9 7.2-10 1.2-10.4-4-22.5-12.2-28.9-4.6-3.6-14.9 2.6-17.2-2.8-5.6-13 23.5-20.9 23.9-35 0.3-8.6-13.3-22.2-13.3-22.2l-5-60.1c0 0-1.6-8.9-1.1-13.3 0.6-5.8 6-11 5-16.7-0.9-4.8-8.8-6.8-8.9-11.7-0.1-6.1 10.2-8.9 10.6-15 0.5-7.8-7.4-13.7-11.1-20.6-4.1-7.6-9.4-14.7-12.2-22.8-1.4-3.9-3.2 0.5-2.2-12.2 0.1-9.5-14.8-18.5-10-26.7 2.5-4.2 11.7 1.8 14.5-2.2 14.2-21.2-16.9-49-17.8-74.5-0.2-4.5 4.3-9.3 2.2-13.3-1.9-3.7-8-2.8-11.1-5.6-3-2.7-5.5-6.2-6.7-10-1.5-5 0-10.4 0-15.6 0-4.4 1.2-9.1 0-13.3-1.4-4.6-5-8.3-7.8-12.2-1.1-1.5-3.1-2.6-3.3-4.4-0.6-4.8 3.9-8.8 5.6-13.3 1.2-3.3 3.9-6.5 3.3-10-0.9-5.5-4.3-12.8-9.8-13.3-1.9-0.2-2.3 4.2-4.2 4-8-1.1-10.4-12.9-12.6-20.7-3.6-26.5-14.5-23.1-15.4-35.2-1.3-25.9 11.6-67.9-9.4-89-8.7-8.8-27.1-11.6-36.9-4z">
  <!-- Анимация цветов маски -->
 <animate
    id="Three_fire"
    attributeName="fill"
    dur="0.5s"
	begin="btn.click+80s;Three_pause.end"
	values=" #CD9AE9; white;white;#CD9AE9"
	fill="freeze"
	repeatCount="10" />
 <!-- Пауза анимации цветов маски -->
 <animate
    id="Three_pause"
    attributeName="fill"
	dur="5s"
	begin="Three_fire.end"
	values=" white;white"
	fill="freeze"
	repeatCount="1" />	 
   </path>
 </mask> 
	
    </defs>
    	   <!-- Изображение Ёлочки -->
    <image mask="url(#msk1)" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>
           <!-- Луна -->
      <g transform="translate(1200 220)">
       <g transform="rotate(-20 35.5 35.5)">
    <circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />
     <circle cx="35.5" cy="35.5" r="35" stroke="none" fill="black" >
     <animate
       id="youngMoon"
       attributeName="cx"
       values="35.5;-35.5"
       begin="btn.click+35s;oldMoon.end+1s"
       dur="10s"
       fill="freeze" />
    <animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" /> 

    </circle> 
    </g>
     </g>  
          <!-- Звезда на ёлке --> 
    	<path id="star_Full" fill="#E4F6A3"  filter="url(#glow)" opacity="0" d="M580.2 76.2 837.2 71.3 774.7 5.7 845.1 62.7 850.1 8c0 0 6.8 54.2 6 54.7-4.3 2.8 70.9-57.5 70.9-57.5L862.8 71.2 1131.2 76.2 864.4 81.8 982.3 203C960.8 189.7 856.8 91.3 856.7 91.2L849.8 194.2 845.7 91.1 714.3 203.7 832.8 82.5Z">
          <!-- Анимация opacity звезды -->
	<animate
	    id="an_star"
		attributeName="opacity"
	    dur="2.5s"
		begin="btn.click+70s;pause_star.end"
		values="1;1;0"		        
		fill="freeze"
		repeatCount="5" /> 
	  <!-- Пауза анимация opacity звезды -->
	<animate
	    id="pause_star"
		attributeName="opacity"
	    dur="1.5s"
		begin="an_star.end"
		values="0;0"		        
		fill="freeze"
		repeatCount="1" /> 	
       <!-- Замена цвета у звезды    -->
   <animate
	    id="fill_change_star"
		attributeName="fill"
	    dur="11s"
		begin="svg1.click;pause_star.end"
		values="#CDE7FB;red;#B34EE9;#15C14E"		        
		fill="freeze"
		repeatCount="1" /> 	
       </path>		  
    	  
    <image  id="fly"   xlink:href="https://isstatic.askoverflow.dev/qnNmf.png" width="2%" height="2%"  opacity="1" >
       
      <!-- Анимация самолёта с Дедом морозом -->
    	<animateMotion
    	  id="MotionHal"
    	  begin="btn.click+8s"
    	  dur="14s"
    	  fill="freeze"
    	  rotate="auto-reverse"
    	  repeatCount="1"  >
        <mpath xlink:href="#path1" />
        </animateMotion> 
    	      <!-- Увеличение самолёта -->
    		<animateTransform
    		    id="an_fly"
    			attributeName="transform"
    			type="scale"
    			begin="MotionHal.begin"
    			dur="14s"
    			values="1;2;2;2;4;6;8;9"
    			fill="freeze"
    			repeatCount="1" />  
    	
    	    <!-- Исчезновение самолёта -->
    	<animate
    	    id="fly_hide"
    		attributeName="opacity"
    		dur="1.5s"
    		values="1;0"
    		begin="an_fly.end+5s"
    		repeatCount="1"
    		fill="freeze" /> 		
    	
    </image>     
           	<!-- Анимация снеговика  --> 
        <image  id="Snowman" transform="translate(950 720) scale(1 1)" x="0" xlink:href="https://isstatic.askoverflow.dev/mbefD.png" width="13%" height="13%"  opacity="0"  filter="url(#shadow)" >
    			  <!-- Снеговик появляется -->
    		 	<animate
    			    id="Snowman_Vis"
    				attributeName="opacity"
    				begin="W2_hide_back.end+1s;Snowman_Pause.end"
    				dur="1.5s"
    				values="0;1"
    				repeatCount="1"
    				fill="freeze" /> 
    			
    			<!-- Анимация движения снеговика   -->
    			<animateTransform
    			    id="Snowman_TR"
    				attributeName="transform"
    				type="translate"
    				values="
    				       950 720;
    					   1050 720;
    					   1170 720;
    					   1050 720;
    					   950 720"
    					   dur="2s"
    					   begin="Snowman_Vis.end"
    					   keyTimes="0;0.2;0.6;0.75;1"
    					   repeatCount="5" /> 
    			
    			<animate
    			    id="Snowman_Hide"
    				attributeName="opacity"
    				begin="Snowman_TR.end+0.5s"
    				dur="1s"
    				values="1;0"
    				repeatCount="1"
    				fill="freeze" />  
    			<animate
    			    id="Snowman_Pause"
    				attributeName="opacity"
    				begin="Snowman_Hide.end+0.5s"
    				dur="10s"
    				values="0;0"
    				repeatCount="1"
    				fill="freeze" />  	
    	 </image>
          
                     <!-- Анимация зайчика с гитарой  -->
        <image  id="zayka" filter="url(#shadow)" transform="translate(1050 850) scale(1 1)"
    	     x="0" xlink:href=" https://isstatic.askoverflow.dev/3xzEW.png"
    		 height="20vh"
    		 opacity="0"   > 
    			  <!-- Появление зайца -->
    			 <animate
    			   id="zayka_Hide"
    			   attributeName="opacity"
    			   begin="btn.click+8s"
    			   dur="1s"
    			   to="1"
    			   fill="freeze" /> 
    			   <!-- Прыжки зайца -->
     		<animateTransform
    			 id="zayka_Up"
    			 attributeName="transform"
    			 type="translate"
    			 values="1070 850;1075 830;1080 810;1075 830;1070 850"
    			 dur="0.5s"
    			 begin="zayka_Hide.end"
    			 end="W2_Tr.end"
    			 repeatCount="indefinite" /> 
    		 <!-- Движение зайца -->
    		<animate
    		  id="zayka_Tr"
    		  attributeName="x"
    		  begin="zayka_Hide.end"
    		  end="W2_Tr.end"
    		  dur="2.5s"
    		  values="0;50;70;100;70;50;50;0"
    		  repeatCount="indefinite" /> 
    		  
           <!-- Заяц резко поворачивается к волку -->
    	 <animateTransform
    	   id="zayka_Rotate"
    	   attributeName="transform"
    	   type="scale"
    	   dur="1s"
    	   begin="W2_Tr.end"
    	   values="1 1;-1 1;1 1;-1 1"
    	   additive="sum"
    	   repaeatCount="1"
    	    />	
    		    <!-- Прыжки зайца2 -->
     		<animateTransform
    			 id="zayka_Up2"
    			 attributeName="transform"
    			 type="translate"
    			 values="1070 850;1075 830;1080 810;1075 830;1070 850"
    			 dur="0.5s"
    			 begin="zayka_Rotate.end+0.5s"
    			 repeatCount="indefinite" /> 
    		 <!-- Движение зайца2 -->
    		<animate
    		  id="zayka_Tr2"
    		  attributeName="x"
    		  begin="zayka_Rotate.end+0.5s"
    		  dur="2.5s"
    		  values="0;50;70;100;70;50;50;0"
    		  repeatCount="indefinite" /> 
    	</image>  
       
       <!-- Анимация текста Новый Год!   --> 
    	  
    	  <path id="NY_path" d="m1207.8 682.9c0 0 24.8-274.1 4.6-497.1C1193.5-23.4 777.1 18.3 579.3 97.4 360.1 185.1 336 782.2 139.1 652.1-3.1 558.3 41.8 317.2 53.1 95.6c3.9-75.7 19.5 7.8 250.5 6.4 235.6-1.5 261-34.5 261-34.5" style="fill:none;stroke:none"/>
    <text text-anchor="middle" font-size="52" font-weght="900" fill="gold" stroke="white" stroke-width="1" filter="url(#shadow)"  opacity="0" >
      <textPath id="result" method="align" spacing="auto" startOffset="0%" xlink:href="#NY_path"><tspan dx="0" dy="-2">С Новым 2020 годом!</tspan>
     <!-- Движение фразы вдоль кривой линии begin ="80s" -->  
      <animate id="NY_move" 
       begin ="btn.click+10s"
       dur="10s"
       repeatCount="1"
       attributeName="startOffset"
       values="0%;9%;9%;9%;73%;73%;73%;92%;92%"
       fill="freeze"/> 
       </textPath> 
       <!-- Появление Нового Года --> 
       
       <animate attributeName="opacity" begin="NY_move.begin" dur="0.1s" values="0;1" fill="freeze" /> 
       <!-- Перемещение текста-->
      <animateTransform id="text_Up2" attributeName="transform" type="translate" values="0 0;120 20;-40 -20;120 60;-40 60;120 0;-20 80;120 80;0 0" dur="3.5s"  begin="NY_move.end;98.5s;106;114.5s" repeatCount="1" /> 
       <!-- Увеличение текста-->
      <animateTransform id="text_scale" attributeName="transform" type="scale" calcMode="discrete" values="1;1.2;1.3;1.4;1.5;2;2;2;2;1.5;1.4;1.3;1.2;1" dur="5s"  begin="text_Up2.end" repeatCount="1" /> 
      <set id="red" attributeName="fill" to="red" begin="28.5s" />
      <set id="lime" attributeName="fill" to="lime" begin="32s" />
      <set id="purple" attributeName="fill" to="purple" begin="36.5s" />
      <animateTransform id="Scale_purple" attributeName="transform" type="scale" dur="1.5s" from="1" to="2.5" begin="36.5s" fill="freeze" />
      <animateTransform id="T_skew" attributeName="transform" attributeType="XML" 
                    type="skewY" values="1;-1.4;1" additive="sum"
                    begin="Scale_purple.end;T2_skew.end" dur="0.8s" fill="freeze" repeatCount="3"/>
    	<animateTransform id="T2_skew" attributeName="transform" attributeType="XML" 
                    type="skewY" values="-4;1;-4" additive="sum"
                    begin="T_skew.end" dur="1.5s" fill="freeze" repeatCount="2"/>			

    </text>		
    	
    	    <!-- Аватарка Рыжий волк -->
        <image id="red_wolf" xlink:href="https://isstatic.askoverflow.dev/4TxIO.png" x="620" y="735" opacity="0"
             width="8%" height="8%" >
         <animate
    	    id="W_OP"
    		attributeName="opacity"
    		dur="2.5s"
    		values="0;1;1;1;0"
    		begin="btn.click+0.3s"
    		repeatCount="3" /> 
    	</image>    
    		<!-- Аватарка Рыжий волк2 в углу-->
      <image id="red_wolf" xlink:href="https://isstatic.askoverflow.dev/4TxIO.png" width="8%" height="8%" x="60" y="935" opacity="0">
    	        <!-- Появление аватарки волка в углу -->
    	<animate
    		id="W1_ava"
    		attributeName="opacity"
    		dur="2s"
    		additive="sum"
    		values="0;1;1;1;0"
    		begin="W2_hide_back.end+1s;W1_pausa.end"
    		repeatCount="3"
    		fill="freeze" />
    		<!-- Движениее аватарки -->
    		
    	<animateTransform
    	        id="W1_Tr"
    		    attributeName="transform"
    		    attributeType="XML"
    		    type="translate" values="0;30;60;60;30;0"
    		    additive="sum"
    		    begin="W1_ava.end-7s"
    		    dur="6s"
    		    fill="freeze"
    		    repeatCount="1"/> 	 
    	    <!-- Пауза аватарки -->
    	<animate
    		id="W1_pausa"
    		attributeName="opacity"
    		dur="6s"
    		additive="sum"
    		values="0;0"
    		begin="W1_Tr.end"
    		repeatCount="1"
    		fill="freeze" />	
     </image>		
    	           <!-- Сидящий волк   -->
        <image xlink:href="https://isstatic.askoverflow.dev/zFbSq.png" x="50" y="860"
    	  opacity="0"   width="20%" height="20%" > 
    	     <!-- Появление волка -->
    	  <animate
    	    id="W2_OP"
    		attributeName="opacity"
    		dur="1.5s"
    		values="0;1"
    		begin="btn.click+20s"
    		repeatCount="1"
    		fill="freeze" /> 
    	   <!-- Волк подпрыгает вверх -->
    	 <animateTransform
    	    id="W2_skew"
    	    attributeName="transform"
    	    attributeType="XML" 
            type="skewY" values="1;-0.1;1" 
            begin="W2_OP.end"
    		dur="0.5s"
    		fill="freeze"
    		repeatCount="20"/> 
             <!-- Волк движется к зайцу -->
    	    <animateTransform
    	        id="W2_Tr"
    		    attributeName="transform"
    		    attributeType="XML"
    		    type="translate" values="0;30;60;90;120;150;180;210;240;270;300;330;360;390;420;450;480;510;540;570"
    		    additive="sum"
    		    begin="W2_OP.end"
    		    dur="11s"
    		    fill="freeze"
    		    repeatCount="1"/> 
    		   <!-- Поворот волка от зайца -->
                <animateTransform
    			   id="W2_Rotate"
    			   attributeName="transform"
    			   type="scale"
    			   dur="0.5s"
    			   begin="zayka_Rotate.end"
    			   values="1 1;-1 1"
    			   additive="sum"
    			   repaeatCount="1"
    			   fill="freeze" />	
    		   <!-- Движение волка после удара -->
    		<animateTransform
    	        id="W2_back"
    		    attributeName="transform"
    		    attributeType="XML"
    		    type="translate"
    			values="0;430"
    		    additive="sum"
    		    begin="W2_Rotate.end"
    		    dur="1.5s"
    		    fill="freeze"
    		    repeatCount="1"/> 	   
            <!-- Исчезновение волка -->
    	<animate
    	    id="W2_hide_back"
    		attributeName="opacity"
    		dur="1.5s"
    		additive="sum"
    		values="0;1"
    		begin="W2_Rotate.end"
    		repeatCount="1"
    		fill="freeze" /> 
    	</image>	
        
      	   <!-- Снегурочка -->
    <image id="Girl" transform="translate(450 570) scale(1 1)" xlink:href="https://isstatic.askoverflow.dev/RDght.png" width="30%" height="30%" opacity="0">
         <!-- Появление Снегурочки -->
    	 
        <animate
    	  id="Yes_Girl"
    	  attributeName="opacity"
    	  begin="Horse_hide.end+1s"                         
    	  dur="1.5s"
    	  values="0;1" 
          repeatCount="1"
    	  fill="freeze" />  
    	       <!-- Движения Снегурочки -->
    		 <animateTransform
    		   attributeName="transform"                            
    		   type="translate"
    		   begin="Yes_Girl.end+1s"
    		   values="
    		          450 550;
    				  580 590;
    				  480 550;
    				  580 590;
    				  530 550;
    				  500 590;
    				  450 550"
    			dur="2.5s"
    			repeatCount="indefinite" />   
      
      </image>     
         	
    	   <!-- Дед мороз -->
    <image id="Ded_Moroz" transform="translate(250 550) scale(1 1)" xlink:href="https://isstatic.askoverflow.dev/TYaVo.png" width="30%" height="30%" opacity="0">
         <!-- Появление деда Мороза -->
    	 
        <animate
    	  id="Yes_Ded"
    	  attributeName="opacity"
    	  begin="fly_hide.end+8s"                         
    	  dur="2.5s"
    	  values="0;1" 
          repeatCount="1"
    	  fill="freeze" /> 
    	       <!-- Движения Деда Мороза -->
    		 <animateTransform
    		    id="Ded_TR"
    		    attributeName="transform"                            
    		    type="translate"
    		    begin="Yes_Ded.end+1s"
    		    values="
    		          250 550;
    				  280 580;
    				  280 550;
    				  300 580;
    				  280 550;
    				  250 580;
    				  250 550"
    			dur="2s"
    			repeatCount="indefinite" />   
      
      </image>  
      <!-- Полет снегурочки на автомобиле -->
    <image  id="flyG"   xlink:href="https://isstatic.askoverflow.dev/3Jxdw.png"  width="3%" height="3%"  opacity="1" >
            	<!-- Движение автомобиля вдоль пути -->
    	 <!--  begin="btn.click+70s" -->
    	<animateMotion
    	  id="MotionGirl"
    	  begin="btn.click+45s"
    	  dur="20s"
    	  fill="freeze"
    	  additive="sum"
    	  rotate="auto-reverse"
    	  repeatCount="1"  >
        <mpath xlink:href="#Girl_Path" />
        </animateMotion> 
    	      <!-- Увеличение автомобиля -->
    		<animateTransform
    		    id="Horse_TR"
    			attributeName="transform"
    			type="scale"
    			begin="MotionGirl.begin"
    			dur="20s"
    			additive="sum"
    			values="1.2;1.4;2;3.5;4.5;5.5;8"
    			fill="freeze"
    			repeatCount="1" />  
    	
    	    <!-- Исчезновение автомобиля -->
    	
    	 	<animate xlink:href="#flyG"
    			id="Horse_hide"
    			attributeName="opacity"
    			dur="1.5s"
    			values="1;0"
    			begin="Horse_TR.end+4s"
    			repeatCount="1"
    			
    			fill="freeze" /> 
    </image>			
                   
           <g id="btn" onclick='play()' >
       <rect  x="2" y="3" rx="15"  id="rec1" width="100px" height="40px" fill="#4975B2" />
        <text x="20" y="33" font-size="32"  fill="white"> Start </text>
     </g>	 	
    </svg>	 
    </div>  

    <script>
    var zodiac = new Audio();
    zodiac.src = 'https://svg-art.ru/files/diskoteka_avariya_novogodnyaya.mp3';

    function play() {
      zodiac.play();
    }
    </script>

Alexandr_TT · Answer 6 · 2020-12-25T19:22:12+08:00

Это не конкурсный ответ, а скорее призыв участвовать в конкурсе

===================================================================== Конкурс завершен 30.12.2019

Очень долго раскачивались в этом году потенциальные участники конкурса и видимо просто не рассчитали время или вмешались какие-то неожиданные события, например: предновогодние хлопоты :)))

Не бросайте свои начатые работы, они ещё пригодятся!

Все уже опубликованные ответы, кроме победившей в прошлом конкурсе, также как и новые ответы будут участвовать в новом конкурсе.

Новогодний конкурс анимации открыт вновь! 30. 12.2019

Все благодарности @HamSter за продолжение Новогоднего праздника!

Поздравляем победителя Harry Heman!

==========================================================================

Новогодний конкурс анимации открыт вновь! 05.01.2020

Все благодарности @Leks за продолжение Новогоднего праздника с плавным переходом к Рождеству!

==========================================================================

На приглашения принять и опубликовать ответы часто слышу

Фронтенд не моё
Не умею рисовать
Никогда не занимался анимацией
Совсем нет свободного времени

Но ведь всё это можно реализовать другими средствами.

Все благодарности за идею @A K♦

Не обязательно рисовать, можно взять готовую картинку и подвигать её.
Можно с помощью JS или другого языка, используя символы Юникода или Dos написать код, рисующий анимацию.

Всё зависит от вашей фантазии:

<canvas id ='NewYear'></canvas>
<script>
  var db = document.body;
  var c = document.getElementById('NewYear');
  var $ = c.getContext('2d');
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  var resume;
  function relay(){
  window.requestAnimationFrame(relay);
  resume();
}
</script>
  <!--Script to Relay!-->
<script>
  //BEGIN SCRIPT RELAY TO ru.StackOverflow.com... 
  
  _s = db.querySelectorAll("script")[1].innerHTML.split("\n");
  x = 0; 
  y = 1; 
  c.width = w = window.innerWidth;
  c.height = h = _s.length*20;
  db.style.margin = 0;
  db.style.background = "hsla(0,0%,0%,1)";
  db.style.overflow = "hidden";
  $.textBaseline = "top";
  $.font = "1.1em monospace";
  
//PAUSE RELAY: ...
//С  НОВЫМ  2020 ГОДОМ! 
// УДАЧИ И ВЕЗЕНИЯ ВО ВСЕХ НАЧИНАНИЯХ, КАК В ВИРТУАЛЬНОМ,
// ТАК И В РЕАЛЬНОМ МИРЕ!
/*
          ★ 
         *o* 
        *♥*o*
       ***o*** 
      **o**♥*o* 
     **♥**o**o** 
    **o**♥***♥*o* 
   *****♥*o**o**** 
  **♥**o*****o**♥** 
 ******o*****♥**o*** 
****o***♥**o***o***♥* 
        || 
  \____ ||_____/
╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬ 
  
*/

  
resume = function(){
    $.globalCompositeOperation = "source-over";
    $.shadowBlur = 0; $.fillStyle = "hsla(0,0%,0%,0.4)";
    $.fillRect(0,0,w,h);
    $.shadowColor = "hsla(120,100%,50%,0.5)";
    $.shadowBlur = 9; $.fillStyle = "hsla(120,100%,20%,1)";
    $.globalCompositeOperation = "lighter";
  _s.forEach(function(t, i) {
      if (i <= y) {
        if (i == y) { t = t.substr(0, x); }
        $.fillText(t, 100, 100+i*16);       }
    });
                 
    $.fillStyle = "hsla(120,100%,50%,1)";
    $.fillRect(100+$.measureText(_s[y].substr(0, x)).width, 102+y*16, 10, 14);
    x++;
        if (x >= _s[y].length) { y++; x = 0;}
            if (y*16 > innerHeight-340) { $.translate(0, -0.5);}
                if (y >= _s.length-1) { window.clearInterval();}}
  
relay();
  

</script>

Источник Там есть и другие примеры

**Простой пример создания персонажа**

Наступает год металлической Крысы.
Нашел в сети рисунок крысы с минимальным количеством деталей.

Техника создания по шагам:

Загружаем рисунок в векторный редактор

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">  

<image xlink:href="https://isstatic.askoverflow.dev/F9rB3.jpg" width="100%" height="100%" />
</svg>

и наносим по контуру узловые точки

Сохраняем файл в векторном редакторе в формате SVG и копируем path в другой файл SVG

Добавляем анимацию рисования линии с помощью изменения атрибута stroke-dasharray для path На сайте много примеров создания подобных анимаций

<animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="0s" values="0 2482;2482 0" fill="freeze" />

Анимация готова. Я думаю, при желании её можно будет повторить для других картинок

let eye = document.getElementById("an_eye");
let mustache_1 = document.getElementById("an_mustache_1");
let mustache_2 = document.getElementById("an_mustache_2");
let mustache_3 = document.getElementById("an_mustache_3");

const btn = document.getElementById('btn1');
btn.addEventListener("click", () => {
  an_body.beginElement();
  eye = fRestartAnim(eye, 3600);
  mustache_1 = fRestartAnim(mustache_1, 5000);
  mustache_2 = fRestartAnim(mustache_2, 5000);
  mustache_3 = fRestartAnim(mustache_3, 5000);
});

function fRestartAnim(an, delay = 0) {
  const anClone = an.cloneNode(true);
  const anParent = an.parentNode;
  anParent.replaceChild(anClone, an);
  anClone.setAttribute("begin", performance.now() + delay + "ms");
  return anClone;
}

<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
  <style>
  .s0 {
    fill: none;
    stroke: black;
    stroke-width: 5;
  }
  #mustache_1, #mustache_2, #mustache_3 {
    stroke-width: 3;
  }
  </style>
  <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
    <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="indefinite" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
    <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="indefinite" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
    <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
    <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
    <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>
</svg>

27.12.2019

Мерцание огней ёлочки

В векторном редакторе, точно также, как в примере выше наносим по контуру ёлочки узловые точки и забираем path этого контура в другой файл.

Применяем к этому контуру маску с разными цветами, анимируем перебор их, что создаёт иллюзию мерцания гирлянд.

Анимация начинается после клика по заснеженной ёлочке

10 раз моргает, затем пауза 5 сек. и снова моргает

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
  <defs>
   <mask id="msk1">
    <rect fill="white" width="100%" height="100%"/>
  <path fill="#9939CD"  d="m832.5 54.2c-25 19.3-14.5 57.9-13.8 93.8 0.2 11.8-8 22.2-12.5 33.1-2.3 5.7-7.5 17-7.5 17 0 0-8.4 18.5-12 28.1-5.5 15-12.7 29.7-14.5 45.6-1 9.1 3.7 18.2 2.5 27.3-1.7 12.3-11.3 22.5-13.1 34.8-1.1 7.5 1.6 15.1 1.5 22.7-0.1 8.4-2.2 25-2.2 25 0 0-0.6 8.1-2.8 11.4-3.6 5.5-12.9 6-15.6 12-2.2 4.9 1.4 10.7 1.1 16.1-0.5 10-7.2 19.7-5.3 29.5 1 5.1 6.3 8.2 8.3 13.1 1.5 3.6-2.4 15.9-6.7 23.9-2.7 5.2-9.3 4.9-10 9.5-1.4 8.4 12 22.5 12 22.5l-8.9 17.8-4.4 30 1.7 30 9.5 10c1 20.7-2.8 6-8.9 11.1-6.3 6.1 2.1 17.9-0.8 26.1-1.7 4.7-9.2 11.7-9.2 11.7 0 0-5.5 11-4.4 16.7 1.1 5.5 8.9 7.9 10 13.3 1.4 7.1-4 14-5.6 21.1-1 4.8-3.3 9.6-2.5 14.5 0.7 4.1 6 6.9 5.8 11.1-0.2 6.5-8.5 10.4-10 16.7-2.4 9.9 1.1 20.4 1.9 30.6 0.4 4.3 0.5 8.6 1.4 12.8 1.4 7 3 14.1 6.1 20.6 2.7 5.5 4.7 13.4 10.6 15 7 1.9 12.8-8.2 20-8.9 14.8-1.4 29.1 6 43.4 10 8.2 2.3 18.7 2 24.1 7.9 10.5 11.5 10.1 15.7 18 17.4 7.7 1.7 21.5 3.3 28.6-1 7.2-4.3 10-12.8 15.3-17 8.3-6.6 14-3.5 20.7-6.3 6.6-2.7 12.1-7.9 18.9-10 6.4-2 13.3-1.9 20-2.2 7-0.4 15.3 4 21.1 0 5.9-4 4.8-13.5 7.8-20 2.5-5.5 6.5-10.4 8.3-16.1 1.3-4.1 0.5-8.7 1.7-12.8 1.7-5.9 6.7-10.7 7.8-16.7 2-10.6-0.8-21.6-2.2-32.3-0.9-6.4-4.2-12.5-3.9-18.9 0.3-5.8 2.4-11.5 5-16.7 1.8-3.7 6.8-5.9 7.2-10 1.2-10.4-4-22.5-12.2-28.9-4.6-3.6-14.9 2.6-17.2-2.8-5.6-13 23.5-20.9 23.9-35 0.3-8.6-13.3-22.2-13.3-22.2l-5-60.1c0 0-1.6-8.9-1.1-13.3 0.6-5.8 6-11 5-16.7-0.9-4.8-8.8-6.8-8.9-11.7-0.1-6.1 10.2-8.9 10.6-15 0.5-7.8-7.4-13.7-11.1-20.6-4.1-7.6-9.4-14.7-12.2-22.8-1.4-3.9-3.2 0.5-2.2-12.2 0.1-9.5-14.8-18.5-10-26.7 2.5-4.2 11.7 1.8 14.5-2.2 14.2-21.2-16.9-49-17.8-74.5-0.2-4.5 4.3-9.3 2.2-13.3-1.9-3.7-8-2.8-11.1-5.6-3-2.7-5.5-6.2-6.7-10-1.5-5 0-10.4 0-15.6 0-4.4 1.2-9.1 0-13.3-1.4-4.6-5-8.3-7.8-12.2-1.1-1.5-3.1-2.6-3.3-4.4-0.6-4.8 3.9-8.8 5.6-13.3 1.2-3.3 3.9-6.5 3.3-10-0.9-5.5-4.3-12.8-9.8-13.3-1.9-0.2-2.3 4.2-4.2 4-8-1.1-10.4-12.9-12.6-20.7-3.6-26.5-14.5-23.1-15.4-35.2-1.3-25.9 11.6-67.9-9.4-89-8.7-8.8-27.1-11.6-36.9-4z">
 <animate
    id="Three_fire"
    attributeName="fill"
    dur="0.5s"
    begin="svg1.click;Three_pause.end"
    values=" #CD9AE9; white;white;#CD9AE9"
    fill="freeze"
    repeatCount="10" />
 <animate
    id="Three_pause"
    attributeName="fill"
    dur="5s"
    begin="Three_fire.end"
    values=" white;white"
    fill="freeze"
    repeatCount="1" />   
   </path>
 </mask> 
 </defs> 
  
  <image mask="url(#msk1)" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>
</svg>

Добавляем звезду

Всё сделано, как и в других примерах выше - с помощью векторного редактора рисуем контур и анимируем цвет и прозрачность с помощью SVG фильтров

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
     
  <defs>
  <filter id="glow" filterUnits="userSpaceOnUse"
            x="-50%" y="-50%" width="300%" height="300%">
       
      <feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur5"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur10"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur20"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blur30"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="70" result="blur50"/>
       <feMerge result="blur-merged">
        <feMergeNode in="blur10"/>
        <feMergeNode in="blur20"/>
        <feMergeNode in="blur30"/>
        <feMergeNode in="blur50"/>
      </feMerge>
      
      <feColorMatrix result="yellow-blur" in="blur-merged" type="matrix"
                     values="0 0 0 0 0
                             0 1 0 0 0
                             0 0 1 0 0
                             0 0 0 0.7 0" />
      <feMerge>
        <feMergeNode in="yellow-blur"/>       
        <feMergeNode in="blur5"/>          
        <feMergeNode in="SourceGraphic"/>  
      </feMerge>
    </filter>
  
   <mask id="msk1">
    <rect fill="white" width="100%" height="100%"/>
  <path fill="#9939CD"  d="m832.5 54.2c-25 19.3-14.5 57.9-13.8 93.8 0.2 11.8-8 22.2-12.5 33.1-2.3 5.7-7.5 17-7.5 17 0 0-8.4 18.5-12 28.1-5.5 15-12.7 29.7-14.5 45.6-1 9.1 3.7 18.2 2.5 27.3-1.7 12.3-11.3 22.5-13.1 34.8-1.1 7.5 1.6 15.1 1.5 22.7-0.1 8.4-2.2 25-2.2 25 0 0-0.6 8.1-2.8 11.4-3.6 5.5-12.9 6-15.6 12-2.2 4.9 1.4 10.7 1.1 16.1-0.5 10-7.2 19.7-5.3 29.5 1 5.1 6.3 8.2 8.3 13.1 1.5 3.6-2.4 15.9-6.7 23.9-2.7 5.2-9.3 4.9-10 9.5-1.4 8.4 12 22.5 12 22.5l-8.9 17.8-4.4 30 1.7 30 9.5 10c1 20.7-2.8 6-8.9 11.1-6.3 6.1 2.1 17.9-0.8 26.1-1.7 4.7-9.2 11.7-9.2 11.7 0 0-5.5 11-4.4 16.7 1.1 5.5 8.9 7.9 10 13.3 1.4 7.1-4 14-5.6 21.1-1 4.8-3.3 9.6-2.5 14.5 0.7 4.1 6 6.9 5.8 11.1-0.2 6.5-8.5 10.4-10 16.7-2.4 9.9 1.1 20.4 1.9 30.6 0.4 4.3 0.5 8.6 1.4 12.8 1.4 7 3 14.1 6.1 20.6 2.7 5.5 4.7 13.4 10.6 15 7 1.9 12.8-8.2 20-8.9 14.8-1.4 29.1 6 43.4 10 8.2 2.3 18.7 2 24.1 7.9 10.5 11.5 10.1 15.7 18 17.4 7.7 1.7 21.5 3.3 28.6-1 7.2-4.3 10-12.8 15.3-17 8.3-6.6 14-3.5 20.7-6.3 6.6-2.7 12.1-7.9 18.9-10 6.4-2 13.3-1.9 20-2.2 7-0.4 15.3 4 21.1 0 5.9-4 4.8-13.5 7.8-20 2.5-5.5 6.5-10.4 8.3-16.1 1.3-4.1 0.5-8.7 1.7-12.8 1.7-5.9 6.7-10.7 7.8-16.7 2-10.6-0.8-21.6-2.2-32.3-0.9-6.4-4.2-12.5-3.9-18.9 0.3-5.8 2.4-11.5 5-16.7 1.8-3.7 6.8-5.9 7.2-10 1.2-10.4-4-22.5-12.2-28.9-4.6-3.6-14.9 2.6-17.2-2.8-5.6-13 23.5-20.9 23.9-35 0.3-8.6-13.3-22.2-13.3-22.2l-5-60.1c0 0-1.6-8.9-1.1-13.3 0.6-5.8 6-11 5-16.7-0.9-4.8-8.8-6.8-8.9-11.7-0.1-6.1 10.2-8.9 10.6-15 0.5-7.8-7.4-13.7-11.1-20.6-4.1-7.6-9.4-14.7-12.2-22.8-1.4-3.9-3.2 0.5-2.2-12.2 0.1-9.5-14.8-18.5-10-26.7 2.5-4.2 11.7 1.8 14.5-2.2 14.2-21.2-16.9-49-17.8-74.5-0.2-4.5 4.3-9.3 2.2-13.3-1.9-3.7-8-2.8-11.1-5.6-3-2.7-5.5-6.2-6.7-10-1.5-5 0-10.4 0-15.6 0-4.4 1.2-9.1 0-13.3-1.4-4.6-5-8.3-7.8-12.2-1.1-1.5-3.1-2.6-3.3-4.4-0.6-4.8 3.9-8.8 5.6-13.3 1.2-3.3 3.9-6.5 3.3-10-0.9-5.5-4.3-12.8-9.8-13.3-1.9-0.2-2.3 4.2-4.2 4-8-1.1-10.4-12.9-12.6-20.7-3.6-26.5-14.5-23.1-15.4-35.2-1.3-25.9 11.6-67.9-9.4-89-8.7-8.8-27.1-11.6-36.9-4z">
 <animate
    id="Three_fire"
    attributeName="fill"
    dur="0.5s"
    begin="svg1.click;Three_pause.end"
    values=" #CD9AE9; white;white;#CD9AE9"
    fill="freeze"
    repeatCount="10" />
 <animate
    id="Three_pause"
    attributeName="fill"
    dur="5s"
    begin="Three_fire.end"
    values=" white;white"
    fill="freeze"
    repeatCount="1" />   
   </path>
 </mask> 
 </defs> 
  
  <image mask="url(#msk1)" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>
  
   <path id="star_Full" fill="#CDE7FB"  filter="url(#glow)" opacity="0" d="M580.2 76.2 837.2 71.3 774.7 5.7 845.1 62.7 850.1 8c0 0 6.8 54.2 6 54.7-4.3 2.8 70.9-57.5 70.9-57.5L862.8 71.2 1131.2 76.2 864.4 81.8 982.3 203C960.8 189.7 856.8 91.3 856.7 91.2L849.8 194.2 845.7 91.1 714.3 203.7 832.8 82.5Z">
    <animate
        id="an_star"
        attributeName="opacity"
        dur="2.5s"
        begin="svg1.click;pause_star.end"
        values="1;1;0"              
        fill="freeze"
        repeatCount="5" /> 
    <animate
        id="pause_star"
        attributeName="opacity"
        dur="1.5s"
        begin="an_star.end"
        values="0;0"                
        fill="freeze"
        repeatCount="1" />  
   </path>      
</svg>

Добавляем дополнительно анимацию замены цвета для основы фильтра.

В результате получаем иллюзию случайно выбранного цвета для звезды

Так как длительность циклов замены основного цвета звезды, циклы применения фильтров, циклы применения масок, паузы имеют разные значения.

<animate
        id="fill_change_star"
        attributeName="fill"
        dur="20s"
        begin="svg1.click"
        values="#CDE7FB;yellowgreen;crimson;#CDE7FB"                
        fill="freeze"
        repeatCount="1" />

Анимация начнется после клика по ёлочке

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
     
  <defs>
  <filter id="glow" filterUnits="userSpaceOnUse"
            x="-50%" y="-50%" width="300%" height="300%">
       
      <feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur5"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur10"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur20"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blur30"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="70" result="blur50"/>
       <feMerge result="blur-merged">
        <feMergeNode in="blur10"/>
        <feMergeNode in="blur20"/>
        <feMergeNode in="blur30"/>
        <feMergeNode in="blur50"/>
      </feMerge>
      
      <feColorMatrix result="yellow-blur" in="blur-merged" type="matrix"
                     values="0 0 0 0 0
                             0 1 0 0 0
                             0 0 0 0 0
                             0 0 0 0.7 0" />
      <feMerge>
        <feMergeNode in="yellow-blur"/>       
        <feMergeNode in="blur5"/>          
        <feMergeNode in="SourceGraphic"/>  
      </feMerge>
    </filter>
  
   <mask id="msk1">
    <rect fill="white" width="100%" height="100%"/>
  <path fill="#9939CD"  d="m832.5 54.2c-25 19.3-14.5 57.9-13.8 93.8 0.2 11.8-8 22.2-12.5 33.1-2.3 5.7-7.5 17-7.5 17 0 0-8.4 18.5-12 28.1-5.5 15-12.7 29.7-14.5 45.6-1 9.1 3.7 18.2 2.5 27.3-1.7 12.3-11.3 22.5-13.1 34.8-1.1 7.5 1.6 15.1 1.5 22.7-0.1 8.4-2.2 25-2.2 25 0 0-0.6 8.1-2.8 11.4-3.6 5.5-12.9 6-15.6 12-2.2 4.9 1.4 10.7 1.1 16.1-0.5 10-7.2 19.7-5.3 29.5 1 5.1 6.3 8.2 8.3 13.1 1.5 3.6-2.4 15.9-6.7 23.9-2.7 5.2-9.3 4.9-10 9.5-1.4 8.4 12 22.5 12 22.5l-8.9 17.8-4.4 30 1.7 30 9.5 10c1 20.7-2.8 6-8.9 11.1-6.3 6.1 2.1 17.9-0.8 26.1-1.7 4.7-9.2 11.7-9.2 11.7 0 0-5.5 11-4.4 16.7 1.1 5.5 8.9 7.9 10 13.3 1.4 7.1-4 14-5.6 21.1-1 4.8-3.3 9.6-2.5 14.5 0.7 4.1 6 6.9 5.8 11.1-0.2 6.5-8.5 10.4-10 16.7-2.4 9.9 1.1 20.4 1.9 30.6 0.4 4.3 0.5 8.6 1.4 12.8 1.4 7 3 14.1 6.1 20.6 2.7 5.5 4.7 13.4 10.6 15 7 1.9 12.8-8.2 20-8.9 14.8-1.4 29.1 6 43.4 10 8.2 2.3 18.7 2 24.1 7.9 10.5 11.5 10.1 15.7 18 17.4 7.7 1.7 21.5 3.3 28.6-1 7.2-4.3 10-12.8 15.3-17 8.3-6.6 14-3.5 20.7-6.3 6.6-2.7 12.1-7.9 18.9-10 6.4-2 13.3-1.9 20-2.2 7-0.4 15.3 4 21.1 0 5.9-4 4.8-13.5 7.8-20 2.5-5.5 6.5-10.4 8.3-16.1 1.3-4.1 0.5-8.7 1.7-12.8 1.7-5.9 6.7-10.7 7.8-16.7 2-10.6-0.8-21.6-2.2-32.3-0.9-6.4-4.2-12.5-3.9-18.9 0.3-5.8 2.4-11.5 5-16.7 1.8-3.7 6.8-5.9 7.2-10 1.2-10.4-4-22.5-12.2-28.9-4.6-3.6-14.9 2.6-17.2-2.8-5.6-13 23.5-20.9 23.9-35 0.3-8.6-13.3-22.2-13.3-22.2l-5-60.1c0 0-1.6-8.9-1.1-13.3 0.6-5.8 6-11 5-16.7-0.9-4.8-8.8-6.8-8.9-11.7-0.1-6.1 10.2-8.9 10.6-15 0.5-7.8-7.4-13.7-11.1-20.6-4.1-7.6-9.4-14.7-12.2-22.8-1.4-3.9-3.2 0.5-2.2-12.2 0.1-9.5-14.8-18.5-10-26.7 2.5-4.2 11.7 1.8 14.5-2.2 14.2-21.2-16.9-49-17.8-74.5-0.2-4.5 4.3-9.3 2.2-13.3-1.9-3.7-8-2.8-11.1-5.6-3-2.7-5.5-6.2-6.7-10-1.5-5 0-10.4 0-15.6 0-4.4 1.2-9.1 0-13.3-1.4-4.6-5-8.3-7.8-12.2-1.1-1.5-3.1-2.6-3.3-4.4-0.6-4.8 3.9-8.8 5.6-13.3 1.2-3.3 3.9-6.5 3.3-10-0.9-5.5-4.3-12.8-9.8-13.3-1.9-0.2-2.3 4.2-4.2 4-8-1.1-10.4-12.9-12.6-20.7-3.6-26.5-14.5-23.1-15.4-35.2-1.3-25.9 11.6-67.9-9.4-89-8.7-8.8-27.1-11.6-36.9-4z">
  <!-- Анимация цветов маски -->
 <animate
    id="Three_fire"
    attributeName="fill"
    dur="0.5s"
    begin="svg1.click;Three_pause.end"
    values=" #CD9AE9; white;white;#CD9AE9"
    fill="freeze"
    repeatCount="10" />
 <!-- Пауза анимации цветов маски -->
 <animate
    id="Three_pause"
    attributeName="fill"
    dur="5s"
    begin="Three_fire.end"
    values=" white;white"
    fill="freeze"
    repeatCount="1" />   
   </path>
 </mask> 
 </defs> 
  
  <image mask="url(#msk1)" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>
  
   <path id="star_Full" fill="#CDE7FB"  filter="url(#glow)" opacity="0" d="M580.2 76.2 837.2 71.3 774.7 5.7 845.1 62.7 850.1 8c0 0 6.8 54.2 6 54.7-4.3 2.8 70.9-57.5 70.9-57.5L862.8 71.2 1131.2 76.2 864.4 81.8 982.3 203C960.8 189.7 856.8 91.3 856.7 91.2L849.8 194.2 845.7 91.1 714.3 203.7 832.8 82.5Z">
      <!-- Анимация opacity звезды -->
    <animate
        id="an_star"
        attributeName="opacity"
        dur="2.5s"
        begin="svg1.click;pause_star.end"
        values="1;1;0"              
        fill="freeze"
        repeatCount="5" /> 
      <!-- Пауза анимация opacity звезды -->
    <animate
        id="pause_star"
        attributeName="opacity"
        dur="1.5s"
        begin="an_star.end"
        values="0;0"                
        fill="freeze"
        repeatCount="1" />  
       <!-- Замена цвета у звезды    -->
   <animate
        id="fill_change_star"
        attributeName="fill"
        dur="11s"
        begin="svg1.click;pause_star.end"
        values="#CDE7FB;red;#B34EE9;#15C14E"                
        fill="freeze"
        repeatCount="1" />  
   </path>      
    
       <!-- #CDE7FB;yellowgreen;crimson;#CDE7FB" -->
</svg>

user361068 · Answer 7 · 2020-12-29T16:43:00+08:00

Ламповая ASCII графика на Си. Посвящается всем, кто пишет на Си.
Осторожно. Возможен приступ эпилепсии (особенно если у Вас слабый ПК)

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <time.h>

#define ROWS 19
#define COLS 26

void make_frame(const char ft[][COLS], const char sn[][COLS], char frame[][COLS]);
void rotate_snow(char sn[][COLS]);
void draw_frame(const char frame[][COLS]);
void delay(double sec);
void clear_screen();

int main()
{
    const char fir_tree[ROWS][COLS] =
    {
        "                         ",
        "                         ",
        "                         ",
        "           /\\            ",
        "          <  >           ",
        "          /\\/\\           ",
        "         /  o \\          ",
        "        /o     \\         ",
        "       /_      _\\        ",
        "        /      \\         ",
        "       /    o   \\        ",
        "      /  o       \\       ",
        "     /_        o _\\      ",
        "      /          \\       ",
        "     /    o       \\      ",
        "    /          o   \\     ",
        "   /__o_____________\\    ",
        "          |  |           ",
        "*************************"
    };

    char snow[ROWS - 1][COLS] =
    {
        "   *    *       *    *   ",
        "  *       *     *  *     ",
        "       *    *     *     *",
        "  *       *    *         ",
        "     *      *        *   ",
        "       *         *       ",
        "*           *        *   ",
        "        *            *  *",
        "    *              *     ",
        "      *        *         ",
        "*       *               *",
        "              *          ",
        "    *   *          *    *",
        "             *           ",
        "     *              *    ",
        "  *       *           *  ",
        "         *         *     ",
        "     *              *   *",
    };

    char frame[ROWS][COLS];

    while (1)
    {
        make_frame(fir_tree, snow, frame);
        draw_frame(frame);
        delay(0.1);
        rotate_snow(snow);
        clear_screen();
    }

    return 0;
}

void make_frame(const char ft[][COLS], const char sn[][COLS], char frame[][COLS])
{
    strcpy(frame[ROWS - 1], ft[ROWS - 1]);
    for (int i = 0; i < ROWS - 1; i++)
    {
        strcpy(frame[i], ft[i]);
        for (int j = 0; j < COLS; j++)
        {
            if (sn[i][j] == '*')
            {
                frame[i][j] = '*';
            }
        }
    }
}

void rotate_snow(char sn[][COLS])
{
    char temp[COLS];
    strcpy(temp, sn[ROWS - 2]);
    for (int i = ROWS - 3; i >= 0; i--)
    {
        strcpy(sn[i + 1], sn[i]);
    }
    strcpy(sn[0], temp);
}

void draw_frame(const char frame[][COLS])
{
    for (int i = 0; i < ROWS; i++)
    {
        puts(frame[i]);
    }
}

void delay(double sec)
{
    clock_t start = clock();
    while ((double)(clock() - start) / CLOCKS_PER_SEC < sec)
        continue;
}

void clear_screen()
{
    system("cls");
}

user347553 · Answer 8 · 2020-12-30T21:20:07+08:00

снежок

let snowmax = 40,
  snowcolor = new Array("#aaaacc", "#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff"),
  snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Comic Sans MS"),
  snowletter = "*",
  sinkspeed = 0.5,
  snowmaxsize = 30,
  snowminsize = 8,
  snow = new Array(),
  marginbottom,
  marginright,
  timer,
  i_snow = 0,
  x_mv = new Array(),
  crds = new Array(),
  lftrght = new Array();

function randommaker(range) {
  rand = Math.floor(range * Math.random());
  return rand;
}

function initsnow() {
  marginbottom = window.innerHeight;
  marginright = window.innerWidth;
  let snowsizerange = snowmaxsize - snowminsize;
  for (i = 0; i <= snowmax; i++) {
    crds[i] = 0;
    lftrght[i] = Math.random() * 15;
    x_mv[i] = 0.03 + Math.random() / 10;
    snow[i] = document.getElementById("s" + i);
    snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
    snow[i].size = randommaker(snowsizerange) + snowminsize;
    snow[i].fontSize = snow[i].size;
    snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
    snow[i].sink = sinkspeed * snow[i].size / 5;
    snow[i].posx = randommaker(marginright - snow[i].size);
    snow[i].posy = randommaker(
      2 * marginbottom - marginbottom - 2 * snow[i].size
    );
    snow[i].style.left = snow[i].posx;
    snow[i].style.top = snow[i].posy;
  }
  movesnow();
}

function movesnow() {
  for (i = 0; i <= snowmax; i++) {
    crds[i] += x_mv[i];
    snow[i].posy += snow[i].sink;
    snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
    snow[i].style.top = snow[i].posy + "px";
    if (
      snow[i].posy >= marginbottom - 2 * snow[i].size ||
      parseInt(snow[i].style.left) > marginright - 3 * lftrght[i]
    ) {
      snow[i].posx = randommaker(marginright - snow[i].size);
      snow[i].posy = 0;
    }
  }
  let timer = setTimeout("movesnow()", 50);
}

for (i = 0; i <= snowmax; i++) {
  document.write(
    "<span id='s" +
    i +
    "'style='position: absolute; top: -" +
    snowmaxsize +
    "'>" +
    snowletter +
    "</span>"
  );
}

initsnow();

window.addEventListener('resize', ()=> initsnow())

<body style="margin: 0; background: #222; overflow: hidden;"></body>

поздравлялка stroke-dash

body {
  margin: 0;
  background: #222;
  font: 14em/1 cursive;
}

.line {
  font-size: 0.6em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text {
  fill: none;
  stroke-dasharray: 7% 27%;
  stroke-width: 3px;
  animation: stroke 9s infinite ease-in-out;
}

.text:nth-child(1) {
  stroke: hotpink;
  stroke-dashoffset: 7%;
}

.text:nth-child(2) {
  stroke: firebrick;
  stroke-dashoffset: 14%;
}

.text:nth-child(3) {
  stroke: sandybrown;
  stroke-dashoffset: 21%;
}

.text:nth-child(4) {
  stroke: antiquewhite;
  stroke-dashoffset: 28%;
}

.text:nth-child(5) {
  stroke: steelblue;
  stroke-dashoffset: 35%;
}

@keyframes stroke {
  50% {
    stroke-dashoffset: 36%;
    stroke-dasharray: 0 88%;
  }
}

<svg viewBox="0 0 800 600">
        <symbol id="text">
            <text text-anchor="middle" x="50%" y="40%" class="line">
                С Новым
            </text>
            <text text-anchor="middle" x="50%" y="70%">
                годом!
            </text>
        </symbol>
        <g>
            <use xlink:href="#text" class="text"></use>
            <use xlink:href="#text" class="text"></use>
            <use xlink:href="#text" class="text"></use>
            <use xlink:href="#text" class="text"></use>
            <use xlink:href="#text" class="text"></use>
        </g>
</svg>

поздравлялка webgl

let vertexCount = 10000 * 4,
  depth = 0,
  fontName = "Arial, Helvetica, Verdana",
  fontSize = 24,
  frame = 0,
  smoothness = 6;

let vertices = [],
  dVertices = [];

let refctx = document.createElement("canvas").getContext("2d");
let gl = document.createElement("canvas").getContext("webgl");
let postctx = document.body
  .appendChild(document.createElement("canvas"))
  .getContext("2d");
let canvas = gl.canvas;

let compileShader = function(type, source) {
  let shader = gl.createShader(type),
    status;
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  status = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (status) return shader;
  console.error("Shader compile error", gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
};

let createProgram = function(vertexShader, fragmentShader) {
  let program = gl.createProgram(),
    status;
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  gl.linkProgram(program);

  status = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (status) return program;

  console.error("program link error", gl.getProgramInfoLog());
  gl.deleteProgram(program);
};

let vertexShader = compileShader(
  gl.VERTEX_SHADER,
  `
	attribute vec4 a_position;
    uniform vec2 u_resolution;
    uniform float u_frame;
    varying vec4 v_position;
    varying float v_frame;
    void main () {
  	v_position = a_position;
    v_frame = u_frame;
    v_position.xy /= u_resolution;
    v_position.y *= -1.0;
    
    v_position.xy *= 10.0;
    v_position.z += cos(u_frame / 20.0 + v_position.x * 10.0) * sin(u_frame / 10.0 + v_position.y * 12.0) * 0.02;
    v_position.xy /= (1.0 + v_position.z);
    
  	gl_Position = vec4(v_position.xy, 0.0, 1.0);
    gl_PointSize = 3.0;
  }
`
);

let fragmentShader = compileShader(
  gl.FRAGMENT_SHADER,
  `
	precision mediump float;
    varying vec4 v_position;
    varying float v_frame;
 	float pi = 3.141592653589793;
    float hue2rgb(float f1, float f2, float hue) {
      if (hue < 0.0)
          hue += 1.0;
      else if (hue > 1.0)
          hue -= 1.0;
      float res;
      if ((6.0 * hue) < 1.0)
          res = f1 + (f2 - f1) * 6.0 * hue;
      else if ((2.0 * hue) < 1.0)
          res = f2;
      else if ((3.0 * hue) < 2.0)
          res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
      else
          res = f1;
      return res;
  }

  vec3 hsl2rgb(vec3 hsl) {
      vec3 rgb;
      
      hsl.x = mod(hsl.x, 360.0);
      hsl.x /= 360.0;

      if (hsl.y == 0.0) {
          rgb = vec3(hsl.z); // Luminance
      } else {
          float f2;

          if (hsl.z < 0.5)
              f2 = hsl.z * (1.0 + hsl.y);
          else
              f2 = hsl.z + hsl.y - hsl.y * hsl.z;

          float f1 = 2.0 * hsl.z - f2;

          rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
          rgb.g = hue2rgb(f1, f2, hsl.x);
          rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
      }   
      return rgb;
  }
  
  void main () {
 		vec4 col = vec4(hsl2rgb(vec3(v_frame + v_position.z * 2000.0, 1.0, .5)) * v_position.w, 1.0);
  	gl_FragColor = col;
  }
`
);

let program = createProgram(vertexShader, fragmentShader);

let aPosition = gl.getAttribLocation(program, "a_position");
let uResolution = gl.getUniformLocation(program, "u_resolution");
let uColor = gl.getUniformLocation(program, "u_color");
let uFrame = gl.getUniformLocation(program, "u_frame");

let vertexBuffer = gl.createBuffer();

gl.useProgram(program);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(aPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
let render = () => {
  frame++;
  gl.uniform1f(uFrame, frame);
  gl.clear(gl.COLOR_BUFFER_BIT);

  if (
    postctx.canvas.width !== postctx.canvas.offsetWidth ||
    postctx.canvas.height !== postctx.canvas.offsetHeight
  ) {
    canvas.width = postctx.canvas.width = postctx.canvas.offsetWidth;
    canvas.height = postctx.canvas.height = postctx.canvas.offsetHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2fv(uResolution, [canvas.width, canvas.height]);
  }

  for (let i = 0; i < vertices.length; i += 4) {
    let x = i;
    let y = i + 1;
    let z = i + 2;
    let v = i + 3;

    dVertices[x] -= (dVertices[x] - vertices[x]) / smoothness;
    dVertices[y] -= (dVertices[y] - vertices[y]) / smoothness;
    dVertices[z] -= (dVertices[z] - vertices[z]) / smoothness;
    dVertices[v] -= (dVertices[v] - vertices[v]) / smoothness * 2;
  }
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(dVertices), gl.STATIC_DRAW);
  gl.drawArrays(gl.POINTS, 0, dVertices.length / 4);

  postctx.globalAlpha = 0.2;
  postctx.globalCompositeOperation = "source-over";
  postctx.drawImage(canvas, 0, 0);
  postctx.globalCompositeOperation = "lighten";
  postctx.globalAlpha = 1;
  postctx.filter = "blur(8px)";
  postctx.drawImage(canvas, 0, 0);
  postctx.filter = "blur(0)";

  requestAnimationFrame(render);
};

let setText = text => {
  vertices = [];

  refctx.font = fontSize.toString() + "px " + fontName;
  refctx.canvas.width = refctx.measureText(text).width || 100;
  refctx.canvas.height = fontSize;
  refctx.font = fontSize.toString() + "px " + fontName;
  refctx.textBaseline = "top";
  refctx.clearRect(0, 0, refctx.canvas.width, refctx.canvas.height);
  refctx.fillStyle = "#fff";
  refctx.fillText(text, 0, 0);

  let {
    data
  } = refctx.getImageData(
    0,
    0,
    refctx.canvas.width,
    refctx.canvas.height
  );

  for (let i = 0; i < vertexCount; i += 4) {
    j = i % data.length;
    let dI = (j / 4) >> 0;
    let x = dI % refctx.canvas.width - refctx.canvas.width / 2;
    let y =
      ((dI / refctx.canvas.width) >> 0) % refctx.canvas.height -
      refctx.canvas.height / 2;
    let z = -depth / 2 + Math.random() * depth;
    let v = data[j] * (data[j + 3] / 255) / 255;

    vertices.push(x);
    vertices.push(y);
    vertices.push(z);
    vertices.push(v);
  }
};

let textList = [
  'С',
  'новым',
  'годом,',
  'друзья!'
];

let textIndex = 0,
  textGeneration = () => {
    setText(textList[textIndex]);
    setTimeout(() => {
      textIndex++;
      if (textIndex === textList.length) {
        textIndex = 0;
      }
      textGeneration();
    }, 1500);
  };

textGeneration();

for (let i = 0; i < vertexCount; i++) {
  dVertices.push(0);
}

render();

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

user347553 · Answer 9 · 2020-12-31T02:49:53+08:00

елочка

window.onload = () => {
  let C = document.querySelector('canvas'),
    $ = C.getContext('2d'),
    W = C.width = innerWidth,
    H = C.height = innerHeight

  function bg() {
    $.fillStyle = '#000'
    $.fillRect(0, 0, W, H)
  }

  function circle(x, y, r, color) {
    $.fillStyle = color
    $.beginPath()
    $.arc(x, y, r, 0, Math.PI * 2)
    $.fill()
  }

  function line(x1, y1, x2, y2, color) {
    $.strokeStyle = color
    $.beginPath()
    $.moveTo(x1, y1)
    $.lineTo(x2, y2)
    $.stroke()
  }

  let count = 30,
    x, y, z,
    radius = H / 3,
    r

  let mouseY = .8 * H

  let color,
    alpha,
    step = H / 50,
    jmax = 10,
    margin = .1 * H,
    imax = H - margin,
    angle

  function loop() {
    bg()

    line(W / 2, margin, W / 2, H, 'rgba(0,255,0,.5)')

    for (let j = 0; j < jmax; j++) {
      for (let i = margin; i < imax; i += step) {
        angle = (i / imax) * (count / (2 * Math.PI)) + (j / jmax) * 2 * Math.PI

        x = W / 2 + ((i - 10) / imax) * radius * Math.cos(angle)
        z = radius + ((i - 10) / imax) * radius * Math.sin(angle)
        y = i + 100 * Math.sin((mouseY - H / 2) / (H / 2))
        r = .0075 * z + .002 * y
        alpha = (z / (2 * radius)) + .2

        color = `rgba(255,255,255,${alpha/5})`
        line(W / 2, i, x, y, color)

        if (j % 2) {
          color = `rgba(255,155,0,${alpha})`
        } else {
          color = `rgba(0,155,255,${alpha})`
        }
        circle(x, y, r, color)
      }
    }

    count += Math.PI / 90

    requestAnimationFrame(loop)
  }

  window.addEventListener('mousemove', e => mouseY = e.clientY)

  loop()

  window.addEventListener('resize', () => {
    location.reload()
  })
}

<body style="margin: 0; background: #000; overflow: hidden">
  <canvas></canvas>
</body>

BlackStar1991 · Answer 10 · 2020-12-29T21:47:53+08:00

Всех с наступающим!

window.onload = function() {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    particlesOnScreen = 245,
    particlesArray = [],
    w,
    h;

  if (window.innerWidth > 1600) {
    particlesOnScreen = 350; /// for desktop
  }

  if (window.innerWidth < 680) {
    particlesOnScreen = 140; /// for mobile
  }

  function random(min, max) {
    return min + Math.random() * (max - min + 1);
  }

  function clientBrowseerViewbox() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }

  clientBrowseerViewbox();

  function createSnowFlakes(particlesOnScreen) {
    for (var i = 0; i < particlesOnScreen; i++) {
      particlesArray.push({
        x: Math.random() * w,
        y: Math.random() * h,
        opacity: Math.random(),
        speedX: random(-1, 1),
        speedy: random(3, 4),
        radius: random(0.2, 3)
      });
    }
  }

  function drawSnowFlakes() {
    for (var i = 0; i < particlesArray.length; i++) {
      var gradient = ctx.createRadialGradient(
        particlesArray[i].x,
        particlesArray[i].y,
        0,
        particlesArray[i].x,
        particlesArray[i].y,
        particlesArray[i].radius
      );
      gradient.addColorStop(
        0,
        "rgba(255,255,255," + particlesArray[i].opacity + " )"
      );
      gradient.addColorStop(
        0.7,
        "rgba(210,236,242," + particlesArray[i].opacity + " )"
      );
      gradient.addColorStop(
        1,
        "rgba(237,247,249," + particlesArray[i].opacity + " )"
      );

      ctx.beginPath();
      ctx.arc(
        particlesArray[i].x,
        particlesArray[i].y,
        particlesArray[i].radius,
        0,
        Math.PI * 2,
        false
      );

      ctx.fillStyle = gradient;
      ctx.fill();
    }
  }

  function moveSnowFlakes() {
    for (var i = 0; i < particlesArray.length; i++) {
      particlesArray[i].x += particlesArray[i].speedX;
      particlesArray[i].y += particlesArray[i].speedy;

      if (particlesArray[i].y > h) {
        particlesArray[i].x = Math.random() * w * 1.5;
        particlesArray[i].y = -50;
      }
    }
  }

  function updateSnowFall() {
    ctx.clearRect(0, 0, w, h);
    drawSnowFlakes();
    moveSnowFlakes();
  }

  setInterval(updateSnowFall, 50);

  function snowRun() {
    createSnowFlakes(particlesOnScreen);
  }

  snowRun();

  var addEvent = function(object, type, callback) {
    if (object == null || typeof object == "undefined") return;
    if (object.addEventListener) {
      object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
      object.attachEvent("on" + type, callback);
    } else {
      object["on" + type] = callback;
    }
  };

  addEvent(window, "resize", function(event) {
    clientBrowseerViewbox();
    snowRun();
  });
};

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #19242c;
  font-family: "Indie Flower", cursive;
  color: #fff;
  overflow: hidden;
}

h1 {
  display: block;
  position: absolute;
  left: 50%;
  text-align: center;
  transform: translate(-50%, 1vh);
  margin: 0;
  min-width: 300px;
  letter-spacing: 10px;
  font-size: 6vw;
}

img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 450px;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 40px;
    letter-spacing: 5px;
  }
}

@media only screen and (max-width: 380px) {
  h1 {
    font-size: 36px;
    letter-spacing: 3px;
  }
  img {
    max-width: 250px;
  }
}

@media only screen and (max-height: 460px) {
  h1 {
    font-size: 18px;
    top: 5px;
  }
  img {
    bottom: 0%;
    width: 56vh;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<h1>Happy New Year</h1>
<img src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/NewYear/cathing-snowflakes.png?raw=true" alt="cathing-snowflakes">
<canvas id="canvas"></canvas>
<audio autoplay loop>
	<source src="https://github.com/BlackStar1991/AudioSharing/blob/master/New%20Year/Train%20-%20Shake%20it%20up%2C%20it's%20Christmas%20time.mp3?raw=true" type="audio/mpeg"/>
	<source src="https://github.com/BlackStar1991/AudioSharing/blob/master/New%20Year/Train%20-%20Shake%20it%20up%2C%20it's%20Christmas%20time.ogg?raw=true"/>
                                                                                                                       
</audio>

PS Не ешьте желтый снег

2020年新年大赛！

在即将到来的 2020 年新年，我们为什么不安排完全相同的，甚至更好的假期呢！

恭喜Q中陌生人的获胜者！

尝试 2 号。

2019 年 12 月 28 日更新

Это не конкурсный ответ, а скорее призыв участвовать в конкурсе

===================================================================== Конкурс завершен 30.12.2019

Новогодний конкурс анимации открыт вновь! 30. 12.2019

Новогодний конкурс анимации открыт вновь! 05.01.2020

将 byte[] 转换为 int

从 sql 渲染 php 表并输出到网页

如何更改按钮单击的背景？

为什么选择...更新？

如何制作最简单的倒数计时器？[关闭]

写入文件时跳转到新行

C中指针的怪异

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

2020年新年大赛！

在即将到来的 2020 年新年，我们为什么不安排完全相同的，甚至更好的假期呢！

恭喜Q中陌生人的获胜者！

14 个回答

尝试 2 号。

2019 年 12 月 28 日更新

Это не конкурсный ответ, а скорее призыв участвовать в конкурсе

===================================================================== Конкурс завершен 30.12.2019

Новогодний конкурс анимации открыт вновь! 30. 12.2019

Новогодний конкурс анимации открыт вновь! 05.01.2020

相关问题