<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) };
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);
}
External CSS
This Pen doesn't use any external CSS resources.