cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

            
              <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>
            
          
!
            
              @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;
}
            
          
!
            
              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 + Math.random() * 20) };
		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);
}


//// =========
//
//   Below is some old code from Stick Drawer
//
//   https://codepen.io/steveg3003/pen/vXmXbY
//
//// =========

if(window.CP && window.CP.PenTimer) window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;

var SVG = Snap('#svg');
var container = $('.container');
var sizes = {};
sizes.container = {width: 0, height: 0};

var colors = {
	stick: {
		dark : '#4C3E26',
		base : '#755F3B',
		light: ['#F9ECA9', '#EFC900', '#D79700', '#D0BB48'],
		inside: '#937B55'
	},
	leaf: {
		light: '#46611F',
		base: '#3A5019',
		dark: '#324516'
	}
}

var stickStep = 30;
var drawRight = 0;
var stickThickness = 20;

onResize();

var randomness = [];
var specials = [];
var drawing = [];
var drawPath = SVG.path().attr({
  	fill: "none",
  	stroke: "#ff0000",
  	strokeWidth: 0,
	strokeDasharray: '5 5'
});

var stick = SVG.group();
var stickBack;
var stickFront;
var stickEnd;
var stickBase = stick.path().attr({
  	fill: colors.stick.base,
  	stroke: "#000000",
  	strokeWidth: 0
});

var autoStickSpeed = 0;
var autoStick = [];
var autoStickMarginWidth = 60;
var autoStickMarginHeight = 10;
var count = Math.round((sizes.container.width - (autoStickMarginWidth * 2)) / (stickStep ) + 4)

for(var i = 0; i <count; i++)
{
	if(i == 0)
	{
		var x = autoStickMarginWidth;
		var y = sizes.container.height - 50;
		autoStick.push([x, y])
		startDrawing({offsetX: x , offsetY: y, auto: true})
	}
	else
	{
		
		var newY = autoStick[i-1][1] + (Math.random() * 10) - 5;
		if(newY < autoStickMarginHeight) newY = autoStickMarginHeight;
		else if(newY > sizes.container.height - autoStickMarginHeight) newY = sizes.container.height - autoStickMarginHeight
		
		autoStick.push([autoStickMarginWidth + (i*stickStep),  newY] )
		draw({offsetX: autoStickMarginWidth + (i*stickStep), offsetY: newY});
		
	}
}

//drawAutoStick(true)

drawAutoStick();

function drawAutoStick(first)
{
	drawAll();
	setTimeout(drawAutoStick, 50 + Math.random() * 50);
}

function startDrawing(e)
{
	console.log('startDrawing', e)
	drawing = [[e.offsetX, e.offsetY]];
	randomness = [[0, 0, 0, 0]];
	specials = [null];
	if(!e.auto)
	{
		container.on('mousemove', draw);
		container.on('mouseup', stopDrawing);
	}
}

function draw(e)
{
	console.log(e)
	if(drawing.length == 1 && e.offsetX != drawing[0][0])
	{
		drawRight = e.offsetX > drawing[0][0] ? true : false;
	}
	
	console.log(drawing)
	var oldX = drawing[drawing.length - 1][0];
	var newX = e.offsetX;
	
	if((drawRight && newX - oldX > stickStep) || (!drawRight && oldX - newX > stickStep)) 
	{
		
		
		
		
		drawing.push([e.offsetX, e.offsetY]);
		randomness.push([Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5])
		specials.push(null);
		
		
		drawAll();
	}
}

function drawAll()
{
	drawStick();
		drawLine();
		
		if(stickBack) stickBack.remove();
		stickBack = stick.group();
		
		//drawSpecials(['twig_back', 'leaf_back'], stickBack);
		
		for(var i = 0; i <= 10; i++ )
		{
			drawGrain(stickBack, drawPath, stickThickness - ((stickThickness / 100) * 20));
		}
		
		if(stickEnd) stickEnd.remove();
		stickEnd = stick.group();
		
		drawStickEnd();
		
		if(stickFront) stickFront.remove();
		stickFront = stick.group();
		
		
		
		for(var i = 0; i <= 10; i++ )
		{
			drawGrain(stickFront, drawPath, stickThickness - ((stickThickness / 100) * 20));
		}
		
		//drawSpecials(['twig_front', 'leaf_front'], stickFront);
}

function stopDrawing(e)
{
	container.off('mousemove');
	//container.off('mousedown');
	container.off('mouseup');
}

function drawLine()
{
	var lineStr = '';
	for(var i = 0; i < drawing.length; i++)
	{
		lineStr += drawing[i].join(',') + ' ';
	}
	drawPath.attr('d',"M" + lineStr)
}

function drawStick()
{
	var stickStr = '';
	var i;
	for(i = 0; i < drawing.length; i++)
	{
		stickStr += getStickPathPoint(drawing[i][0], drawing[i][1], -stickThickness, randomness[i][0], randomness[i][1]).join(',') + ' ';
	}
	
	for(i = drawing.length - 1; i >= 0; i--)
	{
		stickStr += getStickPathPoint(drawing[i][0], drawing[i][1], stickThickness, randomness[i][2], randomness[i][3]).join(',') + ' ';
	}
	
	stickBase.attr('d',"M" + stickStr + ' Z')
}

function getStickEnd(i, yOffset)
{
	var newString = ''
	var curve = i > 0 ? stickThickness : -stickThickness;
	newString += 'Q' + getStickPathPoint(drawing[i][0] + curve, drawing[i][1], 0, 0, 0) + ' ';
	newString += '' + getStickPathPoint(drawing[i][0], drawing[i][1], yOffset, randomness[i][0], randomness[i][1]).join(',') + ' ';
	return newString;
}

function getStickPathPoint(x, y, yOffset, xRandom, yRandom)
{
	var x = x + (xRandom * 20);
	var y = y + yOffset + (yRandom * 10);
	
	return [x, y];
}

function getLineColor(offset, range)
{
	var range = ((range * 2) / 3) / 2;
	
	if(offset > range || Math.random() < 0.02) return colors.stick.dark;
	if(offset < -range || Math.random() < 0.1) return colors.stick.light[Math.floor(Math.random() * colors.stick.light.length)];
	return colors.stick.base;
}

function drawGrain(holder, path, offset)
{
	
	var lengthChunks = 20;
	var length = path.getTotalLength();
	var count = length / lengthChunks;
	
	var toReturn = [];
	
	// get points along the path
	
	var points = [];
	for(var i = 0; i < count; i++)
	{
		
		var p = path.getPointAtLength( lengthChunks * i );
		points.push([p.x, p.y]);
	}
	
	// group points into chunks
	
	var chunks = [[]];
	var translateY = (Math.random() * (offset * 2)) - offset;
	var grainColors = [getLineColor(translateY, offset)];
	
	while(points.length)
	{
		
		if(chunks[0].length > 2 && points.length > 2 && Math.random() < 0.2)
		{
			translateY = (Math.random() * (offset * 2)) - offset;
			chunks.unshift([]);
			grainColors.unshift(getLineColor(translateY, offset));
		}
		var toAdd = points.shift();
		toAdd[1] += translateY;
		if(drawRight) toAdd[0] -= offset - Math.abs(translateY)
		else toAdd[0] += offset - Math.abs(translateY)
		chunks[0].push(toAdd);
	}
	
	// make path strings from chunks
	
	for(var i = 0; i < chunks.length; i++)
	{
		var pathString = 'M'
		for(var j = 0; j < chunks[i].length; j++)
		{
			pathString += chunks[i][j].join(',') + ' ';
		}
		
		var grain = holder.path(pathString)
			.attr({
				fill: 'none',
				stroke: grainColors[i],
				strokeWidth: 4 + (Math.random() * 8),
				'stroke-linecap': "round"
			})
		//toReturn.push(pathString);
	}
	
	return toReturn;
}

function drawStickEnd()
{
	var point = drawing[drawing.length - 1];
	stickEnd.ellipse(point[0] + (drawRight ? -3 : 3), point[1], stickThickness / 1.5, stickThickness)
		.attr({
			fill: colors.stick.inside
		})
	
	
		stickEnd.ellipse(point[0] + (drawRight ? -3 : 3), point[1], 2, 3)
			.attr({
				fill: colors.stick.light,
			opacity: Math.random()
			})
	
	var endCurve = 'M';
	endCurve += point[0] + ',' + (point[1] - (stickThickness / 2));
	endCurve += ' Q' + (point[0] + (stickThickness / (2 + Math.random())) + (drawRight ? -3 : 3)) + ',' + (point[1] - (stickThickness / 2));
	endCurve += ' ' + (point[0] + (stickThickness / (2 + Math.random())) + (drawRight ? -3 : 3)) + ',' + point[1];
	endCurve += ' Q' + (point[0] + (stickThickness / (2 + Math.random())) + (drawRight ? -3 : 3)) + ',' + (point[1] + (stickThickness / 2));
	endCurve += ' ' + (point[0] + (drawRight ? -3 : 3)) + ',' + (point[1] + (stickThickness / 2));
	endCurve += ' Q' + (point[0] - (stickThickness / (2 + Math.random())) + (drawRight ? -3 : 3)) + ',' + (point[1] + (stickThickness / 2));
	endCurve += ' ' + (point[0] - (stickThickness / (2 + Math.random())) + (drawRight ? -3 : 3)) + ',' + point[1];
	
	stickEnd.path(endCurve)
			.attr({
				fill: 'none',
				stroke: colors.stick.light,
				strokeWidth: 1 + (Math.random() * 2)
			})
}

function onResize()
{
	sizes.container.width = 400;
	sizes.container.height = 800;
	
	console.log('sizes', sizes)
	
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console