Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/christmas-animation.markdown

Last active December 28, 2018 12:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/ccf7ab6293cbdc33a9424ba5c21e2f78 to your computer and use it in GitHub Desktop.
Save stanwmusic/ccf7ab6293cbdc33a9424ba5c21e2f78 to your computer and use it in GitHub Desktop.
Download ZIP
Christmas animation
Raw
christmas-animation.markdown
Raw
index.html
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1366 768" xml:space="preserve">
<defs>
<clipPath id="compMask">
<rect width="1366" height="768"/>
</clipPath>
<filter id="dropShadow" x="-150%" y="-150%" width="350%" height="350%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="6" />
<feGaussianBlur in="offOut" stdDeviation="16" result="blur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.7" intercept="0" />
</feComponentTransfer>
<feComposite in="SourceGraphic" operator="over" />
</filter>
</defs>
<g clip-path="url(#compMask)">
<g id="background">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="683.655" y1="30.9746" x2="682.655" y2="738.9751">
<stop offset="0" style="stop-color:#282E54"/>
<stop offset="0.1929" style="stop-color:#2F345A"/>
<stop offset="0.4796" style="stop-color:#434669"/>
<stop offset="0.8232" style="stop-color:#646383"/>
<stop offset="1" style="stop-color:#787492"/>
</linearGradient>
<rect x="0" y="0" fill="url(#SVGID_1_)" width="1366" height="768"/>
</g>
<g id="stars">
<polygon fill="#D6B2A5" points="427.3,213.4 421.9,210.6 416.6,213.4 417.6,207.4 413.3,203.2 419.3,202.4 421.9,196.9
424.6,202.4 430.6,203.2 426.3,207.4"/>
<polygon fill="#D6B2A5" points="181.4,130 173.9,126 166.4,129.9 167.8,121.6 161.8,115.7 170.2,114.5 173.9,106.9 177.6,114.5
186,115.7 180,121.6"/>
<polygon fill="#D6B2A5" points="238.3,362.5 232.6,359.5 226.8,362.5 227.9,356.1 223.3,351.6 229.7,350.6 232.6,344.8
235.5,350.7 241.9,351.6 237.2,356.1"/>
<polygon fill="#D6B2A5" points="605.2,111.3 600.6,108.8 596,111.3 596.9,106.1 593.1,102.5 598.3,101.7 600.6,97.1 602.9,101.7
608.1,102.5 604.3,106.1"/>
<polygon fill="#D6B2A5" points="828.5,92.8 823.4,90.1 818.3,92.8 819.2,87 815.1,83 820.8,82.2 823.4,77 825.9,82.2 831.7,83
827.5,87.1"/>
<polygon fill="#D6B2A5" points="549.9,182 543,178.4 536,182 537.3,174.3 531.7,168.8 539.5,167.7 543,160.6 546.4,167.7
554.2,168.8 548.6,174.3"/>
<polygon fill="#D6B2A5" points="1012.2,227.9 1006.7,225 1001.2,227.9 1002.2,221.7 997.8,217.4 1003.9,216.5 1006.7,210.8
1009.5,216.5 1015.7,217.4 1011.2,221.7"/>
<polygon fill="#D6B2A5" points="944.5,157.8 938.8,154.8 933.1,157.8 934.2,151.5 929.6,147 936,146.1 938.8,140.3 941.7,146.1
948.1,147 943.4,151.5"/>
<polygon fill="#D6B2A5" points="829.3,173.4 824.2,170.7 819.2,173.4 820.2,167.8 816.1,163.8 821.7,163 824.3,157.9 826.8,163
832.4,163.8 828.3,167.8"/>
<polygon fill="#D6B2A5" points="707.2,220.1 703.4,218.1 699.6,220.1 700.3,215.9 697.3,212.9 701.5,212.3 703.4,208.4
705.3,212.3 709.6,212.9 706.5,215.9"/>
<polygon fill="#D6B2A5" points="507.8,287.7 504.5,285.9 501.1,287.7 501.8,284 499,281.3 502.8,280.8 504.5,277.3 506.2,280.8
509.9,281.3 507.2,284"/>
<polygon fill="#D6B2A5" points="331.5,284.8 326.2,282 320.8,284.8 321.9,278.9 317.6,274.7 323.5,273.8 326.2,268.4 328.8,273.8
334.8,274.7 330.5,278.9"/>
<polygon fill="#D6B2A5" points="229.2,208.5 224,205.8 218.9,208.5 219.9,202.8 215.7,198.7 221.5,197.9 224.1,192.6 226.6,197.9
232.4,198.7 228.2,202.8"/>
<polygon fill="#D6B2A5" points="1114.2,296.7 1109,294 1103.9,296.7 1104.9,290.9 1100.7,286.9 1106.4,286 1109,280.8 1111.6,286
1117.4,286.9 1113.2,290.9"/>
<polygon fill="#D6B2A5" points="113,376.6 105.6,372.6 98.1,376.5 99.6,368.2 93.5,362.4 101.9,361.2 105.6,353.6 109.3,361.2
117.7,362.4 111.6,368.3"/>
<polygon fill="#D6B2A5" points="224.6,263.3 221.1,261.5 217.6,263.3 218.3,259.5 215.5,256.8 219.4,256.2 221.1,252.7
222.8,256.2 226.7,256.8 223.9,259.5"/>
<polygon fill="#D6B2A5" points="356.2,383 350.8,380.2 345.4,383 346.4,377 342.1,372.8 348.1,371.9 350.8,366.4 353.5,371.9
359.5,372.8 355.1,377"/>
<polygon fill="#D6B2A5" points="547.2,273.2 545.6,272.4 544,273.2 544.3,271.5 543,270.2 544.8,269.9 545.6,268.3 546.4,269.9
548.2,270.2 546.9,271.5"/>
<polygon fill="#D6B2A5" points="733,387.5 728.9,385.4 724.9,387.5 725.7,383.1 722.5,379.9 726.9,379.2 729,375.2 731,379.3
735.4,379.9 732.2,383.1"/>
<polygon fill="#D6B2A5" points="842.6,451.3 840.1,450 837.6,451.3 838.1,448.6 836.1,446.6 838.9,446.2 840.1,443.7 841.3,446.2
844.1,446.6 842.1,448.6"/>
<polygon fill="#D6B2A5" points="783.1,530.5 780.6,529.2 778.1,530.5 778.6,527.8 776.6,525.8 779.4,525.4 780.6,522.9
781.8,525.4 784.6,525.8 782.6,527.8"/>
<polygon fill="#D6B2A5" points="969.6,432.8 965.1,430.4 960.5,432.7 961.4,427.7 957.7,424.1 962.8,423.4 965.1,418.7
967.4,423.4 972.5,424.1 968.8,427.7"/>
<polygon fill="#D6B2A5" points="1009.2,385.3 1006.1,383.7 1003,385.3 1003.6,381.8 1001.1,379.4 1004.5,378.9 1006.1,375.7
1007.6,378.9 1011.1,379.4 1008.6,381.8"/>
<polygon fill="#D6B2A5" points="597.1,446.5 594,444.8 590.9,446.5 591.5,443 589,440.6 592.4,440.1 594,436.9 595.5,440.1
599,440.6 596.5,443"/>
<polygon fill="#D6B2A5" points="1128.8,390.1 1122.4,386.8 1116,390.1 1117.2,383 1112.1,378 1119.2,376.9 1122.4,370.5
1125.6,376.9 1132.8,378 1127.6,383"/>
<polygon fill="#D6B2A5" points="1310.1,426.1 1302.1,421.9 1294.2,426.1 1295.7,417.2 1289.3,410.9 1298.2,409.7 1302.2,401.6
1306.1,409.7 1315,411 1308.6,417.2"/>
<polygon fill="#D6B2A5" points="1306.7,66.4 1300.8,63.3 1295,66.3 1296.1,59.8 1291.4,55.2 1297.9,54.3 1300.8,48.4 1303.8,54.3
1310.3,55.3 1305.6,59.9"/>
<polygon fill="#D6B2A5" points="1044.2,119.4 1040.7,117.5 1037.3,119.4 1037.9,115.5 1035.1,112.8 1039,112.2 1040.7,108.7
1042.5,112.2 1046.3,112.8 1043.5,115.5"/>
<polygon fill="#D6B2A5" points="673.7,374.9 668,371.9 662.3,374.9 663.4,368.5 658.8,364 665.1,363.1 668,357.3 670.8,363.1
677.2,364 672.6,368.5"/>
<polygon fill="#D6B2A5" points="711.5,136.2 705.5,133.1 699.6,136.2 700.7,129.6 695.9,124.9 702.6,123.9 705.6,117.8
708.5,123.9 715.2,124.9 710.4,129.6"/>
<polygon fill="#D6B2A5" points="651.7,265.3 645.7,262.2 639.7,265.3 640.9,258.6 636,253.9 642.7,252.9 645.7,246.8 648.7,252.9
655.4,253.9 650.6,258.6"/>
<polygon fill="#D6B2A5" points="439.6,109 432.7,105.3 425.8,109 427.1,101.3 421.6,95.8 429.3,94.7 432.7,87.7 436.2,94.7
443.9,95.8 438.3,101.3"/>
<polygon fill="#D6B2A5" points="318,159.2 311.7,155.8 305.3,159.2 306.5,152.1 301.4,147 308.5,146 311.7,139.6 314.9,146
322,147.1 316.8,152.1"/>
<polygon fill="#D6B2A5" points="83,194.8 77.9,192.1 72.8,194.8 73.8,189.1 69.7,185.1 75.3,184.3 77.9,179.1 80.4,184.3
86.1,185.1 82,189.1"/>
<polygon fill="#D6B2A5" points="579.1,328.9 575.2,326.8 571.2,328.9 572,324.5 568.8,321.3 573.2,320.7 575.2,316.7 577.1,320.7
581.5,321.3 578.4,324.5"/>
<polygon fill="#D6B2A5" points="550,546.6 546,544.6 542.1,546.6 542.8,542.2 539.6,539.1 544,538.5 546,534.5 548,538.5
552.4,539.1 549.2,542.2"/>
<polygon fill="#D6B2A5" points="553.2,404.9 547.3,401.8 541.4,404.9 542.5,398.3 537.7,393.7 544.3,392.7 547.3,386.7
550.2,392.7 556.8,393.7 552,398.3"/>
<polygon fill="#D6B2A5" points="452.3,334.7 447,331.9 441.7,334.7 442.7,328.8 438.5,324.6 444.4,323.8 447,318.4 449.6,323.8
455.5,324.6 451.3,328.8"/>
<polygon fill="#D6B2A5" points="141.7,289.3 136.4,286.5 131.2,289.3 132.2,283.4 127.9,279.3 133.8,278.4 136.5,273.1
139.1,278.4 145,279.3 140.7,283.4"/>
<polygon fill="#D6B2A5" points="443,427.8 439.6,426.1 436.3,427.8 436.9,424.1 434.2,421.5 437.9,420.9 439.6,417.5 441.3,420.9
445,421.5 442.3,424.1"/>
<polygon fill="#D6B2A5" points="519.3,493.3 515.9,491.5 512.6,493.3 513.2,489.6 510.5,486.9 514.3,486.4 516,483 517.6,486.4
521.4,486.9 518.7,489.6"/>
<polygon fill="#D6B2A5" points="945.3,300.5 940.6,298 935.9,300.5 936.8,295.3 933.1,291.6 938.3,290.8 940.6,286.1 943,290.8
948.2,291.6 944.4,295.3"/>
<polygon fill="#D6B2A5" points="1221.9,334.2 1216.4,331.3 1210.9,334.2 1211.9,328.1 1207.5,323.7 1213.6,322.8 1216.4,317.3
1219.1,322.9 1225.3,323.8 1220.8,328.1"/>
<polygon fill="#D6B2A5" points="1038.9,300.8 1036.1,299.4 1033.3,300.8 1033.9,297.7 1031.6,295.5 1034.7,295.1 1036.1,292.2
1037.5,295.1 1040.6,295.5 1038.4,297.7"/>
<polygon fill="#D6B2A5" points="447.8,497.8 445,496.3 442.2,497.8 442.8,494.7 440.5,492.5 443.6,492 445,489.2 446.4,492
449.5,492.5 447.3,494.7"/>
<polygon fill="#D6B2A5" points="901.2,368 897.7,366.1 894.1,368 894.8,364 891.9,361.2 895.9,360.7 897.7,357 899.4,360.7
903.4,361.2 900.5,364.1"/>
<polygon fill="#D6B2A5" points="828.3,306.1 822.1,302.8 815.8,306.1 817,299.2 812,294.2 818.9,293.2 822.1,286.9 825.2,293.2
832.2,294.3 827.1,299.2"/>
<polygon fill="#D6B2A5" points="771,330.4 768.2,329 765.4,330.4 765.9,327.3 763.7,325.1 766.8,324.7 768.2,321.9 769.6,324.7
772.7,325.1 770.4,327.3"/>
<polygon fill="#D6B2A5" points="758.8,455.8 756.1,454.4 753.3,455.8 753.8,452.7 751.6,450.5 754.7,450.1 756.1,447.3
757.5,450.1 760.6,450.6 758.3,452.7"/>
</g>
<g id="moon">
<g opacity="0.15">
<circle fill="#FFDD91" cx="1186.5" cy="144.5" r="115.5"/>
</g>
<g opacity="0.2">
<circle fill="#FFDD91" cx="1186.5" cy="144.5" r="99.5"/>
</g>
<circle fill="#FFDD91" cx="1186.5" cy="144.5" r="78.5"/>
</g>
<g id="TreeGroup2">
<polygon fill="#7C6B76" points="331.8,453.4 318.4,440 322.4,438.2 311.1,425.7 314.2,424.3 299.4,408.8 299.4,408.8 300.6,430.2
303.8,428.9 305.2,445.7 309.2,444 309.7,462.9 319.6,458.6 323.9,468.5 326.2,467.5 321.9,457.6"/>
<polygon fill="#7C6B76" points="358.1,448.2 350.8,430.7 355.2,430.6 349.6,414.7 353,414.6 345.3,394.7 345.3,394.7 338.2,414.9
341.6,414.8 336.4,430.9 340.8,430.9 334,448.6 344.8,448.4 345,459.1 347.5,459.1 347.3,448.4"/>
<polygon fill="#7C6B76" points="381.6,421.7 384.9,422.4 381.8,401.2 381.8,401.2 370.4,419.3 373.7,420 365.1,434.6 369.3,435.5
358.8,451.2 369.3,453.5 367.1,464 369.5,464.5 371.8,454 382.3,456.3 379.2,437.6 383.5,438.5"/>
</g>
<g id="TreeGroup1">
<polygon fill="#7C6B76" points="32.6,492.3 24.3,475.3 28.6,475 22.1,459.4 25.4,459.1 16.6,439.7 16.6,439.7 10.9,460.3
14.3,460 10.2,476.4 14.5,476.1 9,494.2 19.5,493.3 20.4,504 22.8,503.8 22,493.2"/>
<polygon fill="#7C6B76" points="69.3,476.3 56.2,461.5 61.6,460.1 50.9,446.3 55.1,445.3 40.8,428.2 40.8,428.2 36.8,450.1
41,449 38.4,466.2 43.8,464.8 39.6,484.1 52.9,480.6 55.6,491 58.7,490.2 56,479.8"/>
<polygon fill="#7C6B76" points="99,458.4 87.4,442.9 92.2,441.8 82.8,427.5 86.5,426.7 74,408.9 74,408.9 70.3,430.3 74,429.5
71.6,446.5 76.4,445.4 72.5,464.3 84.3,461.6 86.7,472.1 89.5,471.5 87.1,461"/>
<polygon fill="#7C6B76" points="140.3,450.1 128.2,432.5 135.8,432.5 126.5,416.5 132.4,416.5 119.6,396.4 119.6,396.4
106.7,416.5 112.6,416.5 103.3,432.5 110.8,432.5 98.7,450.1 117.4,450.1 117.4,460.8 121.7,460.8 121.7,450.1"/>
<polygon fill="#7C6B76" points="167,448.7 161,430.3 165.9,430.8 161.6,414.3 165.4,414.7 159.2,393.8 159.2,393.8 148.8,412.9
152.6,413.3 144.8,428.6 149.7,429.1 140,445.8 152.1,447.1 150.9,457.7 153.8,458 154.9,447.4"/>
<g>
<polygon fill="#7C6B76" points="199.7,461.9 194.7,442.3 200.8,443.9 197.6,426.5 202.3,427.7 197.4,405.5 197.4,405.6
181.9,422.2 186.6,423.4 174.9,436.9 180.9,438.5 166.6,452.8 181.4,456.9 178.6,467.2 182.1,468.2 184.9,457.8"/>
<polygon fill="#7C6B76" points="217.7,477.5 215.8,460.8 220.1,462.3 219.3,447.5 222.6,448.7 220.9,429.9 220.9,429.9
208.1,443.7 211.4,444.9 201.7,456 205.9,457.5 194.2,469.4 205.9,473.4 205.9,473.4"/>
<polygon fill="#7C6B76" points="237.7,481.5 238.4,467.5 241.1,468.6 241.5,450.8 241.5,450.8 229.2,463.7 232,464.8
222.6,475.3 226.1,476.7 215,487.9 224.6,491.8 224.6,491.8 234.2,495.8 234.1,480"/>
<polygon fill="#7C6B76" points="265.2,457.4 251.7,474 254.8,475.1 244.5,488.4 248.4,489.8 236.1,504.1 247.1,508 247.1,508
258,512 257.6,493.1 261.6,494.5 262.1,477.7 265.2,478.8 265.2,457.4"/>
</g>
<polygon fill="#7C6B76" points="308.4,511.3 297.4,494.3 303.7,493.9 295.1,478.4 299.9,478.1 288.1,458.6 288.1,458.7
278.8,479.4 283.6,479.1 276.9,495.5 283.1,495.1 274.2,513.3 289.5,512.4 290.2,523.1 293.8,522.9 293.1,512.2"/>
</g>
<g id="GroundBack">
<path fill="#7C6B76" d="M944.5,779.1l437.3-15.6l-21.9-38.1c0,0-239.2-223.7-246.5-230.8c-38.6-37.5-66.2-1.2-82.2,34.4
c-9.7,21.5-15.7,44.5-18.6,67.9C1006.6,646.1,987.3,772.7,944.5,779.1"/>
<path fill="#7C6B76" d="M1093.5,773l437.3-15.6l-21.9-38.1c0,0-239.2-223.7-246.5-230.8c-38.6-37.5-66.2-1.2-82.2,34.4
c-9.7,21.5-15.7,44.5-18.6,67.9C1155.6,640.1,1136.3,766.7,1093.5,773"/>
<path fill="#7C6B76" d="M488.1,752L22.3,741.9l50.5-43.7c0,0,239.2-223.7,246.5-230.8c38.6-37.5,66.2-1.2,82.2,34.4
c9.7,21.5,15.7,44.5,18.6,67.9C426,619,445.3,745.7,488.1,752"/>
<path fill="#7C6B76" d="M1017.8,567.2c0,0-40.1-94.5-108.8-86.5S792.2,722.2,709.8,733.6l402.9,2.4L1017.8,567.2z"/>
<path fill="#7C6B76" d="M267.9,517c0,0-83.9-104.6-179.2-64.7S-28,519.9-28,519.9l8.5,202l300.2-17.8L267.9,517z"/>
<path fill="#7C6B76" d="M597.9,697.7c0,0-93.2-162.2-137.3-160.8c-10.5,0.3-25.5,6.7-42.2,16.1c-53.7,30.3-125.7,92.7-125.7,92.7
S578,764.6,597.9,697.7z"/>
<path fill="#FFFFFF" d="M309.4,477.8c0,0,7,12.9,29.6-0.5c15-8.9,21.5-0.8,24.1,5.7c1.8,4.4,5.5,7.7,10,9.2
c9.2,3,22.8,6.5,23.5,0.8c1.1-8.6-28-48-48.5-42C327.8,456.8,309.4,477.8,309.4,477.8z"/>
<path fill="#FFFFFF" d="M1027.7,537.1c0,0,27.7,3,33.5-10c5.8-13,20.9-5.1,20.9-5.1s18.4,9.6,26,0.4c7.5-9.3,26.1,17.7,35.3,16.7
s14.7-2.3,14.7-2.3s-48.6-62.8-80.7-57.9C1046,483.7,1027.7,537.1,1027.7,537.1z"/>
<path fill="#FFFFFF" d="M1011.4,554.6c0,0-16-28.9-28.1-43c-28.8-35.7-69.7-31.3-69.7-31.3c-41.7,0.2-77.4,82.4-77.4,82.4
s8.2,13.1,26,3.5c10.8-5.9,22.1-7.2,29.2-7.3c4.3-0.1,8.3,2.4,10.3,6.2c5.5,10.8,11.6,15.9,17.1,18c7.8,3.1,16.5-0.9,19.6-8.7
c3.6-9,11.2-23.8,23.8-27.8c0,0,0,0,0,0c1.8-0.6,3.6-0.6,5.4,0C977.2,549.8,1005.3,558.7,1011.4,554.6z"/>
<path fill="#FFFFFF" d="M1302.4,531.7c-0.8,12.5,23.8,33.7-5.5,39.2c0,0-43.9-15.8-49-29c-2.7-7.1-6.3-7.6-9.1-6.5
c-2.5,1-4.2,3.2-4.7,5.8c-1.2,6.2-5,21-14.3,23.7c-8.5,2.5-15.3-11.5-18.5-19.8c-0.7-1.9-3.4-2-4.3-0.2
c-2.4,4.8-6.9,11.6-15.1,15.9c-13.9,7.2-16.8,2.5-16.8,2.5s22.7-83.8,56-92.1c29.2-7.3,68.8,39.5,77.9,51
C1300.3,523.8,1302.5,529.6,1302.4,531.7z"/>
<path fill="#FFFFFF" d="M417.5,553.6c0,0,75.7,16,81.8,6.7c0,0-23.4-24.4-37.5-23.4C447.7,537.9,432.8,545.1,417.5,553.6z"/>
</g>
<g id="GroundFront">
<path fill="#877B83" d="M579.1,707.5c0,0-77.4-141.6-130.9-141c-31,0.4-114.2,91.7-114.2,91.7S538.4,758.1,579.1,707.5z"/>
<path fill="#877B83" d="M344.3,655.1c0,0-70.8-13.4-97.1-13.8l1,9.6l92.8,14.2L344.3,655.1z"/>
<path fill="#877B83" d="M256.2,647.4c0,0-71.2-137.3-124.1-135.1c0,0-30.6-0.9-133.3,113.2C-54.5,706.7,256.2,647.4,256.2,647.4z"/>
<path fill="#877B83" d="M568.5,703.9c0,0,125.5-26.9,211.5,11.9l-7.2,14c0,0-198.2-18.4-204.3-10.9
C562.4,726.4,568.5,703.9,568.5,703.9z"/>
<path fill="#877B83" d="M1376.8,685.3l-1.3-12.7l-10.5-4.8c-48.1-49.7-168.7-30.2-168.7-30.2s0,0,0,0.1
c-54.7-57.7-90.1-88.5-111.2-99.3c-8.7-4.5-22.7-4.2-31.3,0.4c-51.8,27.6-100.4,116-110.7,135.5c-19.2-17.1-56.9-48.8-72-48.7
c-47.9,0.3-103.9,104-103.9,104c177.8,20.2,187.5-44.6,187.5-44.6s-0.9-0.8-2.5-2.3c53.9,10,252.8-35.7,252.8-35.7
c-0.1-0.1-0.2-0.2-0.2-0.3C1242.7,652,1376.8,685.3,1376.8,685.3z"/>
<path fill="#B093A3" d="M-106.8,767.8c0,0,180.9-276.8,753.6,0c0,0,438.6-133.4,616.6-126.1c96.5,4,126.5,60.4,126.5,60.4
c16.3,10,90.2,67.6,90.2,67.6l-1576-1.9"/>
<path fill="#B093A3" d="M430.3,766.2c0,0,178.2-112.6,347-43.8s159.4,114.1,159.4,114.1L419.4,824L430.3,766.2z"/>
<path fill="#B093A3" d="M738.4,780.2c0,0,92.2-170.4,140.7-150.1s157.9,153.2,186,167.3C1065.2,797.4,752.5,828.6,738.4,780.2z"/>
<path fill="#B093A3" d="M937.2,691.1c0,0,92.2-170.4,140.7-150.1s157.9,153.2,186,167.3C1263.9,708.3,951.2,739.6,937.2,691.1z"/>
<path fill="#B093A3" d="M264.6,670.7c0,0-92.2-170.4-140.7-150.1C75.4,540.9-34,673.8-62.2,687.9
C-62.2,687.9,250.5,719.1,264.6,670.7z"/>
<path fill="#B093A3" d="M580.9,724c0,0-92.2-170.4-140.7-150.1s-157.9,153.2-186,167.3C254.2,741.2,566.8,772.4,580.9,724z"/>
<path fill="#FFFFFF" d="M76.4,555.1c0,0,31.5,1.3,40.8-12.9c9.3-14.2,13.8,3.6,13.8,3.6s4,15.5,13.8,16.4c6.3,0.6,9.1-7,10.3-12.5
c0.5-2.5,0.4-5-0.1-7.5c-0.2-0.9-0.2-2,0.4-3.1c0.7-1.6,2.9-1.9,4.1-0.6c5.4,5.8,21.1,22,26.6,22.4l5.3,0.4
c0,0-38.6-47.5-60.8-42.6S76.4,555.1,76.4,555.1z"/>
<path fill="#FFFFFF" d="M1121.8,571.4c3.1,2.5,2.9,7.3,0.9,10.8c-3.7,6.5-8.7,17.7-6.1,26.1c1.9,6.1-7.2,10.7-17.1,13.8
c-9.6,3-19.8-1.8-24.1-10.9c-2.4-5.1-7.2-8.8-17-6.1c-22.8,6.3-27.5,35.4-45.6,19.7c-18.1-15.7-3.1-42.5-3.1-42.5
s38-48.4,63.7-42.8C1089.7,543.1,1094.9,549.7,1121.8,571.4z"/>
<path fill="#FFFFFF" d="M824.4,656.6c0,0,20.3,22,35,9.7c0.5-1.4,1.9-15.1,22.2-6.6c20.3,8.5,31-6.9,31-6.9s-29.1-27.6-45.6-24.3
C866.9,628.5,845.7,631.6,824.4,656.6z"/>
<path fill="#FFFFFF" d="M401.4,600.9c0,0,23.3,23,37.9,10.7c0.5-1.4,1.9-15.1,22.2-6.6c20.3,8.5,31-6.9,31-6.9s-27-30.7-46-26
C446.5,572,424.1,576.4,401.4,600.9z"/>
</g>
<g id="snowman">
<g id="left_arm">
<path fill="#A34D3A" d="M757.6,567.1L757.6,567.1c1.4,1.9,1.1,4.5-0.8,5.9l-69.7,53.1c-1.9,1.4-4.5,1.1-5.9-0.8l0,0
c-1.4-1.9-1.1-4.5,0.8-5.9l69.7-53.1C753.5,564.9,756.2,565.3,757.6,567.1z"/>
<path fill="#A34D3A" d="M737.2,553.5L737.2,553.5c1.6-0.1,3,1,3.1,2.6l2.2,23.7c0.1,1.6-1,3-2.6,3.1l0,0c-1.6,0.1-3-1-3.1-2.6
l-2.2-23.7C734.4,555.1,735.6,553.7,737.2,553.5z"/>
<path fill="#A34D3A" d="M765.8,590.5L765.8,590.5c0.6-1.5-0.1-3.1-1.6-3.7l-22.1-9c-1.5-0.6-3.1,0.1-3.7,1.6l0,0
c-0.6,1.5,0.1,3.1,1.6,3.7l22.1,9C763.5,592.7,765.2,592,765.8,590.5z"/>
</g>
<g id="right_arm">
<path fill="#A34D3A" d="M565.1,569.5L565.1,569.5c1.4-1.9,4.1-2.2,5.9-0.8l69.6,53.1c1.9,1.4,2.2,4.1,0.8,5.9l0,0
c-1.4,1.9-4.1,2.2-5.9,0.8l-69.6-53.1C564.1,574,563.7,571.3,565.1,569.5z"/>
<path fill="#A34D3A" d="M557.5,592.8L557.5,592.8c-0.6-1.5,0.2-3.1,1.7-3.7l22.3-8.4c1.5-0.6,3.1,0.2,3.7,1.7l0,0
c0.6,1.5-0.2,3.1-1.7,3.7l-22.3,8.4C559.7,595,558,594.2,557.5,592.8z"/>
<path fill="#A34D3A" d="M585.5,555.4L585.5,555.4c-1.6-0.2-3,0.9-3.2,2.5l-2.8,23.7c-0.2,1.6,0.9,3,2.5,3.2l0,0
c1.6,0.2,3-0.9,3.2-2.5l2.8-23.7C588.2,557,587.1,555.6,585.5,555.4z"/>
</g>
<path id="bottom" fill="#FCFCFC" d="M734.6,634c0,29.8-17.4,55.6-42.6,67.7h0l-65,0h0c-25.2-12.1-42.5-37.9-42.5-67.7
c0-13.2,3.4-25.6,9.5-36.4c0.1-0.2,0.2-0.4,0.3-0.6c1.3-2.3,2.8-4.6,4.3-6.8c0.1-0.1,0.2-0.2,0.3-0.4c5.4-7.5,12.2-13.9,19.9-18.9
l5.3-8.4c0.2,0.1,1.8,0.8,4.5,1.8c0.2,0.1,0.5,0.2,0.7,0.3c0.5,0.2,1,0.4,1.5,0.6c7,2.9,17.9,6.2,30.5,5.6
c16.8-0.5,33-7.7,34.1-8.2c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0.1,0.1c0,0,0.1,0.1,0.1,0.2c0.1,0.1,0.1,0.1,0.2,0.3
c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.3,0.3,0.4c0.1,0.2,0.2,0.3,0.3,0.5c0,0,0,0,0,0c0.1,0.2,0.2,0.4,0.4,0.6
c0.3,0.4,0.6,0.9,0.9,1.4c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.5c0.8,1.3,1.6,2.5,2,3.3
c0,0,0,0,0,0c7.2,4.7,13.6,10.6,18.8,17.5c0.4,0.5,0.8,1,1.1,1.5c1.3,1.8,2.5,3.7,3.7,5.6c0.3,0.5,0.6,1,0.9,1.5
C731.1,608.1,734.6,620.6,734.6,634z"/>
<g id="bottom_buttons">
<circle fill="#282828" cx="659.7" cy="607.2" r="6.4"/>
<circle fill="#282828" cx="659.7" cy="632.8" r="6.4"/>
<circle fill="#282828" cx="659.7" cy="660.5" r="6.4"/>
</g>
<g id="face">
<circle fill="#FCFCFC" cx="659.7" cy="515.4" r="59.2"/>
<circle fill="#282828" cx="635.8" cy="544.6" r="2.9"/>
<circle fill="#282828" cx="641.8" cy="548.4" r="2.9"/>
<circle fill="#282828" cx="648.5" cy="551.5" r="2.9"/>
<circle fill="#282828" cx="655.9" cy="552.8" r="2.9"/>
<circle fill="#282828" cx="663.6" cy="552.4" r="2.9"/>
<circle fill="#282828" cx="670.7" cy="550.2" r="2.9"/>
<circle fill="#282828" cx="676.9" cy="547" r="2.9"/>
<ellipse transform="matrix(0.9923 -0.1239 0.1239 0.9923 -61.9512 88.7258)" fill="#282828" cx="682.6" cy="542.6" rx="2.9" ry="2.9"/>
<circle fill="#282828" cx="634.9" cy="498.4" r="7.5"/>
<circle fill="#282828" cx="680.3" cy="498.4" r="7.5"/>
</g>
<path id="nose" fill="#FF5E33" d="M641.6,525.8l14.4-9.5c0.8-0.4,2.8,0.2,3.7,2l0.5,1.1c0.9,1.8,0.1,3.9-0.7,4.3l-16.2,5.5
c-0.8,0.3-4.9,2-5.5,0.6l0,0C637.1,528.4,640.9,526.3,641.6,525.8z"/>
<g id="ears">
<path fill="none" stroke="#AD2A47" stroke-width="5.5926" stroke-miterlimit="10" d="M719.9,515.6c0-34-27.2-61.5-60.9-61.5
s-60.9,27.5-60.9,61.5"/>
<ellipse fill="#AD2A47" cx="601" cy="513.7" rx="13" ry="18.3"/>
<ellipse fill="#AD2A47" cx="717.8" cy="513.7" rx="13" ry="18.3"/>
</g>
<g id="scarf">
<g>
<path fill="#AD2A47" d="M678,604c0,0,3.9,19.1,6,18.4c1.6-0.5-0.7-5.9-0.7-5.9s-0.7-1.4,0.5-1.7s1.5,1.2,1.5,1.2s1.2,6,2.7,5.3
c1.2-0.5,0-4.6-0.5-6.1c-0.2-0.6-0.1-1.2,0.4-1.5c0.3-0.1,0.6-0.2,0.6-0.2c0.9-0.1,1.2,3,1.6,4.6c0.5,1.9,1.1,2.2,1.9,2
c0.8-0.3-0.1-4.2-0.7-6c-0.3-0.8,0-1.1,0.8-1.2c0.1,0,0.2,0,0.3,0c1,0.2,1.8,5.4,1.8,5.4s0.2,1,1.2,0.8C697,619,694,609,694,609
L678,604z"/>
</g>
<path fill="#AD2A47" d="M685,578.1c4.6,11.3,9.7,34,9.7,34l-14,2.8c-1-6.1-7-24.8-10.1-34.1c-0.2-0.7-0.9-1.1-1.6-1
c-3.8,0.5-7.6,0.9-11.3,0.9c-19.6,0-39-9.7-39-9.7l5.3-8.4c0,0,0,0,0,0c0.2,0.1,1.8,0.8,4.5,1.8c0.2,0.1,0.5,0.2,0.7,0.3
c0.5,0.2,1,0.4,1.5,0.6c6.7,2.5,17.8,6,30.5,5.6c17.2-0.6,33.8-8.1,34.1-8.2c0,0,0,0,0.1,0.1c0,0,0.1,0.1,0.1,0.2
c0.1,0.1,0.1,0.1,0.2,0.3c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.3,0.3,0.4c0.1,0.2,0.2,0.3,0.3,0.5c0,0,0,0,0,0
c0.1,0.2,0.2,0.4,0.4,0.6c0.3,0.4,0.6,0.9,0.9,1.4c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.5
c0.8,1.3,1.6,2.5,2,3.3c-1.1,0.5-7.2,3-14.6,5.1C685.1,576.4,684.7,577.3,685,578.1z"/>
</g>
</g>
<g id="snow3">
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 179.3084 473.8245)" fill="#FFFFFF" cx="661.6" cy="20.5" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="246.2" cy="29.1" r="9.5"/>
<circle fill="#FFFFFF" cx="927.6" cy="10.6" r="8.4"/>
<circle fill="#FFFFFF" cx="1048.4" cy="10.6" r="6.6"/>
<circle fill="#FFFFFF" cx="1038.7" cy="56.7" r="5.7"/>
<circle fill="#FFFFFF" cx="963.7" cy="17.6" r="6.8"/>
<circle fill="#FFFFFF" cx="910.4" cy="54.7" r="8.3"/>
<circle fill="#FFFFFF" cx="89.1" cy="36.2" r="9.2"/>
<circle fill="#FFFFFF" cx="546.3" cy="49.2" r="8.4"/>
<circle fill="#FFFFFF" cx="174.5" cy="66.5" r="8.4"/>
<circle fill="#FFFFFF" cx="765.8" cy="29.8" r="5.1"/>
<circle fill="#FFFFFF" cx="611.9" cy="30.3" r="5.1"/>
<circle fill="#FFFFFF" cx="652" cy="60.1" r="5.1"/>
<circle fill="#FFFFFF" cx="852" cy="64.2" r="5.1"/>
<circle fill="#FFFFFF" cx="882.6" cy="29.3" r="5.1"/>
<circle fill="#FFFFFF" cx="367.7" cy="8.9" r="5.1"/>
<ellipse transform="matrix(0.9773 -0.2118 0.2118 0.9773 -7.6465 48.7878)" fill="#FFFFFF" cx="223.9" cy="60.1" rx="5.1" ry="5.1"/>
<circle fill="#FFFFFF" cx="421.3" cy="76.2" r="5.1"/>
<circle fill="#FFFFFF" cx="166.2" cy="32.7" r="5.1"/>
<circle fill="#FFFFFF" cx="436.9" cy="31.7" r="5.1"/>
<circle fill="#FFFFFF" cx="271.5" cy="48.6" r="5.1"/>
<circle fill="#FFFFFF" cx="379.8" cy="41.8" r="8.1"/>
<circle fill="#FFFFFF" cx="307.5" cy="55.1" r="8.1"/>
<circle fill="#FFFFFF" cx="410.7" cy="17.7" r="8.1"/>
<circle fill="#FFFFFF" cx="714.8" cy="17.8" r="8.1"/>
<circle fill="#FFFFFF" cx="1256.2" cy="37.2" r="8.1"/>
<circle fill="#FFFFFF" cx="805.7" cy="41.6" r="8.1"/>
<circle fill="#FFFFFF" cx="846.3" cy="11.5" r="6.9"/>
<circle fill="#FFFFFF" cx="576" cy="19.6" r="9.2"/>
<circle fill="#FFFFFF" cx="307.3" cy="19.2" r="7.4"/>
<circle fill="#FFFFFF" cx="466.9" cy="61.4" r="7.3"/>
<circle fill="#FFFFFF" cx="196.6" cy="31.4" r="7.5"/>
<circle fill="#FFFFFF" cx="126" cy="44.1" r="9.2"/>
<circle fill="#FFFFFF" cx="495.5" cy="15.3" r="7.6"/>
<circle fill="#FFFFFF" cx="686.7" cy="52.5" r="6.6"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 363.0699 910.8566)" fill="#FFFFFF" cx="1281" cy="17.2" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="1168.7" cy="35.9" r="8.4"/>
<circle fill="#FFFFFF" cx="1219.3" cy="35" r="5.1"/>
<circle fill="#FFFFFF" cx="1271.4" cy="56.8" r="5.1"/>
<circle fill="#FFFFFF" cx="1314.6" cy="15.5" r="6.7"/>
<circle fill="#FFFFFF" cx="1195.4" cy="16.3" r="9.2"/>
<circle fill="#FFFFFF" cx="1091.5" cy="52.4" r="8"/>
<circle fill="#FFFFFF" cx="1114.9" cy="20" r="6.6"/>
<circle fill="#FFFFFF" cx="1306.2" cy="49.2" r="7.3"/>
<circle fill="#FFFFFF" cx="66" cy="59.7" r="6.7"/>
<circle fill="#FFFFFF" cx="992.5" cy="42.3" r="5.7"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 180.153 496.8877)" fill="#FFFFFF" cx="689.9" cy="31" rx="3.3" ry="3.3"/>
<circle fill="#FFFFFF" cx="888.5" cy="12.6" r="7.2"/>
<circle fill="#FFFFFF" cx="556.3" cy="38" r="4.2"/>
<circle fill="#FFFFFF" cx="495.7" cy="38" r="5.8"/>
<circle fill="#FFFFFF" cx="509.1" cy="65.4" r="5.8"/>
<circle fill="#FFFFFF" cx="538.2" cy="27.5" r="5.8"/>
<circle fill="#FFFFFF" cx="565" cy="60.2" r="5.8"/>
<circle fill="#FFFFFF" cx="977.3" cy="50.9" r="5.8"/>
<circle fill="#FFFFFF" cx="747.8" cy="57.4" r="4.2"/>
<circle fill="#FFFFFF" cx="934.4" cy="66.1" r="4.2"/>
<circle fill="#FFFFFF" cx="637.6" cy="47.7" r="2.6"/>
<circle fill="#FFFFFF" cx="714.8" cy="47.9" r="2.6"/>
<circle fill="#FFFFFF" cx="694.7" cy="62.9" r="2.6"/>
<circle fill="#FFFFFF" cx="594.5" cy="59.6" r="2.6"/>
<circle fill="#FFFFFF" cx="578.9" cy="47.4" r="2.6"/>
<ellipse transform="matrix(0.9961 -8.775589e-02 8.775589e-02 0.9961 0.2857 73.8416)" fill="#FFFFFF" cx="840" cy="33.7" rx="2.6" ry="2.6"/>
<ellipse transform="matrix(0.2118 -0.9773 0.9773 0.2118 648.6928 944.072)" fill="#FFFFFF" cx="909.6" cy="69.9" rx="2.6" ry="2.6"/>
<circle fill="#FFFFFF" cx="812" cy="69" r="2.6"/>
<circle fill="#FFFFFF" cx="938.6" cy="49.1" r="2.6"/>
<circle fill="#FFFFFF" cx="782.7" cy="12.6" r="2.6"/>
<circle fill="#FFFFFF" cx="833.4" cy="55.7" r="4"/>
<circle fill="#FFFFFF" cx="1160.5" cy="17.3" r="4"/>
<circle fill="#FFFFFF" cx="1132.8" cy="55.6" r="4"/>
<circle fill="#FFFFFF" cx="867.7" cy="60.4" r="4"/>
<circle fill="#FFFFFF" cx="815.8" cy="13.6" r="4"/>
<circle fill="#FFFFFF" cx="1219.8" cy="51.6" r="4"/>
<circle fill="#FFFFFF" cx="663.2" cy="41.6" r="4"/>
<circle fill="#FFFFFF" cx="620.6" cy="61.6" r="4.6"/>
<circle fill="#FFFFFF" cx="597.2" cy="38.5" r="4.6"/>
<circle fill="#FFFFFF" cx="732.9" cy="42.5" r="4.6"/>
<circle fill="#FFFFFF" cx="873.8" cy="44.9" r="4.6"/>
<circle fill="#FFFFFF" cx="787.6" cy="63.5" r="4.6"/>
<circle fill="#FFFFFF" cx="926.8" cy="36.5" r="4.6"/>
<circle fill="#FFFFFF" cx="954.8" cy="52.9" r="4.6"/>
<circle fill="#FFFFFF" cx="773.3" cy="44.4" r="5.3"/>
<circle fill="#FFFFFF" cx="668.3" cy="72.1" r="5.3"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 92.3848 289.6796)" fill="#FFFFFF" cx="395.9" cy="33.3" rx="3.3" ry="3.3"/>
<circle fill="#FFFFFF" cx="436.8" cy="55.7" r="4.2"/>
<circle fill="#FFFFFF" cx="323.4" cy="36" r="4.2"/>
<circle fill="#FFFFFF" cx="403.8" cy="46.3" r="2.6"/>
<circle fill="#FFFFFF" cx="383.7" cy="61.2" r="2.6"/>
<circle fill="#FFFFFF" cx="352.2" cy="40" r="4"/>
<circle fill="#FFFFFF" cx="218.8" cy="46.7" r="4.6"/>
<circle fill="#FFFFFF" cx="489.6" cy="75.9" r="4.6"/>
<circle fill="#FFFFFF" cx="462.3" cy="42.7" r="5.3"/>
<circle fill="#FFFFFF" cx="41.6" cy="29.7" r="5.3"/>
<circle fill="#FFFFFF" cx="100.9" cy="67.5" r="5.3"/>
<circle fill="#FFFFFF" cx="366.2" cy="57.4" r="5.3"/>
<circle fill="#FFFFFF" cx="1018.3" cy="44.7" r="5.3"/>
<circle fill="#FFFFFF" cx="523.7" cy="53.9" r="2.8"/>
</g>
<g id="snow2">
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 164.9401 522.0589)" fill="#FFFFFF" cx="712.7" cy="61.9" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="1117.9" cy="45.5" r="7.6"/>
<circle fill="#FFFFFF" cx="470.6" cy="78.2" r="6.5"/>
<circle fill="#FFFFFF" cx="325.9" cy="71.8" r="3.3"/>
<circle fill="#FFFFFF" cx="352.5" cy="17.2" r="6.8"/>
<circle fill="#FFFFFF" cx="410.5" cy="64.8" r="6.3"/>
<circle fill="#FFFFFF" cx="463.9" cy="27.7" r="8.2"/>
<circle fill="#FFFFFF" cx="1267.7" cy="72.4" r="7.6"/>
<circle fill="#FFFFFF" cx="848.1" cy="46.1" r="8.4"/>
<circle fill="#FFFFFF" cx="1219.7" cy="15.9" r="4.2"/>
<circle fill="#FFFFFF" cx="608.5" cy="52.6" r="5.1"/>
<circle fill="#FFFFFF" cx="762.4" cy="52.1" r="5.1"/>
<circle fill="#FFFFFF" cx="729.6" cy="54.7" r="5.1"/>
<circle fill="#FFFFFF" cx="522.8" cy="28.8" r="5.1"/>
<circle fill="#FFFFFF" cx="491.6" cy="53.1" r="5.1"/>
<circle fill="#FFFFFF" cx="1021.5" cy="64.5" r="5.1"/>
<ellipse transform="matrix(0.9773 -0.2118 0.2118 0.9773 22.3237 242.403)" fill="#FFFFFF" cx="1142.7" cy="17" rx="5.1" ry="5.1"/>
<circle fill="#FFFFFF" cx="980.3" cy="18.9" r="5.1"/>
<circle fill="#FFFFFF" cx="1208.1" cy="49.6" r="5.1"/>
<circle fill="#FFFFFF" cx="937.3" cy="50.7" r="5.1"/>
<circle fill="#FFFFFF" cx="999.8" cy="67.5" r="5.6"/>
<circle fill="#FFFFFF" cx="1066.8" cy="27.3" r="8.1"/>
<circle fill="#FFFFFF" cx="963.5" cy="64.7" r="8.1"/>
<circle fill="#FFFFFF" cx="635.5" cy="50.2" r="8.1"/>
<circle fill="#FFFFFF" cx="580.8" cy="57.8" r="5.2"/>
<circle fill="#FFFFFF" cx="528" cy="70.9" r="9.2"/>
<circle fill="#FFFFFF" cx="773.2" cy="71.5" r="9.2"/>
<circle fill="#FFFFFF" cx="1079" cy="58.2" r="2.9"/>
<circle fill="#FFFFFF" cx="907.3" cy="21" r="5.3"/>
<circle fill="#FFFFFF" cx="1170.6" cy="57" r="5.8"/>
<circle fill="#FFFFFF" cx="1240.2" cy="30.3" r="7"/>
<circle fill="#FFFFFF" cx="894" cy="44.7" r="7.4"/>
<ellipse transform="matrix(0.866 -0.5 0.5 0.866 72.1351 343.7009)" fill="#FFFFFF" cx="677.4" cy="37.2" rx="4.6" ry="4.6"/>
<ellipse transform="matrix(0.866 -0.5 0.5 0.866 73.7631 356.8792)" fill="#FFFFFF" cx="702.8" cy="40.8" rx="4.6" ry="4.6"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.6369 105.0039)" fill="#FFFFFF" cx="119.4" cy="70.2" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="218.4" cy="23.2" r="8.4"/>
<circle fill="#FFFFFF" cx="143" cy="55.4" r="5.1"/>
<circle fill="#FFFFFF" cx="102.9" cy="25.6" r="5.1"/>
<circle fill="#FFFFFF" cx="40" cy="67.9" r="8.1"/>
<circle fill="#FFFFFF" cx="194.9" cy="53.1" r="6.1"/>
<circle fill="#FFFFFF" cx="287.9" cy="24.3" r="6"/>
<circle fill="#FFFFFF" cx="259.3" cy="62.4" r="7.8"/>
<circle fill="#FFFFFF" cx="68.1" cy="33.2" r="4.2"/>
<circle fill="#FFFFFF" cx="1335" cy="20.6" r="4.7"/>
<circle fill="#FFFFFF" cx="427" cy="43.1" r="5.7"/>
</g>
<g id="snow">
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 191.9405 492.7699)" fill="#FFFFFF" cx="690.8" cy="14.7" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="1095.7" cy="31.9" r="8.4"/>
<circle fill="#FFFFFF" cx="437.4" cy="13.9" r="8.4"/>
<circle fill="#FFFFFF" cx="330.1" cy="12.3" r="8.4"/>
<circle fill="#FFFFFF" cx="343.2" cy="68.4" r="8.1"/>
<circle fill="#FFFFFF" cx="382.6" cy="16.9" r="8"/>
<circle fill="#FFFFFF" cx="448.6" cy="69" r="7.5"/>
<circle fill="#FFFFFF" cx="1275.9" cy="39.4" r="7.9"/>
<circle fill="#FFFFFF" cx="818.7" cy="52.5" r="6.3"/>
<circle fill="#FFFFFF" cx="1190.5" cy="69.8" r="8.4"/>
<circle fill="#FFFFFF" cx="599.2" cy="26.1" r="5.1"/>
<circle fill="#FFFFFF" cx="753.1" cy="33.6" r="5.1"/>
<circle fill="#FFFFFF" cx="733" cy="67.4" r="5.1"/>
<circle fill="#FFFFFF" cx="513.5" cy="51.9" r="5.1"/>
<circle fill="#FFFFFF" cx="482.3" cy="32.6" r="5.1"/>
<circle fill="#FFFFFF" cx="1012.3" cy="21.1" r="5.1"/>
<ellipse transform="matrix(0.2118 -0.9773 0.9773 0.2118 837.4649 1165.1146)" fill="#FFFFFF" cx="1141.1" cy="63.4" rx="5.1" ry="5.1"/>
<circle fill="#FFFFFF" cx="946.7" cy="75.5" r="5.1"/>
<circle fill="#FFFFFF" cx="1198.8" cy="36" r="5.1"/>
<circle fill="#FFFFFF" cx="945.1" cy="21" r="5.1"/>
<circle fill="#FFFFFF" cx="982.7" cy="70.2" r="8.1"/>
<circle fill="#FFFFFF" cx="1057.5" cy="58.4" r="8.1"/>
<circle fill="#FFFFFF" cx="953.7" cy="36" r="8.1"/>
<circle fill="#FFFFFF" cx="633.6" cy="16" r="8.1"/>
<circle fill="#FFFFFF" cx="553.3" cy="73.1" r="7.5"/>
<circle fill="#FFFFFF" cx="518.7" cy="14.8" r="5.1"/>
<circle fill="#FFFFFF" cx="789" cy="22.9" r="6.3"/>
<circle fill="#FFFFFF" cx="1081.7" cy="12.5" r="6.1"/>
<circle fill="#FFFFFF" cx="894" cy="64.6" r="7"/>
<circle fill="#FFFFFF" cx="1147.3" cy="39.7" r="9.2"/>
<circle fill="#FFFFFF" cx="1237" cy="71.5" r="9.2"/>
<circle fill="#FFFFFF" cx="869.5" cy="26.6" r="6.8"/>
<circle fill="#FFFFFF" cx="669.2" cy="55.8" r="7.3"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 20.5275 95.2235)" fill="#FFFFFF" cx="125.2" cy="22.8" rx="6.6" ry="6.6"/>
<circle fill="#FFFFFF" cx="202.3" cy="70.8" r="8.4"/>
<circle fill="#FFFFFF" cx="144.7" cy="28.3" r="5.1"/>
<circle fill="#FFFFFF" cx="98.6" cy="53.5" r="5.1"/>
<circle fill="#FFFFFF" cx="58.9" cy="20.7" r="8.1"/>
<circle fill="#FFFFFF" cx="163" cy="48.7" r="7.8"/>
<circle fill="#FFFFFF" cx="278.6" cy="61.3" r="6.9"/>
<circle fill="#FFFFFF" cx="264.1" cy="18.2" r="6.6"/>
<circle fill="#FFFFFF" cx="51.3" cy="46.4" r="7.5"/>
<circle fill="#FFFFFF" cx="1325.7" cy="65" r="7.4"/>
<circle fill="#FFFFFF" cx="367.5" cy="31" r="5.7"/>
</g>
<g id="year" filter="url(#dropShadow)">
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M635.4,311c0,0.7-0.2,1.6-0.4,2.4c-0.4,1.7-1.6,3.2-3.3,3.6c-0.5,0.1-1,0.2-1.5,0.1c-2.1-0.2-3.9-2-4.2-4.1c0-0.3-0.1-0.6-0.1-1
c-0.1-5,1.8-7,4.6-9.1c0.3-0.2,0.7-0.5,1-0.7c2.8-1.9,5.7-3.4,8.9-4.4c2.5-0.8,5.5-0.8,7.9,0.2c0.2,0.1,0.4,0.1,0.6,0.2
c0.2,0.1,0.5,0.2,0.8,0.3c3.4,1.8,5.9,5,6.9,8.7c0.4,1.6,0.8,3.2,1.1,4.5c0.5,3.5-0.1,8-1.4,11.3l-1.4,3.6
c-2.6,6.6-7.4,12.2-13.9,15.2c-0.7,0.3-1.4,0.6-2.2,0.7c-2.2,0.4-4.6-0.2-6.4-1.5c-1.8-1.4-2.9-3.5-3.2-5.8
c-0.3-2.3,0.6-4.9,2.6-6.2c1.6-1.1,3.8-1.1,5.6-0.5c1.9,0.6,3.5,1.6,5.2,2.7c0.2,0.1,0.4,0.3,0.7,0.5c1.1,0.9,2.1,1.9,3,3
c0.6,0.7,1.2,1.4,1.5,1.8c2.2,2.5,4.4,4.4,6.8,6.4c1.3,1.2,2.9,2.2,4.6,2.8c1.1,0.4,2.3,0.7,3.1,0.2"/>
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M690.8,302.5c-0.2-0.6-0.4-1.2-0.7-1.8c-1.2-2.4-3.8-4.3-6.5-4.3c0,0,0,0-0.1,0c-0.1,0-0.3,0-0.5,0c-2.7,0.1-5.5,0.6-7.7,2.1
c-0.4,0.3-0.8,0.6-1.1,0.9c-4.7,4.9-6.5,13-7.6,19.5c-0.2,1.1-0.3,2.2-0.5,3.2c-0.3,1.3-0.4,2.6-0.4,3.9c0,2.5,0,5.2,0.6,7.7
c0.1,0.5,0.3,1.1,0.5,1.6c0.7,1.8,1.7,3.4,3,4.9c0.1,0.1,0.2,0.2,0.3,0.4c1.6,1.6,3.7,2.7,5.9,3.1c2.8,0.5,6.7,1.1,8.9,0.4
c3.2-1,5.7-3.6,7.2-6.5c1.6-3.1,2.3-6.7,2.7-10.3c0.2-1.9,0.3-3.8,0.3-5.6c0-3.4-0.3-6.9-3.3-9.3c-0.2-0.2-0.4-0.3-0.7-0.5
c-3-1.9-7-1.2-9.5,1.3c-0.5,0.5-1,1.1-1.4,1.6c-2.2,3.1-2.5,7.2-0.5,10.4c0.6,1,1.4,1.8,2.3,2.3c0.4,0.3,1,0.5,1.5,0.4
s1-0.6,0.9-1.1"/>
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M701.6,303.7c-0.2,0.3-0.1,0.8,0.1,1c0.4,0.4,1,0.4,1.5,0.5c0.7,0.1,1.5,0.1,2.2-0.1c3.9-1.1,6.1-4.3,7.3-7.8
c-0.6,1.7-2,26.8-2,34.5c0,0.4,0,0.8,0,1.3c0.1,2.3,0.6,4.5,1.3,6.7c0.1,0.3,0.2,0.6,0.3,0.8c1,2.5,1.3,3.7,2.3,6.2"/>
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M720.8,296.6c-0.1,0.7,0.4,1.2,0.9,1.7c2.6,2.2,6.3,2.9,9.7,2.6c3.4-0.3,6.7-1.5,9.9-2.6c-4.1,4.1-7,9.5-8,15.3
c-0.2,1.2-0.4,2.3-0.5,3.5c-0.2,1.4-0.3,2.8-0.5,4.2c-0.9,7.4-1.8,14.8-1.2,22.2"/>
</g>
<g id="text" filter="url(#dropShadow)">
<path id="LetterM" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M410.9,166.2c3.2-0.1,6.4,1.8,7.6,4.8s0.5,6.6-1.8,8.8c-0.9,0.8-1.9,1.5-3,2c-3.8,2-8.5,3.3-12.4,1.5c-3-1.4-5-4.4-6.1-7.6
c-2.5-7.2-1-15.5,3.2-22c4.2-6.4,10.8-11,18-13.7c7.6-2.8,17.6-3,22.2,3.7c2.7,3.9,2.7,8.9,2.6,13.6c-0.7,26-2.4,51.9-5.2,77.8
c0.8-20.1,3.5-40.1,7.8-59.7c1.8-8,4-16.2,9.2-22.4c2.4-2.8,6.5-5.2,9.6-3.2c2.4,1.5,2.8,4.8,2.9,7.7c0.4,8.5,0.8,16.9,1.3,25.4
c-1.2-12.8,4.4-25.9,14.3-34c1.2-1,2.6-1.9,4.1-2.1c3-0.4,5.6,2.2,7,4.9c2.4,4.9,2.3,10.5,2.4,15.9c0.3,16.3,3,32.5,8,48
c2,6.3,4.7,12.7,9.9,16.8c3.3,2.5,7.4,3.9,11.5,3.8"/>
<g id="err">
<path id="E" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M508.3,210.7c2.3,0,4.5,0,6.8,0c2.4,0,4.8,0,7-0.8c2.2-0.8,4.3-2.5,4.7-4.9c0.1-0.5,0.1-0.9,0-1.4c-0.3-1.1-1.5-1.7-2.7-1.8
c-2.6-0.3-5.3,1.1-6.9,3.1s-2.5,4.7-3,7.3c-0.4,1.9-0.6,3.9-0.2,5.8s1.4,3.7,3.1,4.7c1.5,0.9,3.4,1,5.2,0.8c4-0.5,7.6-2.4,11-4.6"/>
<path id="R" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M535.3,201.4c3.9,5,6.6,11,7.7,17.3c0.5,2.7,0.7,5.6,1.6,8.2c0-6.5,1.9-12.8,4.1-19c1.4-4,3-8,5.5-11.4c2.5-3.4,6.1-6.3,10.2-7"/>
<path id="R" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M558.7,201.8c3.9,5,6.6,11,7.7,17.3c0.5,2.7,0.7,5.6,1.6,8.2c0-6.5,1.9-12.8,4.1-19c1.4-4,3-8,5.5-11.4c2.5-3.4,6.1-6.3,10.2-7"/>
</g>
<g id="ych">
<path id="Y" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M594,189.6c1.8-0.5,3.8,0.6,4.8,2.1c1.1,1.5,1.5,3.4,1.6,5.3c0.5,5-0.1,10.1-0.6,15.1c-0.1,1.5-0.3,3.1,0.1,4.6
c0.3,1.5,1.2,3,2.6,3.6c1.4,0.7,3.1,0.4,4.5-0.4c1.3-0.8,2.4-2,3.2-3.3c2.6-3.8,3.9-8.5,3.7-13.1c8.4,13.9,13.1,29.9,13.6,46.1
c0.1,5.1-0.2,10.5-3.4,14.4c-2.8,3.5-6.4,6.8-10.6,8.5c-2.5,1-5,1.8-7.6,2.2c-5.4,0.7-11-1-15.2-4.5c-1.9-1.6-3.5-3.7-3.7-6.2
c-0.1-1.7,0.4-3.4,1.1-4.9c1.3-2.8,3.3-5.4,5.7-7.5c2.1-1.8,4.5-3.2,6.9-4.6c2.6-1.5,5.2-3,7.7-4.5"/>
<path id="C" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M738.9,148.7c-8.2,2.2-16.4,4.9-23.6,9.4c-7.2,4.5-14.4,10.3-17.4,18.3c-0.5,1.3-0.7,3.6-0.2,4.9c0.5,1.2,2.6,1.8,3.8,2.2
c3.5,1,7.2-0.5,10.3-2.3c4.8-2.9,9.2-6.8,11.6-11.9c2.4-5.1,2.5-11.4-0.7-16.1c-1.4-2.1-3.4-3.8-5.6-5.2c-13.4-9-28.8-11-43.3-3.9
c-2.3,1.1-7.3,5.2-9.2,7c-1.8,1.7-4.7,5.1-6,7.3c-3.2,5.2-4.6,9.5-6.2,15.4c-1,3.8-1.6,7.7-1.7,11.7c-0.4,8.8,1,17.8,5.3,25.5
c4.1,7.4,9.2,13.9,16.7,17.7c7.6,3.7,14.5,5.7,23,5.5c2.3,0,7.7-1.2,9.9-1.8c2.9-0.8,6.9-1.8,9.5-3.4c4.2-2.5,6.9-3.8,11-6.7
c2.5-1.8,5.7-4.6,7.9-6.6"/>
<path id="H" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M734.3,200c5.9-1.6,11.3-4.7,16.6-7.8c7.2-4.2,14.7-8.8,18.9-16c4-6.8,4.5-15,4.3-22.9c0-1.4-0.3-2.7-0.8-4
c-0.7-1.8-1.8-3.6-3.2-5c-1.1-1.2-2.2-2.4-3.6-3.2c-2-1.1-4.4-1.3-6.8-1.5c-1.8-0.1-3.7-0.2-5.5,0.1c-4,0.8-7.3,3.9-9.3,7.5
c-1.9,3.6-2.7,7.8-3.2,11.9c-2.9,22.3,0.4,45.4,9.4,66c1.9-3.5,3.5-6.9,5.5-10.4c1.2-2.1,2.4-4.2,4.1-5.8s4.2-2.7,6.5-2.3
c1,9.8-1.3,19.6-0.4,29.4c0.3,3.5,1.4,7.4,4.5,9.1c2.1,1.1,4.6,0.9,6.7,0c1.3-0.5,2.5-1.3,3.3-2.4c1.5-2.1,1.2-5.1,0.4-7.6
c-0.3,0-0.5,0-0.8,0"/>
</g>
<path id="LetterR" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M774.8,202c3.9,5,6.6,11,7.7,17.3c0.5,2.7,0.7,5.6,1.6,8.2c0-6.5,1.9-12.8,4.1-19c1.4-4,3-8,5.5-11.4c2.5-3.4,6.1-6.3,10.2-7"/>
<g id="I">
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M808.4,205.9c-2.2,4.1-1.3,9.1,0.2,13.5c0.4,1.2,0.9,2.4,1.7,3.4c1.1,1.4,2.8,2.1,4.4,2.9"/>
<path fill="none" stroke="#FFDC91" stroke-width="2.0372" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M809.2,189.1c-0.2,0.4-0.4,0.8-0.5,1.2c-0.1,0.4-0.1,0.9,0.2,1.2c0.3,0.3,0.7,0.5,1.1,0.6c0.9,0.2,1.9,0.1,2.7-0.4s1.3-1.5,1-2.4
c-0.2-0.9-1.2-1.6-2.1-1.3c-0.8,0.3-1.3,1.2-1.2,2c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.1,0.1,0.2,0.1c0.2,0.1,0.4,0.1,0.6,0.2
c0.3,0.1,0.6,0.1,0.9,0c0.3-0.1,0.5-0.4,0.4-0.7c-0.1-0.3-0.5-0.4-0.9-0.5c-0.1,0.2-0.1,0.3-0.2,0.5"/>
</g>
<g id="stmas">
<path id="S" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M818.8,228.3c5.8,1.6,12.1,1.7,18,0.1c1.4-0.4,2.7-0.8,4.1-1.3c2.3-0.8,4.9-2,5.7-4.3c0.3-0.7,0.4-1.6,0.1-2.3
c-0.5-1.2-1.8-1.7-3-2.1c-6.4-1.8-13.4-0.7-19.7-2.9c-2-0.7-3-2.9-3.1-3.9c-0.5-3.7,0.9-7.5,3.4-10.3s6.1-4.4,9.8-4.8
c1.3-0.1,2.6-0.1,3.7,0.5c0.9,0.5,1.5,1.4,1.9,2.4c1.1,2.9-0.3,6.5-3.1,7.9c-0.9,0.5-2.1,0.7-3,0c-0.8-0.7-0.5-2.3,0.5-2.3"/>
<g id="T">
<path id="T" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M852.5,163c0,3.4,1.1,6.6,1.8,9.9c1.1,5.3,1,10.8,0.9,16.2c-0.2,11.8-0.4,23.6-0.6,35.3c-0.1,7.5-0.2,15.2,2.9,22
c1.3,2.9,3.6,5.8,6.8,6.2c2.4,0.2,4.7-1.1,6.3-2.9c2.1-2.4,3.1-6.1,1.4-8.9c-0.7-1.1-2-2.1-3.3-1.7"/>
<path fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M842,191.3c0.8,1.3,2.3,2.3,3.8,2.4c1.1,0.1,2.3-0.1,3.4-0.4c6-1.5,11.8-3.4,17.5-5.7c3-1.2,6.2-2.6,9.5-2"/>
</g>
<path id="M" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M866.3,194.2c0-1.6,1.7-2.8,3.3-2.8c1.6,0.1,3,1.2,3.8,2.6c0.8,1.4,1.1,3,1.3,4.6c0.3,2.1,0.4,4.2,0.5,6.3
c0.3,6.7,0.6,13.5,0.6,20.3c1.1-5,2.9-9.9,5.1-14.5c0.6-1.2,1.7-2.5,2.9-1.9c0.6,0.3,0.8,1,1,1.7c0.7,2.8,1.4,5.7,2.1,8.5
c1.6-1.7,4.2-5.6,5.7-8.9c1.6-3.9,4.5-7.2,8-9.4c0.2-0.1,0.4-0.3,0.7-0.3c0.4,0,0.7,0.4,1,0.7c1.5,2.5,1.8,5.5,2,8.4
c0.9,11.6,0,23.5,0.6,35.2c0.2,3.3,2.4,5.5,4.3,6.9c1.8,1.3,5.1,1,7.2,0.6c3-0.7,5.5-2.5,7.6-4.8c2-2.3,2.3-6.5-0.3-8.2
c-1.5-1-3.5-1-5.4-0.9"/>
<path id="A" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M911.2,203.2c3-2.2,6-4.3,9.6-5.3c3.5-1,7.6-0.8,10.5,1.4c2.7,2,4,5.3,4.8,8.5c1,3.7,1.5,7.5,1.4,11.3c-2.1-0.7-3.2-3-4.9-4.6
c-2.4-2.3-6.1-2.8-9.3-1.8c-3.1,1-5.7,3.5-7.3,6.3c-0.8,1.4-1.5,3.1-1.4,4.7c0.1,1.7,1.1,3.3,2.8,3.8c1.3,0.4,2.8-0.1,4-0.7
c2.6-1.2,5.4-3.1,5.7-6"/>
<path id="S" fill="none" stroke="#FFDC91" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M945.2,228c5.8,1.6,12.1,1.7,18,0.1c1.4-0.4,2.7-0.8,4.1-1.3c2.3-0.8,4.9-2,5.7-4.3c0.3-0.7,0.4-1.6,0.1-2.3
c-0.5-1.2-1.8-1.7-3-2.1c-6.4-1.8-13.4-0.7-19.7-2.9c-2-0.7-3-2.9-3.1-3.9c-0.5-3.7,0.9-7.5,3.4-10.3s6.1-4.4,9.8-4.8
c1.3-0.1,2.6-0.1,3.7,0.5c0.9,0.5,1.5,1.4,1.9,2.4c1.1,2.9-0.3,6.5-3.1,7.9c-0.9,0.5-2.1,0.7-3,0c-0.8-0.7-0.5-2.3,0.5-2.3"/>
</g>
</g>
</g>
</svg>
Raw
script.js
TweenMax.set('svg',{visibility:"visible"})
MorphSVGPlugin.convertToPath('circle, rect, polygon, ellipse');
var snowBody = $('#bottom'),
buttons = $('#bottom_buttons path'),
arms = $('#right_arm, #left_arm '),
face = $('#face path'),
nose =$('#nose'),
ears =$('#ears'),
moon = $('#moon'),
stars =$('#stars path'),
snow = $('#snow path'),
snow2 = $('#snow2 path'),
snow3 = $('#snow3 path'),
text = $('#test path'),
sceneryFront = $('#GroundFront'),
sceneryBack = $('#GroundBack')
TweenMax.set(sceneryBack,{visibility:"hidden"})
TweenMax.set(sceneryFront,{visibility:"hidden"})
masterTl = new TimelineMax({paused:true}),
// Scenery
tl = new TimelineMax({paused:true}),
tl.fromTo(sceneryFront,1.5,{y:500},{y:0,visibility:"visible"},"scenestart")
.fromTo(sceneryBack,1,{y:500},{y:0,visibility:"visible"},"scenestart+=0.5")
//Trees
.staggerFromTo("#TreeGroup1 path",0.2,{y:200,opacity:0},{y:0,opacity:1,ease:Back.easeOut.config(1)},0.15)
.staggerFromTo("#TreeGroup2 path",0.2,{y:200,opacity:0},{y:0,opacity:1,ease:Back.easeOut.config(1)},0.15)
// moon and the stars
.fromTo(moon,3,{opacity:0,y:750},{opacity:1,y:0,ease:Back.easeInOut},"scenestart-=1")
.staggerFromTo(stars,2.5,{opacity:0,y:600},{opacity:1,y:0,ease:Back.easeInOut},0,"scenestart+=0.35")
// Snowman
var SnowManDropTl = new TimelineMax({paused:true})
SnowManDropTl.fromTo(snowBody,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},'drop')
.staggerFromTo(buttons,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},0.1,'drop+=0.3')
.staggerFromTo(arms,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},0.3,'drop+=0.4')
.fromTo(scarf,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},'drop+=0.4')
.staggerFromTo(face,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},0.1,'drop+=0.6')
.fromTo(nose,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},'drop+=1')
.fromTo(ears,0.6,{opacity:0,y:-500},{opacity:1,y:0,ease:Power4.easeIn},'drop+=1.2')
// Snow
SnowTl = new TimelineMax({repeat:-1,paused:true}),
// Snow Path 1
SnowTl.staggerFromTo(snow,5,{ opacity:0,
bezier: {
type: "soft",
values:[{x:0, y:-600}, {x:-10, y:-400}],
autoRotate: true
}
},
{ opacity:1,
bezier: {
type: "soft",
values:[{x:-30, y:0}, {x:-40, y:100}, {x:30, y:200}, {x:40, y:300},{x:-30, y:400}, {x:-40, y:500}, {x:30, y:600}, {x:40, y:700},{x:40,y:800}],
autoRotate: true
},ease:Linear.easeNone,repeat:-1
},0.2,'snowIn')
// Snow Path 2
.staggerFromTo(snow2,5,{opacity:0,
bezier:{
type:"soft",
values:[{x:10,y:-600},{x:-10,y:-400},{x:-50,y:-300},{x:-30,y:-200},{x:15,y:-100},{x:0,y:0}],
autoRotate: true
}
},
{ opacity:1,
bezier:{
type:'soft',
values:[{x:33,y:100},{x:14,y:200},{x:-22,y:300},{x:5,y:400},{x:17,y:500},{x:15,y:600},{x:23,y:700},{x:45,y:800}],
autoRotate:true
},ease:Linear.easeNone,repeat:-1
},0.2,'snowIn')
// Snow Path 2
.staggerFromTo(snow3,5,{opacity:0,
bezier:{
type:"soft",
values:[{x:15,y:-600},{x:-25,y:-400},{x:-50,y:-300},{x:-30,y:-200},{x:8,y:-100},{x:0,y:0}],
autoRotate: true
},ease:Linear.easeNone,repeat:-1
},
{ opacity:1,
bezier:{
type:'soft',
values:[{x:23,y:100},{x:15,y:200},{x:-3,y:300},{x:5,y:400},{x:12,y:500},{x:-15,y:600},{x:23,y:700},{x:22,y:800}],
autoRotate:true
},ease:Linear.easeNone,repeat:-1
},0.2,'snowIn')
// Text
textTl = new TimelineMax({paused:false});
textTl.fromTo("#LetterM",0.75,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},'DrawText')
.staggerFromTo('#err path',0.25,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},0.25,'DrawText+=0.70')
.staggerFromTo('#ych path',0.5,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},0.25)
.fromTo('#LetterR',0.25,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut})
.staggerFromTo('#I path',0.1,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},0.1)
.staggerFromTo("#stmas path",0.5,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},0.25)
.staggerFromTo('#OLD_year path',0.5,{drawSVG:"0%"},{drawSVG:"100%",opacity:1,ease:Linear.easeInOut},0.25)
// removed year
masterTl.add(tl.play(),"AnimationStart")
.add(SnowManDropTl.play(),"AnimationStart+=2.4")
.add(SnowTl.play(),"Startsnow")
.add(textTl.timeScale(1),"Startsnow+=0.5")
masterTl.play()
masterTl.timeScale(1)
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
Raw
style.css
body {
text-align:center;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}
svg {
height:100vh;
width:100%;
visibility:hidden;
}
#snow_bottom,#left_arm,#right_arm,#scarf,#ears,#moon,#nose{
opacity:0;
}
g#snow>circle,g#snow>ellipse,g#snow2>circle,g#snow2>ellipse,g#snow3>circle,g#snow3>ellipse{
opacity:0;
}
g#stars>polygon,g#snowman>path,g#snowman>polygon,g#snowman>circle,g#snowman>ellipse {
opacity:0;
}
#bottom_buttons>circle {
opacity:0;
}
#face>circle,#face>ellipse {
opacity:0;
}
g#TreeGroup1>path,g#TreeGroup1>polygon,g#TreeGroup1>g>path,g#TreeGroup1>g>polygon{
opacity:0;
}
g#TreeGroup2>path,g#TreeGroup2>polygon {
opacity:0;
}
g#text>path,g#text>g>path {
opacity:0;
}
g#year>path {
opacity:0;
}
g#T>path {
opacity:0;
}
@stanwmusic
Copy link
Author

Demo: https://codepen.io/Stanssongs/full/aPLZZq

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment