Skip to content

Instantly share code, notes, and snippets.

@kyrasteen

kyrasteen/Flatirons at night.markdown

Created September 27, 2015 23:59
Show Gist options
  • Save kyrasteen/6a3dff8d1eb30a202e64 to your computer and use it in GitHub Desktop.
Save kyrasteen/6a3dff8d1eb30a202e64 to your computer and use it in GitHub Desktop.
Download ZIP
Flatirons at night
Raw
Flatirons at night.markdown
Raw
index.html
<!DOCTYPE html>
<head>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="mountains">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 824.5 340" style="enable-background:new 0 0 824.5 340;" xml:space="preserve">
<polygon class='bkg' style="fill:#3d5367;stroke:#888888;stroke-miterlimit:10;" points="0,0 824.5,0 824.5,242 805,249 783,266
718,129.5 678.9,198.6 555,26 484,137 430,90 402,79 344,221 231,204 153,233 68,140 0,208 " />
<polygon class='bkg' style="fill:#cbd4b1;stroke:#888888;" points="0,320.8 0,340 824.5,340 824.5,242
815.8,261.9 804.5,274.1 782.8,266.4 737.6,280.3 707.1,296.4 691.5,312 667.9,284.5 592.7,285 568.5,261.9 541.7,307 511,329
484,317 455.4,274.6 387.4,242 357,280.3 308,317 291.5,333.5 264.4,320.8 168.3,257.4 168,272.9 147.1,280.3 104.8,284.4 " />
<g id="moon">
<path class="tree-base" stroke-dasharray="300" style="fill:#F9EED5;" d="M179.9,63.1c-2-12.8,5.9-24.9,17.9-28.6c-2.6-0.4-5.3-0.4-8.1,0C175.1,36.7,165,50.4,167.2,65
c2.2,14.7,15.9,24.7,30.6,22.5c2.8-0.4,5.5-1.3,7.9-2.5C193,85.2,181.9,76,179.9,63.1z" />
<path class="tree-base" stroke-dasharray="300" style="fill:none;stroke:#888888;stroke-miterlimit:10;" d="M179.9,63.1c-2-12.8,5.9-24.9,17.9-28.6c-2.6-0.4-5.3-0.4-8.1,0
C175.1,36.7,165,50.4,167.2,65c2.2,14.7,15.9,24.7,30.6,22.5c2.8-0.4,5.5-1.3,7.9-2.5C193,85.2,181.9,76,179.9,63.1z" />
</g>
<polyline id='ridge' stroke-dasharray="1300" style="fill:none;stroke:#000000;stroke-miterlimit:10;" points="0,208 68,140 153,233 231,204 344,221 402,79 430,90
484,137 555,26 678.9,198.6 718,129.5 783,266 805,249 824.5,242 " />
<g id="trees">
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="387.4" y1="286.9" x2="387.4" y2="273.6" />
<polygon class="tree" stroke-dasharray="300" style="fill:#2c9433;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="387.4,242 382.7,273.6
393.3,273.6 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="577.4" y1="310.5" x2="577.4" y2="301.3" />
<polygon class="tree" stroke-dasharray="300" style="fill:#0b6b12;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="577.4,279.5 574.2,301.3
581.4,301.3 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="593.4" y1="330.5" x2="593.4" y2="317.2" />
<polygon class="tree" stroke-dasharray="300" style="fill:#4f6f51;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="593.4,285.5 588.7,317.2
599.3,317.2 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="568.8" y1="278.5" x2="568.8" y2="274.1" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#6eab72;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="568.8,263.5 567.2,274.1
570.8,274.1 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="419.1" y1="329.5" x2="419.1" y2="316.2" />
<polygon class="tree" stroke-dasharray="300" style="fill:#0ca917;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="419.1,284.5 414.3,316.2
425,316.2 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="455.4" y1="303.6" x2="455.4" y2="295" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#02c910;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="455.4,274.6 452.8,295
458.5,295 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="667.9" y1="301.6" x2="667.9" y2="296.6" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#034b08;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="667.9,284.5 666.1,296.6
670.1,296.6 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="691.5" y1="333.8" x2="691.5" y2="327.3" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#008d0a;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="691.5,312 689.2,327.3
694.3,327.3 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="707.1" y1="313.5" x2="707.1" y2="308.4" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#1c6d21;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="707.1,296.4 705.3,308.4
709.3,308.4 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="790.8" y1="314.5" x2="790.8" y2="306.9" />
<polygon class="tree" stroke-dasharray="300" style="fill:#228d29;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="790.8,288.7 788.3,306.9
794,306.9 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="815.8" y1="279" x2="815.8" y2="273.9" />
<polygon class="tree" stroke-dasharray="300" style="fill:#2a782f;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="815.8,261.9 814,273.9
818,273.9 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="804.8" y1="292.1" x2="804.8" y2="287" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#56855a;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="804.8,275 803,287 807,287 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="782.8" y1="283.5" x2="782.8" y2="278.5" />
<polygon class="tree" stroke-dasharray="300" style="fill:#559659;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="782.8,266.4 781,278.5
785,278.5 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="777.1" y1="303.7" x2="777.1" y2="298.6" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#2f6332;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="777.1,286.5 775.3,298.6
779.3,298.6 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="428.1" y1="281.5" x2="428.1" y2="276.4" />
<polygon class="tree" stroke-dasharray="300" style="fill:#18601d;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="428.1,264.4 426.3,276.4
430.3,276.4 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="401.1" y1="285.5" x2="401.1" y2="280.4" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#16741c;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="401.1,268.4 399.3,280.4
403.3,280.4 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="104.8" y1="301.5" x2="104.8" y2="296.5" />
<polygon class="tree" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="104.8,284.4 103,296.5
107,296.5 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="147.1" y1="307.1" x2="147.1" y2="299.2" />
<polygon class="tree" stroke-dasharray="300" style="fill:#1c9024;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="147.1,280.3 145.1,299.2
149.6,299.2 " />
<line class="tree-base" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="168" y1="290.1" x2="168" y2="285" />
<polygon class="tree" stroke-dasharray="300" style="fill:#24852b;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="168,272.9 166.3,285 170.3,285
" />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="186.8" y1="337.4" x2="186.8" y2="324.2" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#2e9635;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="186.8,292.5 182,324.2
192.7,324.2 " />
<line class="tree-base-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" x1="119.2" y1="331.6" x2="119.2" y2="321.5" />
<polygon class="tree-slower" stroke-dasharray="300" style="fill:#82BC8A;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="119.2,297.2 115.1,321.5
124.3,321.5 " />
</g>
<g id="inner">
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#cbebfb;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="99.5,204 126,223.6 54,220.2
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#7898a7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="126,233 141.2,241.1
147.3,268.7 " />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#acc1cc;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="522.2,77.9 590.2,126.4
572,160 " />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#8fa6b2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="699,162.4 728,167 721.5,183
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#d0e8f4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="68,140 82.8,156.2 60.2,147.7
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#99d6f4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="60.2,147.7 51,157 82.8,156.2
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#6fb3d4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="51,157 82.8,156.2 99.9,204
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#3b7b9a;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="82.8,156.2 109.2,185.4
99.9,204 " />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#0d5d85;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="109.2,185.4 126,223.6
99.9,204 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#0d5d85;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="109.2,185.4 124.6,201.9
126,223.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#0b394f;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="124.6,201.9 135.2,213.5
126,223.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#1c4b63;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="135.2,213.5 141.2,241.1
126,223.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#4b768b;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="135.2,213.5 153,233
155.3,236.6 147.3,267 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#729aae;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="126,223.6 126,233 141.4,241.1
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#daeff9;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="126,223.6 126,233 54,220.2
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#8ac6e3;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="99.9,204 54,220.2 12.2,195.7
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#8dd8fd;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="51,157 12.2,195.7 99.9,204
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#d2ecf9;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="12.2,195.7 22.8,201.9 0,208
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#aedcf2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="22.8,201.9 54,220.2 0,208 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#b8d4e1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="0,208 0,230.2 54,220.2 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#cce7f4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="0,230.2 54,220.2 126,233 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#b2e3fb;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="0,230.2 105,285 126,233 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#92d1f0;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="0,230.2 0,320.8 105,285 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#a6c9db;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="126,233 147.3,268.7 105,285
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#68c8f6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="155.3,236.6 168.3,257.4
147.3,268.7 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#376176;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="168.3,257.4 168.3,273
147.3,268.7 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#51849c;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="147.3,268.7 147.3,280.6
168.3,273 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#79a5ba;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="147.3,268.7 147.3,280.6
105,285 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#688b9c;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="153,233 231,204 264.4,253.1
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#76c8f0;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="153,233 182,238.2 168.3,257.4
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#abcfe1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="182,238.2 264.4,253.1
168.3,257.4 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#94c3db;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="264.4,253.1 264.4,266
168.3,257.4 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#83b1c7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="264.4,266 264.4,293
219.2,261.9 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#cae5f2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="168.3,257.4 264.4,293
219.2,261.9 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#b5d8ea;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="168.3,257.4 264.4,293
264.4,320.8 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#a2d6f0;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="264.4,253.1 293.7,296
264.4,320.8 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#92d5f6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="293.7,296 308,317 264.4,320.8
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#51bff4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="308,317 291.5,333.5
264.4,320.8 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#45b2e7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="231,204 284,211.9 308,317 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#61b4dd;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="284,211.9 357,280.3 308,317
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#3c9bc9;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="284,211.9 349.9,248 357,280.3
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#398db6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="284,211.9 344,221 349.9,248
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#2e7a9f;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="344,221 387.4,242 349.9,248
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#268ec1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="387.4,242 357,280.3 349.9,248
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#9bdbfb;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="402,79 344,221 461.4,222 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#1677a7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="402,79 430,90 461.4,222 " />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#4f8fae;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="430,90 471.7,126.3 479,155.6
" />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#7ba7bd;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="430,90 479,155.6 455.7,198
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#63889a;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="471.7,126.3 484,137 479,155.6
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#2a7ba3;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="479,155.6 461.4,222 455.7,198
" />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#1875a3;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="461.4,222 455.7,275 344,221
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#b4d4e3;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="461.4,222 484,317 455.7,275
" />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#c9e2ee;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="484,137 512.9,222.1 461.4,222
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#b3daee;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="461.4,222 512.9,222.1
483.5,315 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#a1d5ee;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="484,137 531.9,169 512.9,222.1
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#a3defb;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="512.9,222.1 541.7,307 484,317
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#c7e8f9;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="541.7,307 511,329 484,317 " />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#d2eaf6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="531.9,169 569,193.8
512.9,222.1 " />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#b5e1f6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="569,193.8 512.9,222.1
541.7,307 " />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#cce8f6;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="522.2,77.3 484,137
558.6,137.7 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#a1d3ec;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="558.6,137.7 569,193.8 484,137
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#86c9ea;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="569,193.8 595.2,217.6
541.7,307 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#73c8f2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="558.6,137.7 572.2,160.1
569,193.8 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#97cce5;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="555,26 522.2,77.3 564.7,53
" />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#afd9ee;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="564.7,53 522.2,77.3
590.7,125.5 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#b8d1dd;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="590.7,125.5 572.2,160.1
589.2,188.3 " />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#399ac9;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="572.2,160.1 589.2,188.3
569,193.8 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#268aba;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="569,193.8 611.4,183
595.2,217.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#0b7db4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="595.2,217.6 593,285
568.5,261.9 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#6090a7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="595.2,217.6 615.1,261 593,285
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#77a0b4;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="590.7,125.5 611.4,183
588.7,188.8 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#5591ae;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="611.4,183 622.2,213.2
595.2,217.6 " />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#3f8bb0;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="622.2,213.2 628.2,230.1
595.2,217.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#589fc1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="595.2,217.6 628.2,230.1
615.1,261 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#7eb6d2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="628.2,230.1 632.5,242
615.1,261 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#3aa7dd;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="632.5,242 668.1,284.6 593,285
" />
<polygon stroke-dasharray="2000" class="ridge-inner-quick" style="fill:#93cae5;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="555,26 707.3,296 632.5,242
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#199edf;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="632.5,242 707.3,296 691,312
" />
<polygon stroke-dasharray="2000" class="ridge-inner-long" style="fill:#0780ba;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="555,26 737.6,280.3 707.3,296
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#93cae5;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="718,129.5 713.3,137.7
721.9,137.7 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#6faac7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="713.3,137.7 717,149
699.4,162.4 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#30a3db;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="699,163.1 678.9,198.6
722,183.5 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#127fc1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="713.3,137.7 721.9,137.7
717,149 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#7594a7;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="721.9,137.7 729.9,154.5
717,149 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#77abcc;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="717,149 729,167 699.4,162.4
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#477aa1;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="717,149 729.9,154.5 729,167
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#1d72b2;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="729.9,154.5 739.2,174 729,167
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#216789;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="729,167 739.2,174 734.8,193.8
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#276594;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="729,167 722,183.5 737.6,202.7
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#1a6b92;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="722,183.5 737.6,280.3
678.9,198.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#387390;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="722,183.5 737.6,202.7 728,221
" />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#3e738d;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="739.2,174 748.6,193.8
735.1,192.3 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#51707e;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="735.1,192.3 748.6,193.8
751.8,202.2 " />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#3d667a;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="735.1,192.3 752.6,202
740.4,209.6 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#126289;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="752.6,202 740.4,209.6
746.6,234.5 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#046392;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="737.6,202.7 742.3,258.5
746.6,234.5 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid-faster" style="fill:#4f839c;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="737.6,202.7 728,221
742.3,258.5 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#065074;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="728,221 742.3,258.5
737.6,280.3 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#7c9cab;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="752.6,202 783,266 737.6,280.3
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#005c89;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="783,266 805,249 804.5,275 " />
<polygon stroke-dasharray="300" class="ridge-inner-mid" style="fill:#456778;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="805,249 824.5,242 816,262.5
" />
<polygon stroke-dasharray="300" class="ridge-inner-instant" style="fill:#246281;stroke:#888888;stroke-linejoin:round;stroke-miterlimit:10;" points="805,249 816,262.5 804.5,275
" />
</g>
</svg>
</section>
</body>
</html>
Raw
style.css
#mountains {
width: 600px;
height: auto;
margin: 0 auto;
margin-top: 100px;
}
polygon {
fill-opacity: .4;
}
.bkg {
fill-opacity: 1;
}
.tree {
visibility: hidden;
animation: draw-tree 5s 3s forwards, fill-color 1s 4s backwards;
}
.tree-base {
visibility: hidden;
animation: draw-tree 5s 3.5s forwards, fill-color 1s 4.5s backwards;
}
.tree-slower {
visibility: hidden;
animation: draw-tree 5s 4s forwards, fill-color 1s 5s backwards;
}
.tree-base-slower {
visibility: hidden;
animation: draw-tree 5s 4.5s forwards, fill-color 1s 5.5s backwards;
}
#ridge {
stroke-width: 1.5px;
animation: draw 4s;
}
.ridge-inner-instant {
animation: draw-inner 12s, fill-color 2s 1s backwards;
}
.ridge-inner-quick {
animation: draw-inner-quick 12s, fill-color 2s 2s backwards;
}
.ridge-inner-mid {
animation: draw-inner-mid 12s, fill-color 1s 1.5s backwards;
}
.ridge-inner-mid-faster {
animation: draw-inner-mid 12s, fill-color 2s 1.75s backwards;
}
.ridge-inner-long {
animation: draw-inner-long 12s, fill-color 2s 3s backwards;
}
@keyframes fill-color {
from {
fill: white;
stroke: #888888;
fill-opacity: .001;
}
to {
stroke: #aaaaaa;
fill-opacity: .4;
}
}
@keyframes draw-tree {
from {
stroke-dashoffset: 300;
visibility: hidden;
}
to {
visibility: visible;
stroke-dashoffset: 0;
}
}
@keyframes draw-inner-long {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes draw-inner-quick {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes draw-inner-mid {
from {
stroke-dashoffset: 300;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes draw-inner {
from {
stroke-dashoffset: 200;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes draw {
from {
stroke-dashoffset: 1310;
}
to {
stroke-dashoffset: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment