HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<body>
<canvas id="cloudlightning"></canvas>
<canvas id="lightning"></canvas>
<canvas id="lightningSheet"></canvas>
<div class="land"></div>
<div class="toggles">
<label for="cloudInput">
<input type="checkbox" id="cloudInput" checked="checked" />
Cloud effects (disable to improve performance)
</label>
</div>
<div class="tree" style="display: none;">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="911.09662"
height="725.51233"
>
<defs
id="defs4" />
<g
transform="translate(3.1875,-18.401367)"
id="layer1">
<path
d="M 634.26826,18.401395 L 634.14326,20.838895 C 634.0887,22.180105 633.97619,26.224645 633.89326,29.838895 L 633.76826,36.401395 L 630.08076,32.588895 C 625.81726,28.151485 625.24914,27.974325 625.26826,31.026395 C 625.27602,32.263895 627.01438,35.169905 629.11201,37.495145 C 632.47141,41.219095 632.94316,42.392615 633.14326,47.338895 C 633.29434,51.073235 633.00119,52.741315 632.29951,52.307645 C 631.71918,51.948985 631.26827,51.006435 631.26826,50.213895 C 631.26826,49.421355 630.81827,48.776395 630.26826,48.776395 C 629.71826,48.776395 629.26827,47.034055 629.26826,44.901395 C 629.26826,40.463005 626.75054,37.361285 625.17451,39.838895 C 624.6722,40.628535 624.46453,41.804405 624.70576,42.463895 C 625.23858,43.920655 622.36058,42.971055 620.42452,41.057645 C 619.69774,40.339375 618.52637,39.776395 617.79952,39.776395 C 615.09486,39.776395 615.53786,42.597365 618.83077,46.370145 C 622.74743,50.857615 622.95929,51.753435 620.36202,52.432645 C 619.08593,52.766355 618.64804,53.542545 618.98702,54.838895 C 619.54969,56.990575 622.23298,57.374195 624.04951,55.557645 C 625.41094,54.196215 625.44556,54.267765 625.67451,58.026395 C 625.8656,61.163305 625.69208,61.233625 622.26826,59.276395 C 618.91615,57.360155 618.26828,57.408125 618.26827,59.682645 C 618.26827,60.742785 619.73078,62.752225 621.51827,64.151395 C 623.95682,66.060185 624.228,66.565605 622.64326,66.151395 C 621.26358,65.790785 620.3207,66.150175 619.92452,67.182645 C 619.06359,69.426185 618.36715,69.240615 611.70577,64.901395 C 608.43647,62.771785 605.26845,61.205105 604.67452,61.432645 C 602.59275,62.230235 603.91444,66.046545 606.83077,67.651395 L 609.76827,69.245145 L 607.08077,69.557645 C 605.61482,69.732685 604.18011,70.497705 603.89327,71.245145 C 603.33226,72.707105 605.83251,74.139855 607.33077,73.213895 C 607.83114,72.904655 608.26828,73.131435 608.26827,73.713895 C 608.26827,74.296355 609.05578,74.795475 610.01827,74.838895 C 611.28907,74.896225 611.37815,75.061495 610.36202,75.463895 C 609.30191,75.883725 609.51044,76.450475 611.26827,77.776395 L 613.61202,79.526395 L 609.42452,80.245145 C 605.11629,80.973015 604.13489,82.580245 606.70577,84.713895 C 607.67459,85.517945 608.69684,85.598495 609.83077,84.963895 C 611.71679,83.908435 615.26828,84.498545 615.26827,85.870145 C 615.26827,86.355995 616.16828,86.776395 617.26827,86.776395 C 618.36827,86.776395 619.26828,86.326395 619.26827,85.776395 C 619.26827,85.226395 620.28078,84.789345 621.51827,84.807645 L 623.76826,84.838895 L 621.29952,86.870145 C 619.38156,88.466395 619.14286,89.088215 620.20577,89.745145 C 621.70683,90.672855 624.29865,89.994535 625.58076,88.338895 C 626.04465,87.739865 626.16572,88.491055 625.83076,90.026395 C 625.33116,92.316475 625.55563,92.776395 627.23701,92.776395 C 628.34749,92.776395 629.28732,92.213895 629.33076,91.526395 C 629.38463,90.673365 629.5771,90.726305 629.95576,91.682645 C 630.36078,92.705605 630.86592,92.427135 631.79951,90.682645 L 633.08076,88.276395 L 634.33076,91.026395 C 635.01806,92.534865 635.26336,94.093785 634.86201,94.495145 C 634.46066,94.896505 630.87575,95.387785 626.89326,95.588895 C 620.22956,95.925395 619.26373,95.724115 614.86202,92.932645 C 610.47926,90.153175 607.26828,89.688485 607.26827,91.838895 C 607.26827,92.312485 608.50578,93.415885 610.01827,94.276395 L 612.76827,95.838895 L 609.26827,95.182645 C 605.80622,94.549085 599.98183,91.549165 597.42452,89.057645 C 596.69774,88.349565 595.23523,87.776395 594.17452,87.776395 C 592.13671,87.776395 591.60829,89.710165 593.20577,91.307645 C 593.80575,91.907645 592.26862,92.391585 589.01827,92.588895 C 586.18773,92.760715 583.49149,93.128265 583.04952,93.401395 C 579.76141,95.433565 587.86389,99.124085 593.73702,98.276395 L 597.76827,97.713895 L 594.95577,99.307645 C 593.25285,100.27405 592.25243,101.56745 592.45577,102.58889 C 592.9425,105.03376 597.26317,104.21449 600.01827,101.15139 C 601.30039,99.725965 603.03414,98.792155 604.01827,99.026395 C 605.39829,99.354855 605.21961,99.687145 603.11202,100.55764 C 599.70673,101.96412 598.67352,103.60954 600.73702,104.40139 C 601.62849,104.74348 602.13391,105.59913 601.86202,106.30764 C 601.59014,107.01615 602.04047,107.84813 602.83077,108.15139 C 603.62104,108.45464 604.26828,108.30748 604.26827,107.83889 C 604.26827,107.02142 607.49954,105.62052 609.92452,105.37014 C 610.56245,105.30427 612.02492,104.37924 613.17452,103.33889 C 614.32408,102.29854 615.26828,101.78311 615.26827,102.18264 C 615.26827,103.22067 613.08294,105.2621 610.48702,106.65139 C 609.26087,107.3076 608.26828,108.29098 608.26827,108.83889 C 608.26827,110.7251 611.34725,111.01785 613.23702,109.30764 C 615.04123,107.67485 615.10212,107.68893 614.58077,109.68264 C 613.81773,112.60051 615.86451,112.31018 617.89327,109.21389 C 619.16228,107.27714 619.78448,106.97294 620.42452,107.96389 C 621.11944,109.03982 621.40361,109.03036 622.11201,107.93264 C 622.58626,107.19774 623.82375,106.70696 624.86201,106.83889 C 628.89693,107.35161 634.20145,103.74512 634.36201,100.37014 C 634.44863,98.549605 634.54799,98.603925 635.17451,100.77639 C 635.76977,102.84038 635.27872,103.84186 632.33076,106.49514 C 630.36688,108.26271 625.98445,111.16795 622.58076,112.96389 L 616.39327,116.21389 L 611.58077,113.80764 C 608.93448,112.48596 606.20578,111.31331 605.51827,111.18264 C 603.7338,110.84349 603.97459,112.77516 606.01827,115.18264 C 607.5929,117.03755 607.58472,117.08808 606.04952,115.90139 C 605.11111,115.17602 603.96305,114.82594 603.48702,115.12014 C 603.01099,115.41434 601.36668,115.01074 599.83077,114.21389 C 596.14751,112.30299 594.99851,112.39689 595.67452,114.52639 C 596.12268,115.93818 595.65223,116.25442 593.23702,116.18264 C 591.59044,116.1337 590.0095,115.83013 589.70577,115.52639 C 588.48834,114.30897 585.26828,116.1017 585.26827,117.99514 C 585.26827,119.53215 585.75429,119.88432 587.36202,119.46389 C 589.36948,118.93893 589.38216,118.98649 587.70577,120.83889 C 585.89553,122.83918 586.19245,123.11466 589.98702,122.80764 C 591.73128,122.66651 592.09304,123.0039 591.58077,124.33889 C 591.04032,125.74727 591.38524,125.9847 593.45577,125.58889 C 595.52532,125.19327 595.88007,125.42967 595.48702,126.93264 C 594.95272,128.97581 595.58614,129.19605 598.08077,127.87014 C 600.53251,126.56702 603.62777,130.70589 601.61202,132.58889 C 600.48414,133.6425 600.14204,133.60078 599.70577,132.46389 C 599.40661,131.68429 597.63471,131.03759 595.67452,130.96389 C 593.75189,130.89162 592.40734,131.23109 592.70577,131.71389 C 593.00416,132.1967 592.36901,132.34549 591.26827,132.05764 C 588.74279,131.39721 588.66463,132.91597 591.14327,134.46389 C 592.45532,135.28328 592.86207,136.38409 592.51827,138.18264 C 591.91342,141.34675 591.76107,141.37315 588.08077,138.27639 C 586.44668,136.90139 584.45733,135.77639 583.67452,135.77639 C 581.99844,135.77639 581.91311,136.26721 583.20577,138.68264 C 584.25517,140.64346 583.59684,140.69068 576.01827,139.24514 C 573.54854,138.77406 572.26828,138.90516 572.26827,139.62014 C 572.26827,140.91482 577.46081,143.77639 579.83077,143.77639 C 581.1978,143.77639 581.278,144.0285 580.26827,145.24514 C 579.27476,146.44224 579.30984,146.85592 580.48702,147.30764 C 581.2919,147.6165 582.36744,147.77513 582.86202,147.68264 C 584.95084,147.29202 586.25178,147.85888 586.01827,149.02639 C 585.86478,149.79382 586.82993,150.24808 588.51827,150.21389 C 590.63422,150.17104 591.27393,150.63217 591.29952,152.21389 C 591.33147,154.18834 591.41053,154.16886 593.29952,151.90139 C 594.86074,150.02736 595.26828,149.88838 595.26827,151.21389 C 595.26827,152.13228 595.71722,152.61694 596.26827,152.27639 C 596.8193,151.93584 597.6963,152.82296 598.23702,154.24514 C 598.77774,155.66733 599.90378,157.08165 600.73702,157.40139 C 601.57028,157.72114 602.26828,158.60399 602.26827,159.37014 C 602.26827,160.13629 602.9914,160.77639 603.89327,160.77639 C 604.79513,160.77639 606.10107,161.53996 606.79952,162.49514 C 607.99664,164.1323 608.2184,164.11798 610.42452,162.24514 L 612.76827,160.27639 L 610.98702,162.37014 C 609.91059,163.64834 606.57565,165.10312 602.36202,166.12014 C 593.5554,168.24573 591.42814,168.17902 587.83077,165.80764 C 584.49877,163.61118 582.873,164.01821 583.76827,166.83889 C 584.27093,168.42262 583.88859,168.77639 581.51827,168.77639 C 579.9412,168.77639 578.19535,168.32845 577.64327,167.77639 C 576.97161,167.10473 575.99972,167.23647 574.70577,168.18264 C 572.84914,169.54024 572.89417,169.66621 575.98702,171.43264 C 578.31864,172.76432 579.05689,173.7759 578.64327,175.08889 C 578.27467,176.25891 578.56172,176.83158 579.42452,176.71389 C 582.31991,176.31897 583.44278,176.81316 582.89327,178.24514 C 581.93388,180.74526 585.58454,181.9377 588.36202,180.02639 C 590.18399,178.77261 590.45332,178.71309 589.54952,179.83889 C 587.86071,181.94257 589.48445,184.14161 592.11202,183.30764 C 595.89894,182.10572 596.91952,184.02841 593.20577,185.37014 C 588.43533,187.09364 583.67664,187.05979 581.89327,185.27639 C 579.92067,183.30379 576.85778,183.27956 577.61202,185.24514 C 578.07877,186.46146 577.38224,186.62405 573.70577,186.12014 C 568.3257,185.38272 567.65185,187.04526 572.61202,188.83889 C 575.01788,189.70886 575.86907,190.55455 575.54952,191.77639 C 575.01554,193.81835 578.17387,194.95334 580.61202,193.58889 C 581.93845,192.84658 582.26828,193.13613 582.26827,195.12014 C 582.26827,197.14756 582.63432,197.49453 584.42452,197.02639 C 586.19314,196.56389 586.45072,196.76121 585.89327,198.21389 C 585.34681,199.63793 585.6262,199.91636 587.23702,199.49514 C 588.34519,199.20534 589.26828,199.37163 589.26827,199.87014 C 589.26827,201.62246 591.38354,200.74409 594.04952,197.90139 C 597.26075,194.47726 599.16179,193.72066 601.51827,194.93264 C 604.25738,196.34141 603.57261,197.48011 600.26827,196.99514 C 596.82434,196.48968 596.31669,198.0129 598.79952,201.55764 C 600.25158,203.63074 600.24511,203.77639 598.39327,203.77639 C 597.30137,203.77639 595.71825,204.45139 594.89327,205.27639 C 594.06827,206.10139 592.72511,206.77639 591.89327,206.77639 C 591.06144,206.77639 590.11802,207.19851 589.79952,207.71389 C 589.481,208.22927 587.46848,208.6184 585.33077,208.58889 C 583.19307,208.55939 580.86114,208.8952 580.14327,209.33889 C 579.42537,209.78258 577.38022,210.05173 575.61202,209.93264 C 572.94935,209.75332 572.34832,210.10975 572.08077,211.99514 C 571.84837,213.63299 571.067,214.29213 569.26827,214.37014 C 567.89327,214.42978 566.31828,214.60394 565.76827,214.74514 C 565.21827,214.88633 563.98078,214.90554 563.01827,214.80764 C 562.05577,214.70973 561.26828,215.02916 561.26827,215.49514 C 561.26827,216.82082 566.80239,219.77639 569.29952,219.77639 C 571.48687,219.77639 571.52732,219.83268 569.76827,221.77639 C 568.00199,223.7281 568.02049,223.77639 570.58077,223.77639 C 572.54021,223.77639 573.05644,224.14942 572.61202,225.30764 C 572.12693,226.57178 572.54847,226.73614 574.89327,226.18264 C 576.47533,225.80918 577.99328,225.52101 578.26827,225.52639 C 581.38696,225.58749 582.11191,225.93012 581.64327,227.15139 C 580.5989,229.87297 583.18912,229.79668 584.67452,227.05764 C 586.08855,224.45023 586.16822,224.41583 586.20577,226.52639 C 586.22779,227.76389 586.60578,228.80985 587.01827,228.87014 C 593.12859,229.76328 594.13101,229.46708 595.36202,226.49514 L 596.61202,223.49514 L 597.48702,225.87014 L 598.36202,228.27639 L 600.29952,225.77639 C 602.21751,223.27989 602.21478,223.27703 602.23702,225.52639 C 602.26701,228.56071 604.04972,228.38835 604.83077,225.27639 C 605.17587,223.90139 605.9017,222.77639 606.42452,222.77639 C 606.94736,222.77639 607.05081,223.26134 606.67452,223.87014 C 606.19653,224.64355 606.97073,224.77415 609.23702,224.27639 C 611.64334,223.74788 612.3937,223.86891 612.08077,224.80764 C 611.46636,226.65088 605.20323,229.77639 602.11202,229.77639 C 600.64978,229.77639 599.25065,230.33889 598.98702,231.02639 C 598.69241,231.79474 596.73785,232.2318 593.89327,232.18264 C 591.34804,232.13866 589.26828,232.45294 589.26827,232.87014 C 589.26827,234.79479 592.73909,236.87712 595.48702,236.58889 C 597.11997,236.4176 598.53056,236.67222 598.61202,237.18264 C 598.87786,238.84816 593.01504,239.78492 578.76827,240.33889 C 562.71313,240.96319 556.26828,241.66632 556.26827,242.74514 C 556.26827,243.1611 555.14328,243.28923 553.76827,243.02639 C 552.3482,242.75493 551.26828,243.00588 551.26827,243.62014 C 551.26827,245.02186 554.5353,246.77639 557.17452,246.77639 C 558.31068,246.77639 559.26828,247.22639 559.26827,247.77639 C 559.26827,248.32639 558.77876,248.77639 558.20577,248.77639 C 557.63277,248.77639 556.17027,249.70561 554.95577,250.87014 L 552.76827,252.99514 L 556.01827,252.55764 C 558.16807,252.26386 559.26828,252.52318 559.26827,253.33889 C 559.26827,254.07975 560.06675,254.37185 561.26827,254.05764 C 562.38646,253.76523 563.26828,254.02709 563.26827,254.65139 C 563.26827,256.2664 565.81211,256.03096 567.26827,254.27639 C 567.95296,253.45139 568.95034,252.77639 569.51827,252.77639 C 570.08617,252.77639 569.83479,253.58308 568.92452,254.58889 C 568.01427,255.5947 567.26828,256.7197 567.26827,257.08889 C 567.26827,258.14879 571.08225,257.88641 571.76827,256.77639 C 572.75827,255.17454 574.08259,255.61598 574.76827,257.77639 C 575.57128,260.30646 576.71242,260.29039 580.33077,257.71389 L 583.23702,255.65139 L 582.61202,258.71389 C 581.859,262.479 583.67616,262.78316 587.73702,259.58889 C 590.40469,257.49051 590.47961,257.49247 589.42452,259.46389 C 588.18224,261.78511 588.77995,262.88784 590.86202,262.08889 C 591.64025,261.79026 592.95026,262.0975 593.76827,262.77639 C 594.80149,263.63389 595.26828,263.68118 595.26827,262.90139 C 595.26827,262.28405 595.94328,261.7764 596.76827,261.77639 C 597.59327,261.77639 598.26828,262.39516 598.26827,263.18264 C 598.26827,264.15341 599.15374,264.51879 601.01827,264.30764 C 611.42793,263.12887 597.96442,269.18217 585.86202,271.12014 C 577.94992,272.38712 577.15603,272.33878 574.54952,270.62014 C 573.00904,269.60441 571.20578,268.78002 570.51827,268.77639 C 568.44985,268.76549 569.11017,270.76759 571.51827,271.80764 C 573.17033,272.52115 572.5724,272.59751 569.26827,272.08889 C 566.79327,271.70791 563.64328,271.45779 562.26827,271.52639 C 560.89327,271.595 557.53679,271.00183 554.83077,270.21389 C 552.12473,269.42594 549.76009,268.9096 549.58077,269.08889 C 548.53739,270.13226 554.93948,274.25585 558.51827,274.83889 L 562.76827,275.52639 L 559.01827,275.65139 C 556.40723,275.73854 555.26828,276.23199 555.26827,277.27639 C 555.26827,278.10139 556.05578,278.84888 557.01827,278.93264 C 557.98077,279.01642 559.21828,279.17987 559.76827,279.30764 C 560.31827,279.43543 561.41312,279.58794 562.20577,279.65139 C 563.26633,279.73628 563.13316,280.13893 561.70577,281.18264 C 559.23461,282.9896 560.40817,284.28815 563.17452,282.80764 C 564.89574,281.88647 565.26828,281.98168 565.26827,283.33889 C 565.26827,284.62141 565.9838,284.88278 568.51827,284.52639 C 570.30577,284.27503 572.66828,283.74259 573.76827,283.33889 C 575.73969,282.61536 575.71289,282.62361 573.79952,284.18264 C 571.85089,285.77039 572.26848,286.13821 575.51827,285.80764 C 576.51438,285.70631 577.26828,286.3243 577.26827,287.21389 C 577.26827,289.35288 578.07799,289.17622 580.45577,286.52639 L 582.48702,284.27639 L 580.86202,286.99514 C 579.97724,288.48829 579.26828,290.16505 579.26827,290.74514 C 579.26827,292.29102 584.17407,291.14968 586.51827,289.05764 C 588.48287,287.30438 588.49779,287.33687 587.73702,289.77639 C 586.67991,293.16625 585.45225,293.88247 576.23702,296.65139 C 568.58244,298.95139 568.12059,298.98003 563.98702,297.40139 C 559.48129,295.68063 553.26828,295.19013 553.26827,296.55764 C 553.26827,296.99764 553.79147,297.92459 554.45577,298.58889 C 555.26786,299.40098 553.93096,299.27376 550.36202,298.21389 C 547.44258,297.34691 544.37053,296.88687 543.51827,297.21389 C 542.21134,297.71541 542.32955,298.21269 544.26827,300.27639 L 546.54952,302.71389 L 543.17452,301.74514 C 538.82405,300.49744 533.53847,300.49898 532.76827,301.74514 C 531.97336,303.03134 538.66107,305.77012 542.61202,305.77639 L 545.76827,305.77639 L 542.83077,308.12014 C 539.9312,310.44027 539.95894,313.48415 542.86202,312.37014 C 543.82768,311.99958 544.26828,312.60349 544.26827,314.30764 C 544.26827,316.07912 544.79057,316.7764 546.17452,316.77639 C 547.23524,316.77639 548.80029,317.46467 549.64327,318.30764 C 550.91572,319.58009 551.51317,319.61469 553.20577,318.55764 C 554.32708,317.85737 555.26828,316.94409 555.26827,316.52639 C 555.26827,316.10869 556.05648,316.5639 557.04952,317.52639 C 558.96432,319.38228 559.51,321.7764 558.01827,321.77639 C 557.52747,321.77639 557.45449,322.26134 557.83077,322.87014 C 558.3064,323.63974 557.56598,323.78484 555.39327,323.30764 C 553.39928,322.86968 552.26828,322.99388 552.26827,323.68264 C 552.26827,324.29533 550.32243,324.7764 547.76827,324.77639 C 543.08209,324.77639 542.19757,325.64288 544.76827,327.77639 C 545.76974,328.60754 547.88539,328.82805 551.01827,328.43264 L 555.76827,327.83889 L 552.04952,329.80764 C 549.4671,331.17681 548.51095,332.26107 548.92452,333.33889 C 549.2964,334.30798 550.13046,334.6331 551.14327,334.21389 C 552.0348,333.84488 553.44328,333.44129 554.26827,333.30764 C 555.09327,333.17398 555.20578,333.25875 554.51827,333.49514 C 551.98531,334.36607 553.2935,335.97183 556.01827,335.33889 C 557.9863,334.88175 558.35223,334.98418 557.29952,335.68264 C 554.65394,337.43793 557.00352,337.94742 560.17452,336.30764 C 561.87563,335.42796 563.26828,335.13311 563.26827,335.65139 C 563.26827,336.16968 562.70578,336.8121 562.01827,337.05764 C 561.33077,337.30318 561.11605,337.87594 561.54952,338.33889 C 561.98301,338.80184 563.61835,338.68805 565.20577,338.08889 C 567.5701,337.19646 568.01958,337.25787 567.58077,338.40139 C 567.19465,339.40761 567.55154,339.59483 568.89327,339.12014 C 570.4537,338.56808 570.55328,338.69883 569.45577,339.87014 C 568.43282,340.96187 564.98958,341.22359 553.70577,341.05764 C 544.97458,340.92924 539.26828,341.22579 539.26827,341.80764 C 539.26827,342.33695 539.9665,342.7764 540.83077,342.77639 C 541.69505,342.77639 543.02796,343.41105 543.79952,344.18264 C 545.00335,345.38647 544.97858,345.67023 543.64327,346.18264 C 542.78742,346.51106 540.66704,346.76797 538.92452,346.77639 C 535.25055,346.79415 532.7288,348.09732 533.61202,349.52639 C 534.7031,351.2918 539.66581,351.61275 543.76827,350.18264 C 549.23777,348.27598 549.53399,348.38569 546.70577,351.21389 C 543.17925,354.7404 543.43619,356.86647 547.23702,355.77639 C 548.86911,355.30832 550.66913,354.62738 551.23702,354.27639 C 551.80493,353.9254 552.30947,354.46894 552.39327,355.46389 C 552.47705,356.45885 552.61376,357.78395 552.67452,358.43264 C 552.73526,359.08132 553.08834,359.94024 553.45577,360.30764 C 554.24402,361.0959 560.26828,357.72362 560.26827,356.49514 C 560.26827,356.03126 560.67679,355.91822 561.20577,356.24514 C 561.82149,356.62568 561.82149,357.75067 561.20577,359.37014 C 560.67679,360.76148 560.26828,362.34974 560.26827,362.90139 C 560.26827,364.22313 564.99393,360.80151 569.73702,356.05764 C 573.27513,352.51894 573.78099,353.12379 570.48702,356.96389 C 569.67898,357.90591 569.31844,359.44228 569.67452,360.37014 C 570.24967,361.86896 570.57947,361.78344 572.86202,359.65139 L 575.45577,357.27639 L 575.11202,359.77639 C 574.79497,362.07192 574.11398,362.37341 566.76827,363.58889 C 561.60616,364.44305 558.22611,364.57469 557.23702,363.96389 C 554.73032,362.4159 549.26828,361.49686 549.26827,362.62014 C 549.26827,363.17559 550.05578,363.84291 551.01827,364.08889 C 551.98077,364.33487 550.51828,364.33054 547.76827,364.08889 C 543.74801,363.73563 543.01322,363.88694 544.01827,364.90139 C 545.93033,366.83131 545.50177,367.54894 542.76827,367.02639 C 539.53609,366.40852 534.99912,367.56312 535.76827,368.80764 C 536.09822,369.34151 537.39242,369.7764 538.64327,369.77639 C 542.91781,369.77639 542.31729,371.15272 537.11202,373.24514 C 528.23959,376.8117 530.17555,379.46427 539.29952,376.24514 C 543.91762,374.61578 545.72359,374.89813 542.33077,376.71389 C 541.18366,377.32781 540.26828,378.53614 540.26827,379.40139 C 540.26827,380.60755 540.87396,380.82231 542.92452,380.30764 C 545.28454,379.71531 545.46169,379.81352 544.29952,381.21389 C 541.60488,384.46074 544.4625,384.46816 548.92452,381.21389 C 551.00739,379.6948 551.09155,379.70893 550.51827,381.93264 C 549.98063,384.01811 550.08875,384.11963 551.61202,382.87014 C 553.11589,381.63654 553.21753,381.69325 552.61202,383.37014 C 552.01428,385.02542 552.25038,384.97221 554.42452,382.99514 C 556.97194,380.67861 558.53862,380.87406 557.58077,383.37014 C 556.81683,385.36093 559.21381,385.09603 563.01827,382.77639 C 564.82939,381.67213 566.26828,381.29191 566.26827,381.90139 C 566.26827,382.57868 567.31531,382.75542 569.01827,382.37014 C 570.87906,381.94916 571.28326,382.03877 570.26827,382.65139 C 569.44327,383.14934 566.29328,384.05845 563.26827,384.68264 C 556.75573,386.02646 554.73326,387.12096 555.73702,388.74514 C 556.42644,389.86065 557.77096,389.73947 563.76827,388.12014 C 565.30011,387.70653 565.00753,388.34152 562.51827,390.74514 C 560.73077,392.47114 559.26828,394.09248 559.26827,394.37014 C 559.26827,395.36376 564.82831,394.12945 568.01827,392.43264 C 571.52356,390.5681 572.06295,391.13874 569.73702,394.21389 C 567.70602,396.8991 567.90117,398.08289 570.26827,397.46389 C 571.56813,397.12397 572.26828,397.45609 572.26827,398.37014 C 572.26827,400.24063 573.18382,400.13904 575.51827,398.02639 C 577.36404,396.35599 577.44716,396.36679 577.11202,398.27639 C 576.57651,401.32759 582.12472,400.40763 585.08077,396.96389 L 587.39327,394.27639 L 586.73702,397.52639 C 585.86859,401.82733 588.37882,401.94008 592.26827,397.77639 C 593.8096,396.12639 595.20141,394.77599 595.39327,394.77639 C 595.5851,394.77677 595.81053,395.94029 595.89327,397.37014 C 596.12085,401.30221 597.75005,402.36278 599.83077,399.93264 C 601.47355,398.01401 601.70895,397.97694 602.92452,399.55764 C 604.12798,401.12259 604.26401,401.09876 604.83077,399.08889 C 605.19736,397.7889 605.9891,397.12164 606.79952,397.43264 C 607.6619,397.76356 608.40317,396.98005 608.83077,395.27639 C 609.29413,393.43022 609.75958,392.9653 610.29952,393.83889 C 610.73155,394.53793 612.0211,395.25661 613.17452,395.43264 C 614.80325,395.6812 615.75933,394.7681 617.45577,391.27639 C 619.64665,386.76689 621.9582,385.02726 620.76827,388.77639 C 619.99953,391.19847 620.57785,391.26232 623.79951,389.15139 C 625.15516,388.26313 626.29819,386.57562 626.36201,385.40139 C 626.45483,383.69311 626.58793,383.61637 626.95576,385.02639 C 627.71553,387.93905 629.26696,385.91707 629.29951,381.96389 C 629.32416,378.97137 629.50439,378.60756 630.33076,380.02639 C 630.89136,380.98889 632.28723,381.7764 633.42451,381.77639 C 635.39489,381.77639 635.47174,382.1415 634.83076,389.52639 C 634.38289,394.68668 633.33367,398.89595 631.70576,402.12014 C 630.75262,404.00795 629.95222,405.68899 629.54951,406.62014 L 654.42451,406.62014 C 655.5274,405.7372 655.03107,404.18708 653.89326,401.46389 C 652.11994,397.21974 651.43609,388.55379 652.83076,388.08889 C 653.37579,387.90722 654.60298,389.08988 655.58076,390.74514 C 657.40364,393.83102 659.64497,394.96827 658.61201,392.27639 C 657.43086,389.19838 659.29105,390.88379 660.64326,394.12014 C 661.72248,396.70308 662.58677,397.47425 664.39326,397.33889 C 665.68903,397.24181 667.3976,397.63201 668.17451,398.21389 C 669.18732,398.97242 669.70034,398.94031 669.98701,398.08889 C 670.25257,397.30027 671.04407,397.5522 672.33076,398.83889 C 674.90476,401.41289 676.18628,401.28926 675.58076,398.52639 C 675.2926,397.21156 675.43553,396.71191 675.92451,397.33889 C 677.07728,398.81706 680.26827,399.89274 680.26826,398.80764 C 680.26826,397.79817 685.78805,398.15567 688.67451,399.33889 C 690.1937,399.96164 690.47463,399.76587 689.98701,398.49514 C 689.64742,397.61019 689.89287,396.70568 690.54951,396.46389 C 691.46135,396.12811 691.47302,395.69467 690.51826,394.68264 C 688.24831,392.2765 689.1889,391.96564 692.92451,393.87014 C 697.05402,395.97549 698.20614,395.66649 696.20576,393.02639 C 695.13559,391.61397 695.12076,391.49972 696.17451,392.43264 C 696.90251,393.07716 698.10401,393.37975 698.86201,393.08889 C 699.61998,392.79802 700.26827,392.96016 700.26826,393.46389 C 700.26826,393.96761 700.87778,395.22954 701.64326,396.27639 C 702.84245,397.91638 703.28193,397.98933 704.70576,396.80764 C 706.14116,395.61637 706.54478,395.76191 707.95576,397.77639 L 709.58076,400.08889 L 710.48701,397.68264 C 711.32217,395.44672 711.47648,395.40279 712.67451,397.02639 C 714.25742,399.17154 714.9649,399.20477 716.92451,397.24514 C 718.14349,396.02615 718.21176,395.41963 717.23701,394.24514 C 716.56505,393.43547 716.31284,392.7764 716.67451,392.77639 C 717.0362,392.77639 716.81288,391.7639 716.17451,390.52639 C 715.20308,388.64315 715.56803,388.75298 718.39326,391.30764 C 724.61651,396.93489 725.02684,397.14281 726.79951,395.37014 C 727.68246,394.48719 728.05138,393.22406 727.64326,392.52639 C 727.22544,391.81208 727.73919,391.93119 728.83076,392.80764 C 734.11682,397.05194 739.46917,397.88725 735.86201,393.90139 C 734.23348,392.10188 734.28779,391.96158 736.89326,391.30764 L 739.61201,390.62014 L 736.67451,388.24514 C 732.83338,385.10532 734.88729,385.09756 740.39326,388.24514 C 742.7869,389.61352 745.33077,390.73853 746.01826,390.74514 C 748.0366,390.76459 747.45407,389.16989 745.01826,387.99514 C 742.9932,387.0185 743.14641,386.8998 746.79951,386.83889 C 749.03189,386.80167 751.73187,386.11516 752.79951,385.30764 C 754.64631,383.91079 754.62249,383.83918 751.76826,383.80764 C 747.48527,383.76028 732.25281,380.9871 729.08076,379.68264 C 725.19443,378.08444 724.4579,375.63884 728.29951,377.08889 C 731.67002,378.36111 733.37462,377.30957 730.89326,375.49514 C 729.45302,374.44202 729.91721,374.31635 733.73701,374.62014 C 738.61318,375.00796 739.65215,373.77877 736.01826,371.93264 C 734.07149,370.94361 734.40167,370.81851 738.64326,371.02639 C 744.36676,371.30691 745.97997,369.42556 741.04951,368.21389 L 737.76826,367.40139 L 741.01826,367.02639 C 744.82404,366.57217 745.1599,365.54335 742.01826,363.93264 C 740.18028,362.99031 740.95856,362.86219 746.26826,363.30764 C 752.25315,363.80973 752.58679,363.72979 750.79951,362.30764 C 749.73189,361.45814 748.07441,360.7764 747.11201,360.77639 C 746.14959,360.77639 745.07503,360.28009 744.70576,359.68264 C 744.2851,359.00199 744.91308,358.65297 746.39326,358.77639 C 750.57159,359.12479 753.26827,358.79486 753.26826,357.90139 C 753.26826,357.42246 750.09818,356.71938 746.23701,356.33889 C 742.37581,355.95842 739.43115,355.28328 739.70576,354.83889 C 739.9804,354.39451 742.86215,353.43488 746.11201,352.71389 C 752.24202,351.35395 756.12249,349.31817 754.89326,348.08889 C 754.26509,347.46072 748.70053,348.36743 741.26826,350.33889 C 738.98454,350.94466 739.04265,350.75658 742.17451,348.05764 C 747.32805,343.61648 744.41947,343.15975 736.98701,347.24514 C 729.52421,351.34721 725.25119,351.68217 716.98701,348.83889 C 707.6095,345.61255 692.40038,337.89171 691.26826,335.77639 C 689.86638,333.15695 690.66309,333.23466 693.20576,335.96389 C 694.32719,337.1676 695.26827,337.78494 695.26826,337.33889 C 695.26826,336.89283 695.94327,337.09171 696.76826,337.77639 C 698.00761,338.80496 698.26827,338.70899 698.26826,337.21389 C 698.26826,335.70734 698.78012,335.89357 701.39326,338.33889 L 704.51826,341.27639 L 703.92451,338.05764 C 703.3257,334.88419 703.36593,334.85246 706.04951,335.99514 C 707.54429,336.63162 709.44327,337.67265 710.26826,338.30764 C 714.1458,341.29214 714.59573,341.2261 713.89326,337.71389 C 713.36261,335.06064 713.46616,334.59932 714.42451,335.55764 C 716.16466,337.29779 720.26827,337.10066 720.26826,335.27639 C 720.26826,333.41294 721.88307,333.31923 722.95576,335.12014 C 723.39559,335.85856 725.00577,337.23905 726.51826,338.21389 C 728.78659,339.67587 729.26827,339.73067 729.26826,338.52639 C 729.26826,337.72338 728.36827,336.27189 727.26826,335.27639 C 726.16826,334.2809 725.26827,332.98905 725.26826,332.43264 C 725.26826,331.87621 725.52151,331.71718 725.86201,332.05764 C 726.20248,332.39812 727.19147,331.97817 728.04951,331.12014 C 729.132,330.03765 730.75722,329.70827 733.36201,330.05764 C 735.95316,330.40519 737.28806,330.13956 737.64326,329.21389 C 738.03529,328.19227 738.94507,328.08758 741.45576,328.80764 C 750.27534,331.33706 751.89869,328.45369 743.39326,325.37014 C 737.64328,323.28553 736.91596,322.2324 742.29951,323.77639 C 749.14141,325.73862 758.04117,324.25314 754.26826,321.77639 C 753.44326,321.23481 750.74327,320.72489 748.26826,320.65139 C 744.44724,320.53792 744.19725,320.43775 746.67451,319.90139 C 748.27914,319.55396 749.7929,318.64136 750.04951,317.87014 C 750.43932,316.69862 748.86132,316.56601 740.36201,317.15139 C 730.35426,317.84067 730.19394,317.84063 731.42451,315.87014 C 733.25603,312.93741 731.99765,312.42958 727.01826,314.12014 C 724.32612,315.03415 720.87085,315.41799 718.17451,315.08889 C 712.39364,314.38332 693.2659,307.97383 691.01826,305.99514 C 688.66903,303.927 688.80138,302.49344 691.26826,303.27639 C 692.38974,303.63233 693.26827,303.45106 693.26826,302.87014 C 693.26826,301.78565 694.76612,302.09747 699.76826,304.27639 C 701.41826,304.99512 705.03997,305.60499 707.83076,305.62014 C 710.62154,305.63528 713.32152,305.74151 713.83076,305.83889 C 716.17155,306.28649 716.41826,305.60304 714.67451,303.52639 C 713.4207,302.03325 713.81395,302.20145 715.83076,304.02639 C 719.28969,307.1563 720.26827,307.41697 720.26826,305.24514 C 720.26826,303.92514 720.59013,303.93325 722.83076,305.40139 C 724.3397,306.39008 725.69286,306.70078 726.08076,306.15139 C 726.44632,305.63369 728.09253,304.62604 729.73701,303.90139 C 732.60764,302.63643 732.65354,302.53836 730.79951,301.18264 C 728.53548,299.52715 729.11157,299.39051 732.67451,300.74514 C 734.61081,301.48132 735.26827,301.41173 735.26826,300.43264 C 735.26826,299.64207 737.80641,298.60316 741.76826,297.77639 C 745.34326,297.03036 748.26827,296.01082 748.26826,295.52639 C 748.26826,295.04195 748.69139,294.93916 749.23701,295.27639 C 749.78265,295.61361 751.02791,295.43812 751.98701,294.90139 C 753.51151,294.04824 753.37429,293.8209 750.95576,293.21389 C 748.8702,292.69044 748.33552,292.07741 748.76826,290.71389 C 749.19292,289.37588 748.74617,288.83883 747.04951,288.58889 C 745.43022,288.35033 746.58033,287.64831 750.98701,286.24514 C 757.81597,284.0707 759.50326,282.1027 753.51826,283.27639 C 747.99202,284.36012 734.26827,284.60667 734.26826,283.62014 C 734.26826,283.15187 734.71827,282.7764 735.26826,282.77639 C 735.81826,282.77639 736.26827,282.32163 736.26826,281.77639 C 736.26826,281.23116 734.13077,280.81692 731.51826,280.87014 C 724.95684,281.00379 714.46743,278.81047 713.83076,277.15139 C 713.47252,276.21783 714.11898,275.7764 715.79951,275.77639 C 717.15725,275.77639 718.26827,275.34037 718.26826,274.80764 C 718.26826,274.27491 718.94327,274.08482 719.76826,274.40139 C 720.59326,274.71798 721.26827,274.44768 721.26826,273.80764 C 721.26826,273.04061 722.02205,273.18781 723.48701,274.21389 C 724.70938,275.07007 726.84686,275.76344 728.23701,275.74514 L 730.76826,275.71389 L 728.45576,273.77639 L 726.17451,271.87014 L 730.95576,271.55764 L 735.76826,271.21389 L 732.26826,269.52639 L 728.76826,267.83889 L 731.83076,267.80764 C 733.78239,267.7828 735.77798,266.86274 737.26826,265.27639 C 738.56001,263.90139 740.07768,262.7764 740.67451,262.77639 C 741.27133,262.77639 742.35475,261.85761 743.04951,260.74514 C 744.87785,257.81749 742.54904,257.23063 736.79951,259.18264 C 730.59917,261.28771 729.31425,261.22949 729.95576,258.77639 C 730.58747,256.36071 730.42297,256.34741 724.14326,258.40139 C 719.36627,259.96387 718.86939,259.91834 711.23701,257.74514 C 700.94396,254.81433 698.30559,252.06902 706.23701,252.52639 C 707.05398,252.5735 708.03755,252.12123 708.42451,251.49514 C 708.91669,250.69876 709.74511,250.88606 711.14326,252.15139 C 712.71037,253.5696 714.0203,253.81457 717.20576,253.27639 C 721.7503,252.5086 722.03172,252.12853 719.51826,250.05764 C 717.72004,248.57603 718.38383,248.62241 722.67451,250.33889 C 724.21089,250.95353 724.46869,250.76935 723.95576,249.43264 C 723.48241,248.1991 723.86344,247.77639 725.39326,247.77639 C 726.78588,247.77639 727.2941,247.30196 726.92451,246.33889 C 726.62156,245.54942 726.89287,244.67737 727.54951,244.40139 C 728.38768,244.04909 728.27374,243.47657 727.11201,242.52639 C 725.59371,241.28457 725.65552,240.99381 727.86201,238.87014 C 731.46439,235.40297 730.79532,234.6777 725.51826,236.37014 C 712.39479,240.57908 707.58308,240.83004 704.36201,237.40139 C 702.53662,235.45835 702.4299,234.92951 703.64326,234.46389 C 704.45801,234.15124 706.47414,234.39636 708.14326,235.02639 C 712.41733,236.63966 713.33091,235.03146 709.76826,232.15139 C 707.27012,230.13186 707.10284,229.75707 708.76826,229.90139 C 712.26615,230.20451 714.26827,229.8068 714.26826,228.77639 C 714.26826,228.22639 713.48077,227.74877 712.51826,227.71389 C 711.1011,227.66256 711.15259,227.46712 712.86201,226.77639 C 714.023,226.30728 715.24166,225.22264 715.58076,224.33889 C 716.1146,222.94773 715.91557,222.88455 713.98701,223.96389 C 710.49897,225.91604 689.65837,225.61799 685.26826,223.55764 C 682.19941,222.11736 682.03691,221.91043 684.11201,221.83889 C 686.0064,221.7736 686.39371,221.35723 685.95576,219.68264 C 685.46503,217.8061 685.5734,217.73468 687.08076,219.02639 C 689.27195,220.90412 692.26827,221.95261 692.26826,220.83889 C 692.26826,220.35765 693.16827,220.17622 694.26826,220.46389 C 695.38645,220.7563 696.26827,220.49444 696.26826,219.87014 C 696.26826,219.25599 697.39327,218.77639 698.76826,218.77639 C 702.09215,218.77639 701.92741,217.78176 698.08076,214.62014 L 694.86201,211.99514 L 700.20576,212.83889 C 705.71701,213.7101 707.72288,213.34768 706.67451,211.65139 C 705.65025,209.99409 708.33719,207.77639 711.36201,207.77639 C 714.76937,207.77639 715.24027,206.12512 712.01826,205.43264 C 710.74015,205.15796 711.2801,204.98253 713.26826,205.05764 C 715.5435,205.14359 716.68079,204.78705 716.51826,203.99514 C 716.38076,203.32513 716.74468,202.77639 717.36201,202.77639 C 718.11702,202.77639 718.07901,202.26611 717.20576,201.21389 C 716.37782,200.21629 714.97242,199.81683 713.33076,200.15139 C 711.91495,200.43992 711.33077,200.45041 712.01826,200.15139 C 714.3267,199.14741 713.30449,197.54607 710.76826,198.18264 C 708.74032,198.69162 708.4283,198.49465 708.95576,197.12014 C 709.42748,195.89086 709.22202,195.6676 708.23701,196.27639 C 707.49819,196.73301 705.74788,197.19028 704.33076,197.30764 C 702.91361,197.42499 700.64327,197.83268 699.26826,198.21389 L 696.76826,198.90139 L 699.51826,196.55764 C 702.69593,193.83038 703.15711,192.23252 700.33076,193.74514 C 697.54199,195.23764 695.49475,195.11243 697.04951,193.55764 C 699.294,191.31315 698.40846,189.54316 696.11201,191.68264 C 694.93773,192.77664 692.58057,194.3359 690.86201,195.15139 C 684.75251,198.05054 668.26827,194.10335 668.26826,189.74514 C 668.26826,188.87373 667.70953,187.62389 667.04951,186.96389 C 666.24669,186.16107 666.22454,185.77639 666.95576,185.77639 C 667.55692,185.77639 668.29507,186.4504 668.61201,187.27639 C 668.97756,188.22898 670.40611,188.72752 672.48701,188.65139 C 674.29139,188.58538 676.78077,188.87224 678.01826,189.27639 C 679.86665,189.88008 680.26827,189.61249 680.26826,187.90139 L 680.26826,185.83889 L 683.67451,187.83889 C 686.12307,189.28358 687.28559,189.54539 687.79951,188.71389 C 688.19337,188.07662 687.90123,187.13011 687.14326,186.62014 C 685.95587,185.82124 691.79324,185.92781 695.76826,186.77639 C 696.31826,186.8938 697.79003,186.64952 699.04951,186.24514 C 701.1622,185.56682 701.2005,185.36231 699.73701,183.74514 C 698.26911,182.12313 698.34949,181.96152 700.70576,181.37014 C 703.59483,180.64503 704.17073,178.77321 701.51826,178.71389 C 700.4157,178.68923 700.87816,178.17528 702.76826,177.30764 C 704.41826,176.55022 707.09119,174.83583 708.70576,173.49514 L 711.61201,171.05764 L 707.95576,170.37014 C 705.92866,169.98986 704.26827,169.24945 704.26826,168.71389 C 704.26826,168.15226 703.10442,168.00633 701.51826,168.40139 C 699.1177,168.99928 698.90483,168.90988 700.01826,167.55764 C 701.9491,165.21268 699.07281,164.49705 696.11201,166.58889 C 694.72628,167.56793 691.71897,168.29602 688.83076,168.33889 C 684.89172,168.39738 684.3304,168.19975 686.04951,167.43264 C 687.99395,166.565 688.18625,165.74984 687.33076,161.93264 C 687.28989,161.75028 685.74569,162.53777 683.89326,163.68264 C 682.04084,164.8275 679.00336,165.75108 677.14326,165.74514 C 670.90857,165.72518 660.17727,161.57112 653.36201,156.52639 C 650.73787,154.58398 651.2938,154.18231 654.33076,155.80764 C 655.90515,156.65023 656.27478,156.5107 656.29951,155.05764 C 656.32854,153.35311 656.37756,153.33537 657.36201,155.02639 C 657.92909,156.00046 658.79886,156.55457 659.29951,156.24514 C 659.80018,155.93572 661.34649,156.42778 662.73701,157.33889 C 665.23799,158.97759 665.25312,158.95425 665.26826,156.12014 C 665.27668,154.54438 665.61418,153.76497 666.01826,154.37014 C 666.89345,155.68085 670.67134,157.77639 672.17451,157.77639 C 672.76067,157.77639 673.30721,156.76389 673.36201,155.52639 C 673.45663,153.39064 673.48316,153.40333 674.14326,155.77639 C 674.52574,157.15139 675.04929,158.06934 675.29951,157.83889 C 675.54972,157.60845 676.69096,157.91638 677.83076,158.52639 C 679.52046,159.43069 680.15957,159.28334 681.26826,157.74514 C 682.01613,156.70753 683.01517,156.10976 683.48701,156.40139 C 683.95887,156.69302 684.03368,155.76998 683.67451,154.33889 C 683.04942,151.84835 683.13448,151.77501 685.76826,152.77639 C 689.01934,154.01244 690.03017,153.39937 688.26826,151.27639 C 687.21564,150.00806 687.32044,149.77639 688.79951,149.77639 C 690.48266,149.77639 690.45965,149.67003 688.83076,147.87014 C 687.88469,146.82474 687.5372,145.71803 688.04951,145.40139 C 688.56183,145.08476 689.76634,145.70382 690.73701,146.77639 C 692.26106,148.46044 693.24039,148.61135 697.11201,147.83889 C 697.31686,147.79802 697.00585,147.17075 696.39326,146.43264 C 695.09195,144.86465 695.86273,143.77639 698.29951,143.77639 C 699.24691,143.77639 701.09482,142.88934 702.39326,141.80764 L 704.76826,139.83889 L 701.76826,139.65139 C 700.11826,139.54756 697.66556,139.56104 696.33076,139.68264 C 694.21826,139.8751 694.0573,139.69145 695.20576,138.30764 C 697.39242,135.67288 695.85296,135.68066 691.98701,138.30764 C 687.79502,141.15617 685.27039,141.65243 687.26826,139.24514 C 688.32504,137.97179 688.26577,137.81222 686.89326,138.33889 C 684.98513,139.07111 684.70702,137.71263 686.42451,135.99514 C 688.98582,133.43383 686.26902,133.81816 683.11201,136.46389 C 676.89644,141.67282 676.13327,141.83823 669.11201,139.71389 C 661.75072,137.48669 656.81442,134.70488 655.33076,131.93264 C 654.42266,130.23583 654.62964,129.99562 656.79951,130.12014 C 658.16844,130.1987 659.49946,130.96219 659.76826,131.80764 C 660.03706,132.65309 661.20561,133.40803 662.36201,133.49514 C 664.04935,133.62224 664.34529,133.22369 663.89326,131.49514 C 663.3919,129.57793 663.60309,129.64693 665.67451,132.05764 C 666.95448,133.54723 668.99477,134.77639 670.23701,134.77639 C 672.19768,134.77639 672.42965,134.39585 671.92451,131.87014 C 671.16756,128.08537 673.5145,127.04038 675.95576,130.08889 C 677.62363,132.17161 683.24824,133.63445 683.26826,131.99514 C 683.27322,131.5888 681.8107,130.05535 680.01826,128.55764 C 677.53282,126.48091 677.19098,125.82816 678.54951,125.80764 C 679.52928,125.79285 680.5779,126.4233 680.89326,127.24514 C 681.20863,128.06698 681.84513,128.52596 682.29951,128.24514 C 682.75387,127.96433 683.39155,128.18617 683.73701,128.74514 C 684.08247,129.30411 685.57056,129.77639 687.01826,129.77639 C 689.53787,129.77639 689.5639,129.70327 687.70576,128.33889 C 685.83354,126.96419 685.86557,126.87545 688.58076,125.83889 C 690.12906,125.24781 691.92904,124.76463 692.58076,124.74514 C 693.23245,124.72566 692.64327,124.07005 691.26826,123.30764 C 688.83065,121.95604 688.85605,121.92643 692.64326,122.27639 C 695.09671,122.5031 697.05271,122.11691 697.95576,121.21389 C 700.15405,119.0156 698.59565,117.77639 693.64326,117.77639 C 690.87686,117.77639 689.38561,117.36423 689.76826,116.74514 C 691.02804,114.70676 687.33617,114.67193 683.17451,116.68264 C 678.07411,119.14688 677.12754,119.27186 677.89326,117.27639 C 678.25482,116.33418 677.88297,115.77639 676.89326,115.77639 C 675.90357,115.77639 675.53172,115.21859 675.89326,114.27639 C 676.56643,112.52214 676.21883,112.46139 672.92451,113.71389 C 670.78173,114.52858 670.54561,114.40177 670.98701,112.71389 C 671.51244,110.70467 669.83377,110.00183 668.73701,111.77639 C 668.39223,112.33425 666.27466,113.75027 664.01826,114.90139 C 660.39126,116.75175 659.45402,116.84322 655.89326,115.77639 C 652.57325,114.78168 652.14981,114.40344 653.54951,113.62014 C 654.48339,113.09751 655.26827,111.9906 655.26826,111.15139 C 655.26826,109.96767 654.24338,109.68576 650.73701,109.90139 C 647.32585,110.11116 645.75648,109.6874 644.29951,108.21389 C 642.10504,105.9945 639.98302,98.066165 641.36201,97.213895 C 642.21471,96.686895 642.6921,98.817575 642.33076,101.55764 C 642.23823,102.25931 643.11847,104.18026 644.29951,105.83889 C 646.0134,108.24582 646.74272,108.61158 647.86201,107.68264 C 648.63333,107.0425 649.29819,105.34655 649.36201,103.90139 C 649.45374,101.82367 649.60174,101.69491 649.98701,103.27639 C 650.744,106.38368 653.3394,108.77639 655.95576,108.77639 C 657.99911,108.77639 658.18823,108.49941 657.29951,106.83889 C 655.99323,104.39808 655.98458,103.48302 657.26826,104.27639 C 657.81826,104.61631 658.26827,104.42136 658.26826,103.83889 C 658.26826,103.25643 658.71827,102.77639 659.26826,102.77639 C 659.81826,102.77639 660.26827,103.40652 660.26826,104.18264 C 660.26826,105.97583 666.111,110.96776 667.33076,110.21389 C 667.83419,109.90275 668.26827,108.78143 668.26826,107.71389 C 668.26826,106.64635 668.71705,105.77639 669.29951,105.77639 C 669.88197,105.77639 670.09222,105.21389 669.73701,104.52639 C 669.38182,103.83888 669.92445,104.29536 670.95576,105.55764 C 671.98704,106.81992 673.17517,107.52576 673.58076,107.12014 C 673.98638,106.71453 675.29495,106.22799 676.51826,106.05764 C 679.22659,105.68049 683.26827,103.68726 683.26826,102.71389 C 683.26826,102.32356 681.92998,101.45175 680.29951,100.77639 C 678.66906,100.10103 677.43157,99.030265 677.54951,98.401395 C 677.66906,97.764035 676.39783,97.207145 674.70576,97.151395 C 671.20746,97.036145 666.11608,94.660455 668.01826,94.026395 C 668.7043,93.797715 669.26827,92.961815 669.26826,92.182645 C 669.26826,90.596795 664.26802,90.191725 662.70576,91.651395 C 661.19425,93.063635 657.26827,93.987615 657.26826,92.932645 C 657.26826,92.405205 658.40722,91.696175 659.83076,91.338895 C 661.96332,90.803655 662.20329,90.415855 661.20576,89.213895 C 660.21865,88.024505 660.36661,87.771075 661.89326,87.745145 C 664.12082,87.707315 667.88293,85.047285 666.98701,84.151395 C 666.64183,83.806215 664.30171,83.308425 661.79951,83.026395 C 656.79505,82.462325 656.82004,82.478375 658.29951,79.713895 C 659.25894,77.921195 659.50107,77.894305 661.70576,79.338895 C 663.93212,80.797665 664.12115,80.747955 664.73701,78.807645 C 665.09891,77.667395 665.82033,76.992195 666.33076,77.307645 C 666.84116,77.623095 667.26827,77.421355 667.26826,76.838895 C 667.26826,76.256435 668.16827,75.776395 669.26826,75.776395 C 670.36826,75.776395 671.26827,75.136305 671.26826,74.370145 C 671.26826,72.841135 669.15501,71.776395 666.17451,71.776395 C 663.90422,71.776395 663.59868,69.940705 665.73701,69.120145 C 666.55885,68.804775 667.02134,68.217115 666.76826,67.807645 C 666.51519,67.398175 667.43066,66.477725 668.79951,65.745145 C 672.16989,63.941375 671.33607,62.276395 667.04951,62.276395 L 663.51826,62.276395 L 666.04951,58.963895 C 668.02305,56.378045 668.28617,55.408345 667.33076,54.463895 C 666.37868,53.522735 665.40941,54.036105 662.83076,56.838895 C 659.7733,60.162165 659.45561,60.290005 658.39326,58.588895 C 657.76292,57.579555 656.79947,56.776395 656.26826,56.776395 C 655.07947,56.776395 651.92053,62.371925 651.23701,65.713895 C 650.73177,68.184195 641.52771,76.069525 640.14326,75.213895 C 639.74881,74.970105 639.55445,72.300515 639.67451,69.276395 C 639.79456,66.252285 639.49759,63.776395 639.01826,63.776395 C 638.53893,63.776395 638.28506,62.115005 638.45576,60.088895 C 638.71475,57.014955 639.21839,56.270015 641.54951,55.651395 C 643.96593,55.010145 644.27366,55.152715 643.76826,56.745145 C 642.85604,59.619275 645.29529,60.350585 647.23701,57.776395 C 648.26361,56.415395 649.22752,55.904265 649.61201,56.526395 C 650.29352,57.629115 654.26827,57.046205 654.26826,55.838895 C 654.26826,54.909495 649.29026,50.252455 648.42451,50.370145 C 648.05632,50.420195 646.9746,50.245225 646.01826,49.995145 C 643.19652,49.257245 645.03186,47.851485 648.01826,48.463895 C 653.03099,49.491845 657.54933,49.299755 657.98701,48.026395 C 658.22333,47.338895 657.75923,46.776395 656.95576,46.776395 C 656.15227,46.776395 654.94791,46.095345 654.26826,45.276395 C 653.58859,44.457455 652.63092,44.037495 652.14326,44.338895 C 651.65558,44.640305 651.26669,44.533855 651.26826,44.088895 C 651.26984,43.643935 652.62143,42.376395 654.26826,41.276395 C 657.29617,39.253915 658.12777,37.776395 656.23701,37.776395 C 654.41584,37.776395 647.86647,40.805265 646.98701,42.057645 C 646.46657,42.798765 646.36612,42.414125 646.73701,41.088895 C 647.07041,39.897685 646.91175,38.659365 646.39326,38.338895 C 645.30483,37.666215 641.26827,44.098685 641.26826,46.495145 C 641.26826,47.380375 640.97013,47.822015 640.61201,47.463895 C 640.25389,47.105775 639.33121,47.572445 638.58076,48.526395 C 637.39178,50.037815 637.29148,49.628845 637.73701,45.370145 C 638.15093,41.413355 639.09019,39.482575 642.73701,35.213895 C 645.21439,32.314105 647.26827,29.293655 647.26826,28.495145 C 647.26826,26.092075 642.24343,27.672155 641.20576,30.401395 C 639.55472,34.743965 637.73772,33.238405 638.11201,27.838895 C 638.38512,23.898835 638.03002,22.410565 636.36201,20.620145 L 634.26826,18.401395 z M 627.48701,53.495145 C 627.94404,53.522465 629.03076,54.390305 630.26826,55.776395 C 632.3244,58.079425 633.26827,60.157265 633.26826,62.432645 C 633.26826,64.258585 633.07816,65.776395 632.86201,65.776395 C 632.32427,65.776395 631.03548,62.677765 630.58076,60.307645 C 630.37525,59.236435 629.54885,57.642245 628.73701,56.745145 C 627.92515,55.848055 627.26827,54.488405 627.26826,53.745145 C 627.26826,53.559335 627.33467,53.486045 627.48701,53.495145 z M 625.04951,68.182645 C 626.95221,68.322195 631.56716,71.506485 632.29951,73.432645 C 633.6022,76.858965 632.86193,77.497855 630.61201,74.870145 C 629.62539,73.717865 628.2642,72.776395 627.58076,72.776395 C 626.4229,72.776395 623.69235,68.909315 624.42451,68.307645 C 624.56592,68.191435 624.7777,68.162715 625.04951,68.182645 z M 652.36201,76.338895 C 652.6025,76.340275 652.89475,76.382565 653.20576,76.463895 C 654.85517,76.895225 654.4682,77.489145 650.61201,80.432645 C 648.11326,82.339985 645.18828,83.978925 644.14326,84.057645 C 643.09822,84.136365 642.26827,84.530945 642.26826,84.963895 C 642.26826,85.396855 641.76273,85.776395 641.17451,85.776395 C 640.58626,85.776395 640.24873,84.763715 640.42451,83.526395 C 640.70109,81.579235 641.27253,81.306475 644.51826,81.588895 C 647.40389,81.839975 648.26827,81.552105 648.26826,80.338895 C 648.26826,79.471755 648.94327,78.776395 649.76826,78.776395 C 650.59326,78.776395 651.26827,78.143655 651.26826,77.370145 C 651.26826,76.694875 651.64053,76.334745 652.36201,76.338895 z M 640.76826,90.651395 L 643.11201,91.807645 C 644.40074,92.435465 646.53825,92.671135 647.86201,92.338895 C 649.22511,91.996785 650.26827,92.168025 650.26826,92.745145 C 650.26826,93.305625 649.83578,93.776395 649.33076,93.776395 C 648.82574,93.776395 647.76636,94.008585 646.98701,94.307645 C 646.20767,94.606705 644.50267,93.900255 643.17451,92.745145 L 640.76826,90.651395 z M 651.73701,93.120145 C 651.96397,93.153605 652.29831,93.386375 652.76826,93.776395 C 653.88606,94.704085 654.26827,94.719325 654.26826,93.838895 C 654.26826,93.189095 654.75995,92.978735 655.39326,93.370145 C 656.19113,93.863255 655.98249,94.499065 654.70576,95.432645 C 652.1301,97.316015 651.26827,97.111695 651.26826,94.651395 C 651.26826,93.543125 651.35875,93.064375 651.73701,93.120145 z M 666.79951,96.776395 C 667.65697,96.776395 668.10819,97.226395 667.76826,97.776395 C 666.96858,99.070305 665.26827,99.070305 665.26826,97.776395 C 665.26826,97.226395 665.94205,96.776395 666.79951,96.776395 z M 643.26826,112.77639 C 643.81826,112.77639 644.26827,115.02639 644.26826,117.77639 C 644.26826,122.84632 644.11742,123.28182 642.92451,122.08889 C 641.85964,121.02403 642.16537,112.77639 643.26826,112.77639 z M 635.64326,126.12014 C 636.00185,126.05985 636.26826,126.27705 636.26826,126.71389 C 636.26826,127.29635 635.81827,127.77639 635.26826,127.77639 C 633.98688,127.77639 633.98689,127.06833 635.26826,126.27639 C 635.40576,126.19141 635.52373,126.14024 635.64326,126.12014 z M 643.70576,128.24514 C 643.76341,128.23994 643.85603,128.32588 643.92451,128.49514 C 644.19843,129.17217 644.2093,130.52216 643.95576,131.49514 C 643.70222,132.46811 643.47615,131.92639 643.45576,130.27639 C 643.44047,129.03889 643.53281,128.26075 643.70576,128.24514 z M 631.26826,128.77639 C 631.81826,128.77639 632.26827,128.97135 632.26826,129.21389 C 632.26826,129.45643 631.81827,129.93647 631.26826,130.27639 C 630.71826,130.61631 630.26827,130.42135 630.26826,129.83889 C 630.26826,129.25643 630.71827,128.77639 631.26826,128.77639 z M 626.26826,130.77639 C 626.81826,130.77639 627.26827,130.97135 627.26826,131.21389 C 627.26826,131.45643 626.81827,131.93647 626.26826,132.27639 C 625.71826,132.61631 625.26827,132.42134 625.26826,131.83889 C 625.26826,131.25643 625.71827,130.77639 626.26826,130.77639 z M 605.45577,130.80764 C 606.13949,130.87486 606.98841,131.3262 607.64327,132.15139 C 609.67053,134.70597 613.03101,135.04512 614.89327,132.87014 C 616.54091,130.94582 618.89128,130.92074 617.70577,132.83889 C 617.38933,133.35088 617.81829,133.77639 618.64327,133.77639 C 619.46827,133.77639 620.42836,133.32639 620.76827,132.77639 C 621.57527,131.47064 623.26827,131.46265 623.26826,132.77639 C 623.26826,133.34 622.03077,134.28944 620.51827,134.87014 C 619.00577,135.45082 615.19609,136.14987 612.08077,136.43264 C 607.11843,136.88305 606.28211,136.71015 605.33077,134.93264 C 604.73356,133.81673 604.26828,132.42505 604.26827,131.83889 C 604.26827,131.07809 604.77205,130.74042 605.45577,130.80764 z M 697.20576,183.77639 C 697.78822,183.77639 698.26827,184.22639 698.26826,184.77639 C 698.26826,186.05777 697.56021,186.05777 696.76826,184.77639 C 696.42834,184.22639 696.62331,183.77639 697.20576,183.77639 z M 613.61202,195.77639 C 614.22421,195.77639 613.03938,196.67639 610.98702,197.77639 C 607.3552,199.72293 605.26828,200.26516 605.26827,199.27639 C 605.26827,198.6556 612.13537,195.77639 613.61202,195.77639 z M 699.95576,238.49514 C 701.05748,238.48859 702.15321,238.60477 702.83076,238.87014 C 704.19706,239.40525 703.52496,239.63292 700.51826,239.68264 C 698.18076,239.7213 696.26827,239.58102 696.26826,239.37014 C 696.26826,238.83958 698.11955,238.50605 699.95576,238.49514 z M 722.33076,243.90139 C 722.67815,243.88708 723.09482,243.94446 723.45576,244.08889 C 724.25349,244.40811 723.99573,244.63465 722.83076,244.68264 C 721.7766,244.72606 721.18599,244.48369 721.51826,244.15139 C 721.68441,243.98525 721.98337,243.9157 722.33076,243.90139 z M 722.58076,268.80764 C 722.62563,268.79467 722.69951,268.80764 722.76826,268.80764 C 723.31826,268.80764 724.44327,269.24324 725.26826,269.77639 C 726.09326,270.30955 726.31827,270.74513 725.76826,270.74514 C 725.21826,270.74514 724.09327,270.30956 723.26826,269.77639 C 722.54638,269.30987 722.26665,268.89842 722.58076,268.80764 z M 548.39327,309.21389 C 548.86518,309.14354 548.99978,309.35123 548.73702,309.77639 C 548.401,310.32009 547.72332,310.7764 547.20577,310.77639 C 545.76734,310.77639 546.0671,310.03494 547.79952,309.37014 C 548.022,309.28477 548.23597,309.23734 548.39327,309.21389 z M 564.54952,317.80764 L 566.83077,320.24514 L 569.08077,322.68264 L 570.79952,320.05764 C 572.3633,317.67102 572.57973,317.62387 573.48702,319.24514 C 574.23172,320.57584 574.68783,320.68434 575.26827,319.74514 C 575.8186,318.85469 576.22452,319.10385 576.70577,320.62014 C 577.38919,322.77339 579.26828,323.62527 579.26827,321.77639 C 579.26827,321.22639 580.50578,320.77301 582.01827,320.77639 L 584.76827,320.77639 L 581.76827,322.37014 C 579.83454,323.38969 577.246,323.76234 574.51827,323.46389 C 572.19076,323.20923 570.53329,323.42009 570.83077,323.90139 C 571.61924,325.17717 570.12711,324.94448 567.04952,323.33889 C 565.47872,322.51939 564.23791,322.3363 564.04952,322.90139 C 563.87172,323.43478 562.90635,323.5594 561.92452,323.18264 C 560.26538,322.54597 560.30902,322.33669 562.36202,320.15139 L 564.54952,317.80764 z M 587.79952,318.90139 C 588.00996,318.9 588.21291,318.90377 588.39327,318.96389 C 589.14222,319.21354 588.683,319.67278 587.33077,320.02639 C 585.66742,320.46136 585.27622,320.33095 586.01827,319.58889 C 586.4541,319.15306 587.16819,318.90556 587.79952,318.90139 z M 577.64327,360.12014 C 578.00186,360.05985 578.26827,360.27705 578.26827,360.71389 C 578.26827,361.29635 577.81828,361.7764 577.26827,361.77639 C 575.98689,361.77639 575.9869,361.06834 577.26827,360.27639 C 577.40577,360.19141 577.52374,360.14024 577.64327,360.12014 z "
style="fill:#000000"
id="path2652" />
</g>
</svg>
</div>
</body>
body {
margin: 0;
padding: 0;
background: #242424;
overflow: hidden;
font-family: Helvetica, Arial;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.land {
position: absolute;
bottom: 0;
width: 100%;
height: 20%;
background-color: #000000;
z-index: 50;
}
.forest {
}
.tree {
position: absolute;
z-index: 50;
}
.toggles {
position: absolute;
z-index: 100;
left: 20px;
bottom: 20px;
color: #aaaaaa;
display: none;
}
// Best viewed in Chrome
// Click anywhere to make your own lightning!
//=============================
// Consts
//=============================
const HAS_FLASH = true;
const TIME_BETWEEN_LIGHTNING = 1000;
const MAX_POINTS = 120;
const MAX_X_DISTANCE = 9; // 10 - 30
const MAX_Y_DISTANCE = 8; // 10 - 30
const MAX_WIDTH = 3; // 1 - 10
const FADE_INCREMENT = 0.013; // 0 - 0.02
const LIGHTNING_CHANCE = 0.03;
const SHEET_CHANCE = 0.2;
const BRANCH_CHANCE = 0.01;
const FLICKER_CHANCE = 0.023;
const BRANCH_BRANCH_CHANCE = 0.90;
//=============================
// Helpers
//=============================
const getTimestamp = () => {
return (new Date()).getTime();
};
const random = (max = 1, unsigned = false) => {
return unsigned ? ((Math.random() - 0.5) * 2) * max : Math.random() * max;
};
//=============================
// Main
//=============================
const lightningCanvas = document.getElementById('lightning');
const ctx = lightningCanvas.getContext('2d');
const cloudLightningCanvas = document.getElementById('cloudlightning');
const clCtx = cloudLightningCanvas.getContext('2d');
const lightningSheetCanvas = document.getElementById('lightningSheet');
const lsCtx = lightningSheetCanvas.getContext('2d');
let HAS_CLOUD_EFFECTS = true;
let lightning = [];
let cloudLightning = [];
let flashes = [];
let lightningSheets = [];
let stageWidth = 0;
let stageHeight = 0;
let previousTimestamp = getTimestamp();
let previousRender = getTimestamp();
const loop = () => {
ctx.clearRect(0, 0, stageWidth, stageHeight);
clCtx.clearRect(0, 0, stageWidth, stageHeight);
lsCtx.clearRect(0, 0, stageWidth, stageHeight);
lightning.forEach((path) => {
path.animate();
path.render();
});
if (HAS_CLOUD_EFFECTS) {
cloudLightning.forEach((cloud) => {
cloud.animate();
cloud.render();
});
lightningSheets.forEach((lightningSheet) => {
lightningSheet.animate();
lightningSheet.render();
});
} else {
cloudLightning.forEach(cloud => cloud.alpha = 0)
lightningSheets.forEach(cloud => cloud.alpha = 0)
}
if (HAS_FLASH) {
flashes.forEach((path) => {
path.animate();
path.render();
});
}
// create lightning or lightning sheet
if (
random() < LIGHTNING_CHANCE &&
getTimestamp() - previousTimestamp > TIME_BETWEEN_LIGHTNING
) {
if (random() > 0.4) {
lightning.push(new Lightning());
} else {
lightningSheets.push(new LightningSheet());
}
previousTimestamp = getTimestamp();
}
lightning = lightning.filter(path => path.alpha > 0);
cloudLightning = cloudLightning.filter(cloud => cloud.alpha > 0);
flashes = flashes.filter(sheet => sheet.alpha > 0);
lightningSheets = lightningSheets.filter(sheet => sheet.alpha > 0);
requestAnimationFrame(loop);
};
class Lightning {
constructor(ox, oy, width, isBranch = false, branchDirection) {
const x = ox || (random(stageWidth));
const y = oy || (40 + random(100));
let newCloud;
this.paths = [];
this.red = 255;
this.green = 255;
this.blue = 255;
this.alpha = 1;
this.hasEnded = false;
this.width = width || random(MAX_WIDTH) + 1;
this.isBranch = isBranch;
this.xDeviation = isBranch ? 1.3 : 1;
this.branchDirection = branchDirection || (Math.random() - 0.5) * 2;
this.flickerCount = 0;
this.clouds = [];
this.paths.push({
x,
y
});
if (HAS_FLASH) {
flashes.push(new Flash(this.width));
}
if (!this.isBranch) {
newCloud = new CloudLightning(x, y, this.width);
cloudLightning.push(newCloud);
this.clouds.push(newCloud);
}
if (this.isBranch) {
this.width = 1;
}
}
animate() {
const newLines = 3 + random(5);
const branchChance = this.isBranch ? BRANCH_BRANCH_CHANCE : BRANCH_CHANCE;
if (!this.hasEnded) {
const previousPoint = this.getLastPoint();
let lastX = previousPoint.x;
let lastY = previousPoint.y;
let newX, newY;
let xDirection;
// add new extensions
for (let i = 0; i < newLines; i++) {
xDirection = (this.isBranch ? this.branchDirection : (Math.random() - 0.5) * 2);
newX = lastX + xDirection * MAX_X_DISTANCE * this.xDeviation;
newY = lastY + random(MAX_Y_DISTANCE) + 2;
lastX = newX;
lastY = newY;
this.paths.push({
x: newX,
y: newY
});
if (this.isBranch && random() < 0.03) {
lightning.push(new Lightning(lastX, lastY, this.width, true));
}
}
// when to stop extending
this.hasEnded =
lastY / stageHeight > 0.8 ||
(random() > 0.6 && this.paths.length > MAX_POINTS * 3/4) ||
this.paths.length > MAX_POINTS ||
(this.isBranch && this.paths.length > 5)
;
// create branches
if (
random() > branchChance &&
this.paths.length > 5 &&
this.paths.length < MAX_POINTS * 2/3
) {
lightning.push(new Lightning(lastX, lastY, this.width, true));
}
}
// fade out
if (this.alpha > 0) {
this.alpha -= FADE_INCREMENT;
// fade out purple
if (this.alpha < 0.5) {
this.green -= 4.5;
}
if (this.isBranch) {
this.alpha -= FADE_INCREMENT / 2;
}
}
// cool flicker
if (
!this.isBranch &&
random() < FLICKER_CHANCE &&
this.flickerCount < 2 &&
this.alpha > 0.3
) {
this.alpha = 1;
this.green = 240;
this.flickerCount++;
this.clouds.map((cloud) => {
cloud.alpha = random(0.6) + 0.3;
});
}
if (
(this.isBranch && (this.flickerCount > 0)) ||
this.alpha < 0
) {
this.alpha = 0;
}
}
render() {
const colour = this.getColour();
ctx.beginPath();
ctx.strokeStyle = colour;
ctx.lineWidth = this.width;
//if (this.flickerCount === 0) {
// ctx.shadowBlur = this.width * 3;
// ctx.shadowColor = colour;
//}
this.paths.forEach((path) => {
ctx.lineTo(path.x, path.y);
});
ctx.stroke();
}
getColour(red, green, blue, alpha) {
return `rgba(${red || this.red}, ${green || this.green}, ${blue || this.blue}, ${alpha || this.alpha})`;
}
getLastPoint() {
if (this.paths.length > 0) {
const lastPoint = this.paths[this.paths.length - 1];
return {
x: lastPoint.x,
y: lastPoint.y
};
} else {
return {x: 0, y: 0};
}
}
}
class Flash {
constructor(flash = 1) {
this.alpha = 0.09 * flash;
}
animate() {
this.alpha -= FADE_INCREMENT * 2;
}
render() {
ctx.beginPath();
ctx.fillStyle = `rgba(50, 48, 51, ${this.alpha})`;
ctx.fillRect(0, 0, stageWidth, stageHeight);
}
}
class LightningSheet {
constructor(x, y, isRoot = true) {
this.alpha = random(0.6) + 0.2;
this.x = x || random(stageWidth);
this.y = y || random(stageHeight * 0.6) - 100;
this.size = random(50) + 40;
// size proportionately to the horizon to create perspective
this.size = (1 - (this.y / stageHeight * 0.6)) * this.size;
if (isRoot) {
let sheetX, sheetY;
for (let i = 0; i < random(12) + 4; i++) {
sheetX = this.x + random(300, true);
sheetY = this.y + random(80, true);
lightningSheets.push(new LightningSheet(sheetX, sheetY, false));
}
}
}
animate() {
this.alpha -= FADE_INCREMENT * 0.8;
if (
this.alpha < 0.3 &&
random() < 0.025
) {
this.alpha += random(0.4);
}
}
render() {
lsCtx.save();
lsCtx.scale(2, 1);
lsCtx.beginPath();
lsCtx.arc(this.x / 2, this.y, this.size, 2 * Math.PI, false);
lsCtx.closePath();
lsCtx.restore();
lsCtx.filter = `blur(${this.size}px)`;
lsCtx.fillStyle = `rgba(100, 100, 100, ${this.alpha})`;
lsCtx.fill();
lsCtx.shadowColor = '#999999';
lsCtx.shadowBlur = this.size;
}
}
class CloudLightning {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size * 3 * random(2) + 10;
this.alpha = 1;
}
animate() {
this.alpha -= FADE_INCREMENT;
}
render() {
clCtx.save();
clCtx.scale(2.5, 1);
clCtx.beginPath();
clCtx.arc(this.x / 2.5, this.y, this.size, 2 * Math.PI, false);
clCtx.restore();
clCtx.filter = `blur(${this.size}px)`;
clCtx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
clCtx.fill();
clCtx.shadowColor = '#eeeeff';
clCtx.shadowBlur = (this.size * 8) + 50;
}
}
//=============================
// Setup
//=============================
const updateCanvasSize = () => {
stageWidth = window.innerWidth;
stageHeight = window.innerHeight;
lightningCanvas.width = stageWidth;
lightningCanvas.height = stageHeight;
cloudLightningCanvas.width = stageWidth;
cloudLightningCanvas.height = stageHeight;
lightningSheetCanvas.width = stageWidth;
lightningSheetCanvas.height = stageHeight * 0.8;
};
$(window).on('mousedown', (e) => {
lightning.push(new Lightning(e.clientX, e.clientY));
});
updateCanvasSize();
$(window).resize(updateCanvasSize);
// create forest
const $tree = $('.tree');
for (let i = 0; i < 150; i++) {
$tree.clone().appendTo('body').css({
top: `${random(40) + 30}%`,
left: random(stageWidth * 0.7, true),
transform: `scale(${random(0.5) + 0.5}) scaleX(${random() > 0.5 ? -1 : 1})`,
display: 'inline'
});
}
// watch toggle
$('#cloudInput').on('click', function () {
HAS_CLOUD_EFFECTS = $(this).is(':checked');
});
setTimeout(() => {
$('.toggles').fadeIn();
}, 6000);
//=============================
// Run it!
//=============================
lightning.push(new Lightning(400, 100));
loop();
Also see: Tab Triggers