Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

Add External Stylesheets/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

Packages

Add Packages

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.

Powered by Algolia
About Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="container">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg" width="400" height="800" preserveAspectRatio viewBox="0 0 400 800">
<!-- 		<g class="stick"><path fill="#755f3b" stroke="#000000" style="stroke-width: 0;" d="M17,391 60.71960788084285,387.81224876768823 81.87530614991573,393.78355757359463 111.06016833498047,390.9824894978165 146.02476279003898,394.38035989842433 176.22624981592443,397.26487968747256 209.25667207563777,397.3508444778683 239.0850989763014,393.8511616906662 236.07813329701645,439.1737284352329 205.98443854598082,435.756989366302 183.70701591322256,434.3768836402488 153.7689062626052,433.73883716659543 107.55482690655151,429.1965372336567 79.71843669741214,432.55495790066516 54.1840364387934,429.4786986787426 17,431  Z"></path><g><g><path d="M57.67166693113173,420.89753117576885 69.17301451162251,424.0280832850984 77.08594662359798,419.85760789688754 84.6567889582607,422.5163974617039 " fill="none" stroke="#4c3e26" transform="matrix(1,0,0,1,1,5)" style="stroke-width: 6.71799; stroke-linecap: round;"></path><path d="M57.67166693113173,420.89753117576885 69.17301451162251,424.0280832850984 77.08594662359798,419.85760789688754 84.6567889582607,422.5163974617039 " fill="none" stroke="#836a41" style="stroke-width: 9.35988; stroke-linecap: round;"></path><path d="M101.74611222880944,417.9244561493375 Q142.9885336569981,413.16355767393463 109.3694263011207,412.99441971237064  Z" fill="#3a5019"></path><path d="M100.70476992033223,416.0755651388457 Q88.17757321943583,412.58552197938565 107.98355652253625,412.2326790109632  Z" fill="#46611f"></path><path d="M99.69635319055196,414.7914811787417 Q117.55382146894756,414.14981816691466 109.6494958253676,412.1117340619812 " fill="none" stroke="#324516" style="stroke-width: 4;"></path><path d="M122.33350306671245,421.5813314695925 122.19401402169834,408.5358616482656 133.215325299679,395.9123397526672 123.8062437292305,387.5041403491884 " fill="none" stroke="#4c3e26" transform="matrix(1,0,0,1,1,5)" style="stroke-width: 6.96953; stroke-linecap: square;"></path><path d="M122.33350306671245,421.5813314695925 122.19401402169834,408.5358616482656 133.215325299679,395.9123397526672 123.8062437292305,387.5041403491884 " fill="none" stroke="#836a41" style="stroke-width: 8.99267; stroke-linecap: round;"></path></g><path d="M9.152721600259746,402.8540180161343 29.148537582050402,402.8540180161343 49.146559487680996,402.8540180161343 69.14256153570219,402.8540180161343 89.15264387580297,402.8540180161343 109.15162868949315,402.8545644715176 129.0527665497813,404.7804810386423 149.00057408295302,406.1070063618225 168.98933548282562,406.6781138303903 188.99131910817428,406.8540180161343 208.9792055037125,406.8540180161343 228.9808291395913,406.8540180161343 " fill="none" stroke="#836a41" style="stroke-width: 8.93462; stroke-linecap: round;"></path><path d="M1.2245984130236138,410.78214120337043 21.22041439481427,410.78214120337043 41.218436300444864,410.78214120337043 61.21443834846605,410.78214120337043 81.22452068856683,410.78214120337043 101.22350550225701,410.78268765875373 121.12464336254516,412.7086042258784 141.07245089571688,414.03512954905864 161.06121229558948,414.6062370176264 181.06319592093814,414.78214120337043 201.05108231647637,414.78214120337043 221.05270595235515,414.78214120337043 " fill="none" stroke="#755f3b" style="stroke-width: 7.77579; stroke-linecap: round;"></path><path d="M14.73120792196383,397.27553169443024 34.727023903754485,397.27553169443024 54.72504580938508,397.27553169443024 74.72104785740626,397.27553169443024 94.73113019750704,397.27553169443024 114.73011501119723,397.27607814981354 134.63125287148537,399.2019947169382 154.5790604046571,400.52852004011845 174.5678218045297,401.09962750868624 194.56980542987836,401.27553169443024 214.55769182541658,401.27553169443024 234.55931546129537,401.27553169443024 " fill="none" stroke="#836a41" style="stroke-width: 6.91865; stroke-linecap: round;"></path><path d="M91.7028824933791,400.30377939855816 111.70186730706928,400.30432585394146 131.60300516735742,402.2302424210661 151.55081270052915,403.5567677442464 171.53957410040175,404.12787521281416 191.5415577257504,404.30377939855816 211.52944412128863,404.30377939855816 231.53106775716742,404.30377939855816 " fill="none" stroke="#836a41" style="stroke-width: 8.01257; stroke-linecap: round;"></path><path d="M8.28288326537016,418.27614364897613 28.278699247160816,418.27614364897613 48.27672115279141,418.27614364897613 68.27272320081259,418.27614364897613 " fill="none" stroke="#4c3e26" style="stroke-width: 11.7425; stroke-linecap: round;"></path><path d="M70.95294304253659,401.0436365092999 90.96302538263737,401.0436365092999 110.96201019632755,401.0441829646832 130.8631480566157,402.9700995318079 150.81095558978743,404.2966248549881 170.79971698966003,404.8677323235559 190.80170061500868,405.0436365092999 210.7895870105469,405.0436365092999 230.7912106464257,405.0436365092999 " fill="none" stroke="#836a41" style="stroke-width: 6.55261; stroke-linecap: round;"></path><path d="M4.614007416914404,407.3927321994796 24.60982339870506,407.3927321994796 44.607845304335655,407.3927321994796 " fill="none" stroke="#755f3b" style="stroke-width: 6.48591; stroke-linecap: round;"></path><path d="M191.2081611179171,404.6371760063915 211.1960475134553,404.6371760063915 231.1976711493341,404.6371760063915 " fill="none" stroke="#836a41" style="stroke-width: 4.15662; stroke-linecap: round;"></path><path d="M8.329366745917845,418.3226271295238 28.3251827277085,418.3226271295238 48.323204633339095,418.3226271295238 68.31920668136027,418.3226271295238 88.32928902146105,418.3226271295238 108.32827383515124,418.3231735849071 128.22941169543938,420.2490901520318 148.1772192286111,421.57561547521203 168.1659806284837,422.1467229437798 " fill="none" stroke="#4c3e26" style="stroke-width: 10.8521; stroke-linecap: round;"></path><path d="M135.56397651140836,398.2692710770152 155.51178404458008,399.59579640019547 175.50054544445268,400.16690386876326 195.50252906980134,400.34280805450726 215.49041546533957,400.34280805450726 235.49203910121835,400.34280805450726 " fill="none" stroke="#836a41" style="stroke-width: 6.28456; stroke-linecap: round;"></path><path d="M74.75029205902656,424.7537125071901 94.76037439912734,424.7537125071901 114.75935921281753,424.7542589625734 " fill="none" stroke="#4c3e26" style="stroke-width: 9.6952; stroke-linecap: round;"></path><path d="M4.443439572698928,414.4366999563049 24.439255554489584,414.4366999563049 44.43727746012018,414.4366999563049 " fill="none" stroke="#755f3b" style="stroke-width: 6.22903; stroke-linecap: round;"></path><path d="M146.75303440075265,408.35454604402287 166.74179580062525,408.92565351259066 186.7437794259739,409.10155769833466 206.73166582151214,409.10155769833466 226.73328945739092,409.10155769833466 " fill="none" stroke="#836a41" style="stroke-width: 4.40418; stroke-linecap: round;"></path><path d="M84.84179135426008,407.1648705376772 104.84077616795027,407.1654169930605 124.74191402823841,409.09133356018515 " fill="none" stroke="#836a41" style="stroke-width: 7.94203; stroke-linecap: round;"></path><path d="M4.526374969162468,407.48036464723157 24.522190950953124,407.48036464723157 44.52021285658372,407.48036464723157 64.51621490460491,407.48036464723157 " fill="none" stroke="#755f3b" style="stroke-width: 10.1163; stroke-linecap: round;"></path><path d="M113.24730416588338,398.7588889951274 133.14844202617152,400.68480556225205 153.09624955934325,402.0113308854323 173.08501095921585,402.5824383540001 193.0869945845645,402.7583425397441 213.07488098010273,402.7583425397441 233.07650461598152,402.7583425397441 " fill="none" stroke="#836a41" style="stroke-width: 5.38027; stroke-linecap: round;"></path><path d="M5.034909590665741,406.9718300257283 25.030725572456397,406.9718300257283 45.02874747808699,406.9718300257283 65.02474952610817,406.9718300257283 85.03483186620895,406.9718300257283 " fill="none" stroke="#755f3b" style="stroke-width: 4.98323; stroke-linecap: round;"></path><path d="M121.0180494315271,412.81519815689643 140.96585696469884,414.1417234800767 160.95461836457144,414.71283094864447 180.9566019899201,414.88873513438847 200.94448838545833,414.88873513438847 220.94611202133711,414.88873513438847 " fill="none" stroke="#755f3b" style="stroke-width: 11.7995; stroke-linecap: round;"></path><path d="M5.108347667949268,415.1016080515552 25.104163649739924,415.1016080515552 45.10218555537052,415.1016080515552 65.0981876033917,415.1016080515552 85.10826994349247,415.1016080515552 105.10725475718266,415.1021545069385 " fill="none" stroke="#755f3b" style="stroke-width: 8.51198; stroke-linecap: round;"></path><path d="M125.53608680878816,408.29716077963536 145.48389434195988,409.6236861028156 165.47265574183248,410.1947935713834 185.47463936718114,410.3706977571274 205.46252576271937,410.3706977571274 225.46414939859815,410.3706977571274 " fill="none" stroke="#755f3b" style="stroke-width: 8.9925; stroke-linecap: round;"></path><path d="M70.36228534578214,420.36570579394566 90.37236768588292,420.36570579394566 110.3713524995731,420.36625224932897 " fill="none" stroke="#4c3e26" style="stroke-width: 6.3383; stroke-linecap: round;"></path><path d="M6.815658577641969,405.1910810387521 26.811474559432625,405.1910810387521 46.80949646506322,405.1910810387521 " fill="none" stroke="#836a41" style="stroke-width: 8.5923; stroke-linecap: round;"></path></g><g><ellipse cx="242" cy="415" rx="13.333333333333334" ry="20" fill="#937b55"></ellipse><ellipse cx="242" cy="415" rx="2" ry="3" fill="#836a41" style="opacity: 0.189143;"></ellipse><path d="M245,405 Q248.77903082626315,405 250.7521767727837,415 Q250.46103273139653,425 242,425 Q234.90861447277217,425 232.30100345738043,415" fill="none" stroke="#836a41" style="stroke-width: 2.26464;"></path></g><g><path d="M76.97111638666773,395.02546316516873 96.98119872676851,395.02546316516873 116.9801835404587,395.02600962055203 136.88132140074686,396.9519261876767 156.82912893391858,398.27845151085694 176.81789033379118,398.8495589794247 196.81987395913984,399.02546316516873 216.80776035467807,399.02546316516873 236.80938399055685,399.02546316516873 " fill="none" stroke="#836a41" style="stroke-width: 8.14814; stroke-linecap: round;"></path><path d="M5.900412252280923,415.8936726358869 25.89622823407158,415.8936726358869 45.89425013970217,415.8936726358869 " fill="none" stroke="#755f3b" style="stroke-width: 7.0365; stroke-linecap: round;"></path><path d="M2.972305670696933,409.0344339456971 22.96812165248759,409.0344339456971 42.96614355811818,409.0344339456971 62.962145606139366,409.0344339456971 82.97222794624014,409.0344339456971 102.97121275993032,409.0349804010804 122.87235062021847,410.9608969682051 142.8201581533902,412.2874222913853 162.8089195532628,412.8585297599531 182.81090317861145,413.0344339456971 202.79878957414968,413.0344339456971 222.80041321002847,413.0344339456971 " fill="none" stroke="#836a41" style="stroke-width: 11.0639; stroke-linecap: round;"></path><path d="M171.4835782554492,404.18387105776674 191.48556188079786,404.35977524351074 211.4734482763361,404.35977524351074 231.47507191221487,404.35977524351074 " fill="none" stroke="#836a41" style="stroke-width: 11.8761; stroke-linecap: round;"></path><path d="M113.07073861571254,423.06563836546843 132.9718764760007,424.9915549325931 152.9196840091724,426.31808025577334 " fill="none" stroke="#4c3e26" style="stroke-width: 7.16697; stroke-linecap: round;"></path><path d="M1.816493483894817,410.1902461324992 21.812309465685473,410.1902461324992 41.81033137131607,410.1902461324992 61.80633341933725,410.1902461324992 81.81641575943803,410.1902461324992 " fill="none" stroke="#755f3b" style="stroke-width: 6.57671; stroke-linecap: round;"></path><path d="M173.47853277999462,402.1889165332213 193.48051640534328,402.3648207189653 213.4684028008815,402.3648207189653 233.4700264367603,402.3648207189653 " fill="none" stroke="#836a41" style="stroke-width: 7.73577; stroke-linecap: round;"></path><path d="M116.05372498007237,395.95246818093835 135.95486284036053,397.878384748063 155.90267037353226,399.20491007124326 " fill="none" stroke="#836a41" style="stroke-width: 11.2399; stroke-linecap: round;"></path><path d="M10.376001445650054,401.630738170744 30.37181742744071,401.630738170744 50.369839333071305,401.630738170744 70.36584138109248,401.630738170744 90.37592372119326,401.630738170744 " fill="none" stroke="#836a41" style="stroke-width: 4.84219; stroke-linecap: round;"></path><path d="M174.2313721896819,428.212114504978 194.23335581503056,428.388018690722 214.2212422105688,428.388018690722 234.22286584644758,428.388018690722 " fill="none" stroke="#4c3e26" style="stroke-width: 11.5025; stroke-linecap: round;"></path><path d="M3.156035286536259,408.85070432985776 23.151851268326915,408.85070432985776 43.14987317395751,408.85070432985776 63.14587522197869,408.85070432985776 83.15595756207946,408.85070432985776 103.15494237576965,408.85125078524106 123.0560802360578,410.7771673523657 143.00388776922952,412.103692675546 " fill="none" stroke="#755f3b" style="stroke-width: 10.418; stroke-linecap: round;"></path><path d="M102.86292066175366,409.1432724992571 122.76405852204181,411.06918906638174 142.71186605521353,412.395714389562 162.70062745508613,412.9668218581298 182.7026110804348,413.1427260438738 202.69049747597302,413.1427260438738 222.6921211118518,413.1427260438738 " fill="none" stroke="#755f3b" style="stroke-width: 11.4633; stroke-linecap: round;"></path><path d="M13.643168884871137,423.6364292684771 33.638984866661794,423.6364292684771 53.63700677229239,423.6364292684771 73.63300882031356,423.6364292684771 93.64309116041434,423.6364292684771 " fill="none" stroke="#4c3e26" style="stroke-width: 4.96297; stroke-linecap: round;"></path><path d="M67.19587048767059,404.80070906416586 87.20595282777137,404.80070906416586 107.20493764146156,404.80125551954916 127.1060755017497,406.7271720866738 147.05388303492143,408.05369740985407 167.04264443479403,408.62480487842186 187.04462806014268,408.80070906416586 207.0325144556809,408.80070906416586 227.0341380915597,408.80070906416586 " fill="none" stroke="#836a41" style="stroke-width: 10.7748; stroke-linecap: round;"></path><path d="M13.664394007405392,398.34234560898864 33.66020998919605,398.34234560898864 53.65823189482664,398.34234560898864 " fill="none" stroke="#836a41" style="stroke-width: 11.7482; stroke-linecap: round;"></path><path d="M114.15880455727287,424.1537043070287 134.05994241756102,426.07962087415336 154.00774995073274,427.4061461973336 173.99651135060535,427.9772536659014 193.998494975954,428.1531578516454 213.98638137149223,428.1531578516454 233.98800500737102,428.1531578516454 " fill="none" stroke="#4c3e26" style="stroke-width: 10.4804; stroke-linecap: round;"></path><path d="M10.887844334330737,420.8811047179367 30.883660316121393,420.8811047179367 50.88168222175199,420.8811047179367 70.87768426977317,420.8811047179367 90.88776660987395,420.8811047179367 " fill="none" stroke="#4c3e26" style="stroke-width: 9.12144; stroke-linecap: round;"></path><path d="M147.11578643582104,420.51418268242196 167.10454783569364,421.08529015098975 187.1065314610423,421.26119433673375 207.09441785658052,421.26119433673375 227.0960414924593,421.26119433673375 " fill="none" stroke="#4c3e26" style="stroke-width: 4.40692; stroke-linecap: round;"></path><path d="M12.788544465918505,422.78180484952446 32.78436044770916,422.78180484952446 52.782382353339756,422.78180484952446 72.77838440136094,422.78180484952446 92.78846674146172,422.78180484952446 112.7874515551519,422.78235130490776 132.68858941544005,424.7082678720324 " fill="none" stroke="#4c3e26" style="stroke-width: 5.58094; stroke-linecap: round;"></path><path d="M84.22311680084641,407.78354509109084 104.2221016145366,407.78409154647414 124.12323947482474,409.7100081135988 144.07104700799647,411.03653343677905 164.05980840786907,411.60764090534684 184.06179203321773,411.78354509109084 204.04967842875595,411.78354509109084 224.05130206463474,411.78354509109084 " fill="none" stroke="#755f3b" style="stroke-width: 8.5267; stroke-linecap: round;"></path><path d="M11.585462193316573,400.42127742307747 31.58127817510723,400.42127742307747 51.57930008073782,400.42127742307747 71.575302128759,400.42127742307747 " fill="none" stroke="#836a41" style="stroke-width: 9.4; stroke-linecap: round;"></path><path d="M85.41728084004072,415.4106189481035 105.4162656537309,415.4111654034868 125.31740351401905,417.33708197061145 145.26521104719077,418.6636072937917 165.25397244706338,419.2347147623595 185.25595607241203,419.4106189481035 205.24384246795026,419.4106189481035 225.24546610382905,419.4106189481035 " fill="none" stroke="#755f3b" style="stroke-width: 4.50858; stroke-linecap: round;"></path><path d="M10.65246012179567,420.64572050540164 30.648276103586326,420.64572050540164 50.64629800921692,420.64572050540164 70.6423000572381,420.64572050540164 " fill="none" stroke="#4c3e26" style="stroke-width: 10.5812; stroke-linecap: round;"></path><g></g></g></g> -->
	</svg>
</div>
!

CSS 

              
                @import 'https://fonts.googleapis.com/css?family=Catamaran';

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Catamaran', sans-serif;
}

body {
  background: #222;
  background: linear-gradient(to bottom, #111 , #222);
}

.container
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	text-align: center;
}

svg
{
	z-index: 10;
	//filter: blur(1px);
	height: 100%;
}



.stick
{
	transform: translatex(100px) translatey(360px);
	//filter: brightness(200%);
}

.flame
{
	mix-blend-mode: screen;
}
!

JS 

              
                declare var Snap:any;
declare var TweenMax:any;
declare var TimelineMax:any;
declare var Power2:any;

TweenMax.lagSmoothing(0);
console.clear();

interface point
{
	x: number;
	y: number;
}

class Flame
{
	private group: any;
	private startPoint: Point;
	private endPoint: Point;
	private startThickness: number;
	private endThickness: number;
	private guidePosition: number;
	private frequency: number;
	private amplitude: number;
	private height: number;
	private endHeight: number;
	private y: number;
	private particle: boolean;
	
	private body: any;
	
	id: string;
	
	constructor(svg: any, start:Point, end:Point, width:number, particle:boolean) 
	{
		this.id = String(Math.round(Math.random() * 999999999999999));
		this.group = svg.group();
		this.group.addClass('flame');
		this.startPoint = start;
		this.endPoint = end;
		this.startThickness = width + Math.round(Math.random() * 50);
		this.endThickness = 10 + Math.round(Math.random() * 10);
		this.guidePosition = Math.random() * 100;
		this.frequency = 0.01 + Math.random() * 0.008;
		this.amplitude = 40 + Math.random() * 40;
		this.height = 500;
		this.endHeight = 100 + Math.round(Math.random() * 400);
		this.y = Math.random() * 100;
		this.particle = particle;
		
		let colors:string[] = ['#F9ECA9', '#EFC900', '#D79700', '#D0BB48'];
			
		this.body = this.group.path().attr(
        {
            fill: this.particle ? '#F9ECA9' : colors[Math.floor(Math.random() * colors.length)],
			opacity: this.particle ? 1 : 0.8,
            stroke: 'none'
        });
		
		this.updateGuide();
    }
	
	remove()
	{
		this.group.remove();
	}

	updateGuide()
	{
		this.guide = [];
		let height: number = this.startPoint.y - this.endPoint.y;
		let widthChange: number = this.startPoint.x - this.endPoint.x;
		let y = this.startPoint.y;
		
		while (y-- >= this.endPoint.y) 
        {        
			var x = this.startPoint.x + (widthChange - (widthChange / height) * y);
            var wave = Math.sin(y * this.frequency + this.guidePosition)
            this.guide.push({y: y, x: x + (wave * this.amplitude / 2 + this.amplitude / 2)})
        }
	}

	start(onComplete:Function)
	{
		if(this.particle) TweenMax.to(this, (0.2 + Math.random()), {y: this.guide.length, height: this.endHeight, position: '+=6', ease:Linear.ease, onComplete: onComplete, onCompleteParams: [this]})
		else TweenMax.to(this, 0.5 + (Math.random()), {y: this.guide.length, height: this.endHeight, position: '+=6', ease:Power2.easeIn, onComplete: onComplete, onCompleteParams: [this]})
	}

	getPointAlongGuide(y:number, offsetXPercentage: number):Point
	{
		if(this.guide.length)
		{
			if(y >= this.guide.length) y = this.guide.length - 1;
			if(y < 0) y = 0;
				
			var thicknessDifference = this.endThickness - this.startThickness;
			var percentageAlongGuide = (y / this.guide.length) * 100;
			var thickness = this.startThickness + ((thicknessDifference / 100) * percentageAlongGuide);
			var xOffset = ((thickness / 2) / 100) * offsetXPercentage;
			return {x: this.guide[y].x + xOffset, y: this.guide[y].y}
		}
		return {x: 0, y: 0};
	}
	
	private drawPath(pathPoints)
	{
    	var points = [];
			
		for(var i = 0; i < pathPoints.length; i++)
		{
			var subPoints = [];
			for(var j = 0; j < pathPoints[i].points.length / 2; j++)
			{
				var p = pathPoints[i].points.slice(j*2, j*2 + 2);
				var point = this.getPointAlongGuide(Math.round(p[1]), p[0])
				subPoints.push(point.x);
				subPoints.push(point.y);
			}
			points.push(pathPoints[i].type + subPoints.join(' ')); 
		}
		
		return points.join(' ') + 'Z';
	}
	
	draw()
	{ 
		
		if(this.height > 0)
		{
			var y = Math.round(this.y)
			var height = Math.round(this.height)
			var heightChunks = height / 6;
			
// 			let xInc = 5;
// 			let yInc = 0.1;

// 			let x = xInc;
// 			let y = yInc;

// 			let flamePoints = [];

// 			for(let i = 0; i < 20; i++)
// 			{
// 				flamePoints.push(x);
// 				flamePoints.push(y);

// 				x += xInc;
// 				y += yInc;
// 			} 

// 			for(let i = 0; i < 20; i++)
// 			{
// 				flamePoints.push(x);
// 				flamePoints.push(y);

// 				x -= xInc;
// 				y += yInc;
// 			} 

// 			for(let i = 0; i < 20; i++)
// 			{
// 				flamePoints.push(x);
// 				flamePoints.push(y);

// 				x -= xInc;
// 				y -= yInc;
// 			} 

// 			for(let i = 0; i < 20; i++)
// 			{
// 				flamePoints.push(x);
// 				flamePoints.push(y);

// 				x += xInc;
// 				y -= yInc;
// 			} 
			
// 			//console.log(flamePoints)
			
			// I want to change this bit, this array could be generated in a loop.
			
			var body = this.particle ? [{type: 'M', points: [0, y]},
										{type: 'L', points: [10, y - heightChunks * 0.2,
									 20, y - heightChunks * 0.4,
									 30, y - heightChunks * 0.6,]}] : [
				{type: 'M', points: [0, y]},
				{type: 'L', points: [10, y - heightChunks * 0.2,
									 20, y - heightChunks * 0.4,
									 30, y - heightChunks * 0.6,
									 40, y - heightChunks * 0.8,
									 50, y - heightChunks * 1,
									 60, y - heightChunks * 1.2,
									 70, y - heightChunks * 1.4,
									 80, y - heightChunks * 1.6,
									 90, y - heightChunks * 1.8,
									 90, y - heightChunks * 2,
									 90, y - heightChunks * 2.2,
									 80, y - heightChunks * 2.4,
									 70, y - heightChunks * 2.6,
									 60, y - heightChunks * 2.8,
									 50, y - heightChunks * 3,
									 40, y - heightChunks * 3.1,
									 30, y - heightChunks * 3.2,
									 20, y - heightChunks * 3.3,
									 10, y - heightChunks * 3.4,
									 0, y - heightChunks * 3.5,
									 -10, y - heightChunks * 3.4,
									 -20, y - heightChunks * 3.3,
									 -30, y - heightChunks * 3.2,
									 -40, y - heightChunks * 3.1,
									 -50, y - heightChunks * 3,
									 -60, y - heightChunks * 2.8,
									 -70, y - heightChunks * 2.6,
									 -80, y - heightChunks * 2.4,
									 -90, y - heightChunks * 2.2,
									 -90, y - heightChunks * 2,
									 -90, y - heightChunks * 1.8,
									 -80, y - heightChunks * 1.6,
									 -70, y - heightChunks * 1.4,
									 -60, y - heightChunks * 1.2,
									 -50, y - heightChunks * 1,
									 -40, y - heightChunks * 0.8,
									 -30, y - heightChunks * 0.6,
									 -20, y - heightChunks * 0.4,
									 -10, y - heightChunks * 0.2,
									 0, y - heightChunks * 0,
									]},
				


			]
			
			this.body.attr({d: this.drawPath(body)})
			
		}
		
	}
}

class StageManager
{
	svg: any;
	size: {width: number, height: number};
	fire: any;

	constructor(svg: any) 
	{
        this.svg = svg;
		this.fire = {};
		this.size = {width: 0, height: 0};
    }

	init()
	{
		window.addEventListener('resize', () => this.onResize(), true);
		this.onResize();
		this.tick();
	}
	
	onResize()
	{
		this.size.width = 400;
		this.size.height = 800;
		
		this.svg
			.attr('width', this.size.width)
			.attr('height', this.size.height)
	}

	addFlame()
	{
		let particle = Math.random() > .8;
		let start:Point = {x: this.size.width / 2, y: this.size.height - (40) };
		let end:Point = {x: (this.size.width / 4) +  Math.random() * (this.size.width / 2), y: particle ? -20 : this.size.height / 3};
		let width:number = this.size.width / 4;
		let flame = new Flame(this.svg, start, end, width, particle);
		flame.start((flame:Flame) => this.removeFlame(flame));
		this.fire[flame.id] = flame;
	}
	
	removeFlame(flame: Flame)
	{
		delete this.fire[flame.id];
		flame.remove();
		flame = null; 
	}

	tick()
	{
		for(let i in this.fire)
		{
			this.fire[i].draw();
		}
		
		requestAnimationFrame(() => this.tick());
	}
}

let stageManager = new StageManager(Snap('svg'));
stageManager.init();

makeFlame();

function makeFlame()
{
	stageManager.addFlame();
	setTimeout(makeFlame, Math.random() * 60);
}
!
999px

Console