<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 696.01 324.22" id="star"><title>Stars</title><g><path d="M109.6,53l4,4,4-4-4-4-4,4m69.1,98.8,4,4,4-4-4-4-4,4M0,190.8l4,4,4-4-4-4-4,4M284.1,212l-1.5-1.6V201l1.5-1.5,1.5,1.5v9.4l-1.5,1.5" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M288.8,207.2h-9.4l-1.5-1.5,1.5-1.5h9.4l1.5,1.5-1.5,1.5" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M241.6,82.2l-1-.5-6.7-6.6L233.85,73l2.15,0,6.7,6.7.08,2.12-1.08.48" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M235,82.2l-1.48-1.52L234,79.6l6.6-6.7,2.15,0-.05,2.15h0L236,81.7l-1,.5M48.6,147.9l-1.5-1.5v-9.5l1.5-1.5,1.5,1.5v9.5l-1.5,1.5" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M53.3,143.2H43.9l-1.5-1.5,1.5-1.5h9.4l1.5,1.5-1.5,1.5m74.2-6.2-10.6-10.6,10.6-10.6,10.6,10.6-10.6,10.5" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M558,205.92,553.11,202l-3,2.93,3.85,5,4-4M257.66,122.61l-4.92-3.93-3,2.93,3.86,5,4-4m194.83,74.5-4.91-3.93-3,2.93,3.86,5,4-4M384.15,97.78l-4.91-3.93-3,2.93,3.85,5,4-4m179-37.62-4.92-3.93-3,2.92,3.85,5,4-4M279.22,36.77l1.48,1.61-.07,9.4-1.51,1.49-1.49-1.51.07-9.4,1.52-1.49" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M274.48,41.54l9.4.07,1.49,1.51-1.51,1.49-9.4-.07L273,43l1.51-1.49M375.56,239.82l1.09.51L383.3,247v2.2l-2.2,0h0l-6.55-6.75-.07-2.12,1.09-.47" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M382.26,239.87l1,.51v2.1l-6.55,6.65-2.15-.07.06-2.15h0l6.65-6.55,1.11-.49" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M514.22,102.68l1.49,1.51-.08,9.5-1.51,1.49-1.49-1.51.08-9.5,1.51-1.49" transform="translate(0 -24.98)" style="fill:#fff252"/><path d="M509.48,107.35l9.4.07,1.49,1.51-1.51,1.49-9.4-.07L508,108.83l1.51-1.48M435.24,113l10.51,10.68-10.68,10.51-10.52-10.68,10.68-10.41" transform="translate(0 -24.98)" style="fill:#fff252"/><polyline points="513.31 144.22 517.31 148.22 521.31 144.22 517.31 140.22 513.31 144.22" style="fill:#fff252"/><polyline points="618.91 152.22 622.91 156.22 626.91 152.22 622.91 148.22 618.91 152.22" style="fill:#fff252"/><polyline points="688.01 251.03 692.01 255.03 696.01 251.03 692.01 247.03 688.01 251.03" style="fill:#fff252"/><polyline points="557.91 247.13 556.41 245.63 556.41 236.13 557.91 234.63 559.41 236.13 559.41 245.63 557.91 247.13" style="fill:#fff252"/><path d="M562.61,267.4h-9.4l-1.5-1.5,1.5-1.5h9.4l1.5,1.5-1.5,1.5m74.2-6.2-10.6-10.6,10.6-10.6,10.6,10.6-10.6,10.5" transform="translate(0 -24.98)" style="fill:#fff252"/><polyline points="59.5 222.03 48.9 211.43 59.5 200.82 70.1 211.43 59.5 221.93" style="fill:#fff252"/><polyline points="180.15 203.18 175.23 199.25 172.26 202.18 176.12 207.15 180.15 203.18" style="fill:#fff252"/><path d="M131.22,270.68l1.49,1.51-.08,9.5-1.51,1.49-1.49-1.51.08-9.5,1.51-1.49" transform="translate(0 -24.98)" style="fill:#fff252"/><polyline points="126.48 250.37 135.88 250.44 137.37 251.96 135.86 253.44 126.46 253.37 124.97 251.86 126.48 250.37" style="fill:#fff252"/><polyline points="239.91 324.23 243.91 320.23 239.91 316.23 235.91 320.23" style="fill:#fff252"/><line x1="235.91" y1="320.22" x2="239.91" y2="324.22" style="fill:#fff252"/><polyline points="220.24 240 230.75 250.68 220.07 261.2 209.55 250.52 220.24 240.1" style="fill:#fff252"/><polyline points="440.24 240 450.75 250.68 440.07 261.2 429.55 250.52 440.24 240.1" style="fill:#fff252"/><polyline points="220.24 0 230.75 10.68 220.07 21.2 209.55 10.52 220.24 0.1" style="fill:#fff252"/></g></svg>


<div class="wrapper" id="wrapper">
	<svg id="dragon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686.98 586.1"><defs><style>.cls-1{fill:#f60;}.cls-1,.cls-2,.cls-3{fill-rule:evenodd;}.cls-2{fill:#ffbb1f;}.cls-3{fill:#ff0;}.cls-4{fill:#a29ed2;}.cls-5{fill:#787791;}.cls-15,.cls-6{fill:#fff;}.cls-7{fill:#ffc31a;}.cls-8{fill:#97ba04;}.cls-9{fill:#4a5600;}.cls-10{fill:#5f7500;}.cls-11{fill:#4e5600;}.cls-12{fill:#b9db2a;}.cls-13{fill:#8ca304;}.cls-14{fill:#e2ea36;}.cls-15{opacity:0.4;}</style></defs><title>Untitled-1</title><g id="MouthFireLarge" class="fire"><polygon class="cls-1" points="191.25 161.22 172.28 189.81 153.31 218.41 119.06 220.39 84.8 222.37 103.77 193.78 122.73 165.18 156.99 163.2 191.25 161.22"/><polygon class="cls-2" points="164.63 176.51 155.15 190.81 145.67 205.1 128.54 206.09 111.42 207.08 120.9 192.79 130.38 178.5 147.51 177.5 164.63 176.51"/><polygon class="cls-3" points="111.42 207.08 120.9 192.79 130.38 178.5 147.51 177.51 164.63 176.51 111.42 207.08"/></g><g id="MouthFireMedium" class="fire"><polygon class="cls-1" points="116.3 192.06 106.73 206.48 97.17 220.9 79.89 221.9 62.61 222.9 72.18 208.48 81.75 194.06 99.02 193.06 116.3 192.06"/><polygon class="cls-2" points="102.88 199.77 98.09 206.98 93.31 214.19 84.68 214.69 76.04 215.19 80.82 207.98 85.6 200.77 94.24 200.27 102.88 199.77"/><polygon class="cls-3" points="76.04 215.19 80.82 207.98 85.6 200.77 94.24 200.27 102.88 199.77 76.04 215.19"/></g><g id="MouthFireSmall" class="fire"><polygon class="cls-1" points="144.11 197.6 136.37 209.27 128.63 220.95 114.65 221.75 100.66 222.57 108.41 210.89 116.14 199.22 130.13 198.41 144.11 197.6"/><polygon class="cls-2" points="133.25 203.84 129.38 209.68 125.51 215.51 118.52 215.92 111.53 216.32 115.4 210.49 119.27 204.65 126.26 204.25 133.25 203.84"/><polygon class="cls-3" points="111.53 216.32 115.4 210.49 119.27 204.65 126.26 204.25 133.25 203.84 111.53 216.32"/></g><g id="MouthFireXS" class="fire"><polygon class="cls-1" points="141.98 183.75 136.26 192.37 130.54 200.99 120.22 201.59 109.89 202.18 115.61 193.56 121.33 184.94 131.65 184.34 141.98 183.75"/><polygon class="cls-2" points="133.96 188.36 131.1 192.67 128.24 196.98 123.08 197.28 117.92 197.57 120.77 193.26 123.63 188.96 128.79 188.66 133.96 188.36"/><polygon class="cls-3" points="117.92 197.58 120.77 193.26 123.63 188.96 128.79 188.66 133.96 188.36 117.92 197.58"/></g><g id="NoseFireMain" class="fire"><polygon class="cls-1" points="54.24 175.91 49.6 186.68 44.97 197.44 33.57 200.19 22.17 202.94 26.81 192.18 31.45 181.41 42.84 178.66 54.24 175.91"/><polygon class="cls-2" points="46.22 182.67 43.9 188.05 41.58 193.44 35.89 194.81 30.19 196.18 32.51 190.8 34.83 185.42 40.52 184.04 46.22 182.67"/><polygon class="cls-3" points="30.19 196.19 32.51 190.8 34.83 185.42 40.52 184.04 46.22 182.67 30.19 196.19"/></g><g id="NoseFireTiny" class="fire"><polygon class="cls-1" points="16.52 191.66 14.13 197.2 11.74 202.75 5.87 204.16 0 205.59 2.39 200.04 4.78 194.49 10.65 193.07 16.52 191.66"/><polygon class="cls-2" points="12.39 195.14 11.19 197.91 10 200.68 7.06 201.4 4.13 202.1 5.32 199.33 6.52 196.56 9.45 195.85 12.39 195.14"/><polygon class="cls-3" points="4.13 202.1 5.32 199.33 6.52 196.56 9.45 195.85 12.39 195.14 4.13 202.1"/></g><polygon class="cls-4" points="148.05 471.51 38.75 471.51 130.06 555.02 236.65 513.27 275.98 586.11 352.42 523.95 485.92 586.11 508.76 509.36 686.98 471.51 148.05 471.51"/><polygon id="shadow" class="cls-5" points="508.76 509.36 686.98 471.51 265.53 471.51 352.42 523.95 485.92 586.11 508.76 509.36"/><path class="cls-6" d="M687.73,398.67s15.64-29.22,43.86-37.36,38.77-7.3,38.77-7.3l-20-64.56s-63.52,7.77-70.32,64.87C677.3,377.41,687.73,398.67,687.73,398.67Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M731.59,361.31c28.23-8.13,38.77-7.3,38.77-7.3l-11-35.56c-22.8,6.4-65.49,24.78-74.25,73.78,1.45,4,2.62,6.44,2.62,6.44S703.37,369.45,731.59,361.31Z" transform="translate(-319.81 -91)"/><path class="cls-8" d="M759.41,428.47s-48.92-43.63,0-43.63,102.19,32.85,131.37,80.42,52,57.31,52,57.31H759.41Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M759.41,522.57H942.79s-22.83-9.74-52-57.31c-2.43-4-5-7.81-7.79-11.56H759.41Z" transform="translate(-319.81 -91)"/><polygon class="cls-9" points="370.73 411.89 487.79 362.71 478.12 448.38 409.75 448.38 370.73 411.89"/><polygon class="cls-7" points="109.58 48.26 138.07 76.74 155.72 59.09 109.58 48.26"/><polygon class="cls-6" points="109.58 48.26 138.07 76.74 120.42 94.39 109.58 48.26"/><polygon class="cls-7" points="220.81 0 205.73 37.35 228.88 46.69 220.81 0"/><polygon class="cls-6" points="220.81 0 205.73 37.35 182.58 28 220.81 0"/><polygon class="cls-7" points="261.6 15.91 253.31 55.32 277.74 60.46 261.6 15.91"/><polygon class="cls-6" points="261.6 15.91 253.31 55.32 228.88 50.19 261.6 15.91"/><polygon class="cls-7" points="319.07 40.27 301.11 76.32 323.46 87.46 319.07 40.27"/><polygon class="cls-6" points="319.07 40.27 301.11 76.32 278.77 65.19 319.07 40.27"/><polygon class="cls-7" points="368.36 77.59 337.92 103.97 354.27 122.84 368.36 77.59"/><polygon class="cls-6" points="368.36 77.59 337.92 103.97 321.57 85.11 368.36 77.59"/><polygon class="cls-7" points="396.11 151.26 355.86 152.63 356.71 177.58 396.11 151.26"/><polygon class="cls-6" points="396.11 151.26 355.86 152.63 355.01 127.68 396.11 151.26"/><polygon class="cls-7" points="378.64 210.01 342.92 191.41 331.38 213.56 378.64 210.01"/><polygon class="cls-6" points="378.64 210.01 342.92 191.41 354.44 169.27 378.64 210.01"/><polygon class="cls-7" points="145.22 16.54 170.86 42.18 188.51 24.52 145.22 16.54"/><polygon class="cls-6" points="145.22 16.54 170.86 42.18 153.21 59.83 145.22 16.54"/><polygon class="cls-9" points="210.42 405.04 265.02 408.02 265.02 448.38 199.49 448.38 210.42 405.04"/><path class="cls-8" d="M446.14,255.29l-18-35.13S422.85,205,431,194.82s47.8-61.69,58.84-72.73,18.18-9.6,27.78,0,54.75,19.21,83.76,28.61,81.73,40,81.73,98.88c0,64.93-55.36,69.58-55.36,109.33,0,0,.42,25.79,23.25,25.79H759.27l11.42,74-11.28,63.85H573.12c-31.29,0-114.07-11.41-114.07-104S572.8,288.72,572.8,243.47s-20.72-42.71-20.72-42.71l-56.24,23.68Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M550.35,201.49c-12.09,1.78-22.29,5.59-26.61,9a22.38,22.38,0,0,0-3.12,3.52Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M573.12,522.55H759.41l11.28-26.85L729,453.7H598.58c-26.2,0-57.92-18.25-57.92-54.41,0-80.55,74.84-102.75,74.84-148.63,0-44.2-33.75-52.44-60.8-49.71,5.58,1.06,18.1,7.35,18.1,42.52,0,45.25-113.75,82.46-113.75,175.06S541.83,522.55,573.12,522.55Z" transform="translate(-319.81 -91)"/>

		<path class="bottom-mouth cls-10" d="M450.67,334.59a18,18,0,0,1-25.43,0h0a18,18,0,0,1,0-25.43l100.5-100.49a18,18,0,0,1,25.43,0h0a18,18,0,0,1,0,25.43Z" transform="translate(-319.81 -91)"/>

	<!--  Mouth top 	 -->
		<g class="top-mouth"><path class="cls-8" d="M410.67,326.66a18,18,0,0,1-25.43.42h0a18,18,0,0,1-.42-25.43L499.35,183.31a18,18,0,0,1,25.43-.42h0a18,18,0,0,1,.41,25.43Z" transform="translate(-319.81 -91)"/><path class="cls-8" d="M420.55,306.06A25.2,25.2,0,1,1,395,281.28,25.2,25.2,0,0,1,420.55,306.06Z" transform="translate(-319.81 -91)"/><path class="cls-11" d="M401.88,300.15a6.31,6.31,0,1,1-6.41-6.2A6.3,6.3,0,0,1,401.88,300.15Z" transform="translate(-319.81 -91)"/></g>

		<path class="cls-12" d="M563.92,210.49a40.18,40.18,0,1,1-40.18-40.17A40.17,40.17,0,0,1,563.92,210.49Z" transform="translate(-319.81 -91)"/><path class="cls-11" d="M472.12,215.09A11.19,11.19,0,1,1,460,204.87,11.17,11.17,0,0,1,472.12,215.09Z" transform="translate(-319.81 -91)"/><path class="cls-11" d="M460,216.12a5.23,5.23,0,0,1-7.36.62h0a5.23,5.23,0,0,1-.62-7.36l26.62-31.52a5.23,5.23,0,0,1,7.36-.62h0a5.22,5.22,0,0,1,.62,7.35Z" transform="translate(-319.81 -91)"/><path class="cls-8" d="M607.41,539.38H470.09a11.57,11.57,0,0,0-11.56,11.56H619A11.57,11.57,0,0,0,607.41,539.38Z" transform="translate(-319.81 -91)"/><path class="cls-10" d="M458.53,550.94a11.57,11.57,0,0,0,11.56,11.57H607.41A11.57,11.57,0,0,0,619,550.94Z" transform="translate(-319.81 -91)"/><path class="cls-10" d="M508.38,562.51a32,32,0,0,0-32-32v32Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M476.41,530.54a32,32,0,0,0-32,32h32Z" transform="translate(-319.81 -91)"/><path class="cls-8" d="M822.49,539.38H660.37a11.56,11.56,0,0,0-11.56,11.56H834.06A11.57,11.57,0,0,0,822.49,539.38Z" transform="translate(-319.81 -91)"/><path class="cls-10" d="M648.81,550.94a11.56,11.56,0,0,0,11.56,11.57H822.49a11.57,11.57,0,0,0,11.57-11.57Z" transform="translate(-319.81 -91)"/><path class="cls-10" d="M698.67,562.51a32,32,0,0,0-32-32v32Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M666.7,530.54a32,32,0,0,0-32,32h32Z" transform="translate(-319.81 -91)"/><polygon class="cls-8" points="327.22 416.03 278.77 448.38 213.24 448.38 236.62 378.5 327.22 416.03"/><path class="cls-13" d="M647,432a53.06,53.06,0,0,0-75,0l37.53,37.53Z" transform="translate(-319.81 -91)"/><path class="cls-14" d="M572,432A53.07,53.07,0,0,0,572,507l37.53-37.53Z" transform="translate(-319.81 -91)"/><path class="cls-10" d="M572,507a53.06,53.06,0,0,0,75,0L609.51,469.5Z" transform="translate(-319.81 -91)"/><path class="cls-14" d="M609.51,469.5,647,507A53.07,53.07,0,0,0,647,432Z" transform="translate(-319.81 -91)"/><polygon class="cls-8" points="391.41 411.89 508.46 362.71 498.8 448.38 430.43 448.38 391.41 411.89"/><path class="cls-10" d="M808.11,502.4a68.87,68.87,0,0,0,0-97.39l-48.7,48.7Z" transform="translate(-319.81 -91)"/><path class="cls-14" d="M808.11,405a68.87,68.87,0,0,0-97.4,0l48.7,48.7Z" transform="translate(-319.81 -91)"/><path class="cls-13" d="M710.71,405a68.87,68.87,0,0,0,0,97.39l48.7-48.69Z" transform="translate(-319.81 -91)"/><path class="cls-14" d="M759.41,453.71l-48.7,48.69a68.87,68.87,0,0,0,97.4,0Z" transform="translate(-319.81 -91)"/><path class="cls-6" d="M519.3,402.64a11,11,0,1,1-11-11A11,11,0,0,1,519.3,402.64Z" transform="translate(-319.81 -91)"/><path class="cls-6" d="M662.18,231.16a11,11,0,1,1-11-11A11,11,0,0,1,662.18,231.16Z" transform="translate(-319.81 -91)"/><path class="cls-6" d="M658.59,268.58a7.4,7.4,0,1,1-7.4-7.39A7.4,7.4,0,0,1,658.59,268.58Z" transform="translate(-319.81 -91)"/><circle class="cls-6" cx="188.51" cy="359.61" r="19.89"/><path class="cls-15" d="M549.72,203.07a21.52,21.52,0,1,1-21.51-21.52A21.52,21.52,0,0,1,549.72,203.07Z" transform="translate(-319.81 -91)"/><path class="cls-7" d="M461.43,221.79a3.81,3.81,0,1,1-3.81-3.81A3.8,3.8,0,0,1,461.43,221.79Z" transform="translate(-319.81 -91)"/></svg>
</div>

<div class="burning">
	<div class="camp">
		<svg id="campfire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.04 40.64"><title>Untitled-3</title><g id="fire"><polygon id="fire2" points="15.52 18.21 21.61 10.74 23.94 13.03 26.51 14.13 29.94 9.27 34.73 3.44 34.47 0 42.55 9.69 41.86 13.68 44.4 11.4 45.67 9.1 53.03 16.73 15.52 18.21 15.52 18.21" style="fill:#ff8f00"/><polygon id="fire1" points="36.89 18.53 53.03 16.73 45.67 9.1 44.4 11.4 41.86 13.68 42.55 9.69 34.46 0 36.89 18.53 36.89 18.53" style="fill:#ce5800"/></g><g id="Stick"><polygon id="stickbottom3" points="33.78 16.37 7.88 16.37 4.21 20.05 33.78 20.05 33.78 16.37 33.78 16.37" style="fill:#744c27"/><polygon id="stickbottom2" points="33.78 20.05 4.21 20.05 7.88 23.72 33.78 23.72 33.78 20.05 33.78 20.05" style="fill:#5b3f2a"/><polygon id="stickedge2" points="7.88 16.37 4.21 20.05 11.56 20.05 7.88 16.37 7.88 16.37" style="fill:#d17820"/><polygon id="stickedgeshadow2" points="4.21 20.05 7.88 23.72 11.56 20.05 4.21 20.05 4.21 20.05" style="fill:#af6313"/><polygon id="stickbottom" points="33.78 23.72 59.67 23.72 63.35 20.05 33.78 20.05 33.78 23.72 33.78 23.72" style="fill:#4f3421"/><polygon id="sticktop" points="33.78 20.05 63.35 20.05 59.67 16.37 33.78 16.37 33.78 20.05 33.78 20.05" style="fill:#5b3f2a"/><polygon id="stickedgeshadow" points="59.67 23.72 63.35 20.05 56 20.05 59.67 23.72 59.67 23.72" style="fill:#af6313"/><polygon id="stickedge" points="63.35 20.05 59.67 16.37 56 20.05 63.35 20.05 63.35 20.05" style="fill:#d17820"/></g><g id="groundgroup"><polygon id="ground2" points="14.21 23.72 0 23.72 11.56 29.6 16.95 27.45 29.94 40.64 39.33 35.69 47.45 37.09 53.05 30.62 61.4 32.9 59.67 28.97 71.04 23.72 14.21 23.72 14.21 23.72" style="fill:#97ba04"/><polygon id="ground" points="14.21 23.72 0 23.72 11.56 29.6 16.95 27.45 29.94 40.64 33.78 23.72 14.21 23.72 14.21 23.72" style="fill:#e2ea36"/></g></svg>
	</div>

	<div class="text-wrapper">
		<p data-splitting class="base-text text" id="text">Fire</p>
		<p data-splitting class="fire-text text" aria-hidden="true" id="text-2">Fire</p>
	</div>
</div>

<div class="controls">
	<button id="speech-trigger" class="button" type="button">Make fire</button>
	<button id="click-trigger" class="button" type="button">Trigger with click</button>
</div>
$outline: rgba(#fff, .4);
$outline2: rgba(#fb6620, .4);

html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;	
}

body {
	display: flex;
	justify-content: center;
 	background: #274257;
	position: relative;
}

#star {
	width: 100%;
	max-width: 800px;
	position: absolute;
	opacity: 0.8;
	transform: translate(5%, 10%);
}

.wrapper {
	transform: translate(50%, 20%);
	max-width: 700px;
    position: absolute;
}

// Campfire
.burning {
	position: absolute;
	top: 210px;
	transform: translateX(-35%);
	animation: floatCampfire 6s ease-in-out infinite;
}

.camp {
	width: 220px;
}

#campfire #fire {
	display: none;
}

@keyframes floatCampfire {
	0% {
		transform: translateX(-40%) translateY(0px);
	}
	50% {
		transform: translateX(-40%) translateY(-10px);
	}
	100% {
		transform: translateX(-40%) translateY(0px);
	}
}

// Text
.text-wrapper {
	opacity: 0;
	top: 0;
	left: 50%;
	width: 220px;
	text-align: center;
	transform: translate(-53%, -10%);
	position: absolute;
	transition: opacity 50ms 200ms ease-in;
}

.start-fire .text-wrapper {
	opacity: 1;
}

@keyframes fireClip {
	0% {
		clip-path: polygon(0 100%, 13% 75%, 41% 80%, 59% 64%, 80% 80%, 100% 89%, 100% 100%);
	}
	
	50% {
		clip-path: polygon(0px 100%, 19.82% 27.80%, 41% 36.52%, 59% 14.31%, 79.09% 37.76%, 100% 89%, 100% 100%);
	}
	
	75% {
		clip-path: polygon(0px 100%, 19.82% 45.19%, 41% 52.67%, 59% 36.67%, 79.09% 51.42%, 100% 89%, 100% 100%);
	}
	
	100% {
		clip-path: polygon(0 100%, 0 0, 41% 0, 60% 0, 80% 0, 100% 0, 100% 100%);
	}
}

.text {
    margin: 0;
    font-family:'Decovar'; 
	font-size: 70px;
}

.base-text {
	color: #fefc37;
	mix-blend-mode: color-dodge;
}

.start-fire .base-text {
	animation: flicker 3s 190ms linear infinite;
}

@keyframes flicker {
	0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
		opacity: .99;
		text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
	}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
		opacity: 0.7;
	}
}

.fire-text {
	background: #fb6620;
	background-clip: text;
	color: transparent;
	mix-blend-mode: hard-light;
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	font-variation-settings: 'INLN' 500, 'SWRM' 0, 'WORM' 0, 'SSTR' 0;
	
}

.start-fire .fire-text {
	opacity: 1;
text-shadow: -1px -1px 0 $outline2, 1px -1px 0 $outline2, -1px 1px 0 $outline2, 1px 1px 0 $outline2, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
	animation: fireText 1s 190ms linear infinite;
}

@keyframes fireText {
	0% {
		font-variation-settings: 'INLN' 500, 'SWRM' 800, 'WORM' 700, 'SSTR' 800;	
	}
	
	20% {
		font-variation-settings: 'INLN' 500, 'SWRM' 1000, 'WORM' 1000, 'SSTR' 1000;	
	}
	
	40% {
		font-variation-settings: 'INLN' 500, 'SWRM' 600, 'WORM' 500, 'SSTR' 300;	
	}
	100% {
		font-variation-settings: 'INLN' 500, 'SWRM' 1000, 'WORM' 1000, 'SSTR' 1000;
	}
}

// Dragon
#dragon {
	width: 300px;
	margin: 0 auto;
	overflow: visible;
	animation: float 6s ease-in-out infinite;
}

.top-mouth {
	transform-origin: center 100%;
}

.bottom-mouth {
	transform-origin: right center;
	transform: translate(-319.81px, -91px) rotate(0);
}

.fire {
	opacity: 0;
}

// Fire Nose
.start-fire #NoseFireTiny,
.start-fire #NoseFireMain {
	animation: burstNose 250ms 50ms ease forwards;
}

// Fire Mouth 
.start-fire .bottom-mouth {
	animation: bottomOpenMouth 250ms ease 1 alternate-reverse;
}

.start-fire .top-mouth {
	animation: openMouth 250ms ease 1 alternate-reverse;
}

.start-fire #MouthFireLarge {
	animation: burst 250ms 50ms ease forwards;
}

.start-fire #MouthFireMedium {
	animation: burst2 250ms 0ms ease forwards;
}

.start-fire #MouthFireSmall {
	animation: burst3 250ms 60ms ease forwards;
}

.start-fire #MouthFireXS {
	animation: burst4 250ms 70ms ease forwards;
}

@keyframes flyIn {
	0% {
		transform: translate(-100%, 100%) rotate(0);
	}
	30% {
		transform: translate(-90px, 50px) rotate(0);
	}
	100% {
		transform: translate(-90px, 50px) rotate(0);
	}
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes burstNose {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translate(-5%, 2px);
	}
	99% {
		opacity: 0;
		transform: translate(-5%, 2px);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes burst {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translate(-30%, 15%);
	}
	99% {
		opacity: 0;
		transform: translate(-30%, 15%);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes burst2 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translate(-35%, 30%);
	}
	99% {
		opacity: 0;
		transform: translate(-35%, 30%);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes burst3 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translate(-40%, 10%);
	}
	99% {
		opacity: 0;
		transform: translate(-40%, 10%);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes burst4 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: translate(-25%, 35%);
	}
	99% {
		opacity: 0;
		transform: translate(-25%, 35%);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes bottomOpenMouth {
	0% {
		transform: translate(-319.81px, -91px) rotate(0);
	}
	100% {
		transform: translate(-319.81px, -91px) rotate(-3deg);
	}
}

@keyframes openMouth {
	0% {
		transform: rotate(0) translate(0);
	}
	100% {
		transform: rotate(10deg) translate(-70px, 18px);
	}
}


// Toggle
$body-color: #274257;
$text-color: #98b825;

.controls {
	position: absolute;
	bottom: 30px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display: block;
}

.button {
	border: 2px solid $text-color;
	padding: 10px;
	background: linear-gradient(160deg, #e2e849 1%,#e2e849 50%,#98b825 50%,#98b825 50%);
	color: $body-color;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	width: 190px;
	clip-path: polygon(0% 15%, 0% 1%, 9% 9%, 18% 1%, 29% 7%, 44% 6%, 52% 15%, 68% 3%, 87% 13%, 100% 9%, 100% 89%, 90% 97%, 69% 89%, 59% 100%, 49% 86%, 33% 89%, 24% 80%, 11% 96%, 0 88%);
	
	&:hover, &:focus {
		background: #98b825;
	}	
}

@font-face {
	font-family:'Decovar'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf');
}

View Compiled
var speechButton = document.getElementById("speech-trigger");
var text = document.getElementById("text");
var text2 = document.getElementById("text-2");

if (window.hasOwnProperty('webkitSpeechRecognition')) {
	var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
	var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
} else {
	var SpeechRecognition = SpeechRecognition;
	var SpeechRecognitionEvent = SpeechRecognitionEvent;
	speechButton.style.display = 'none';
}

var phrases = ["fire", "burn", "hot"];

function testSpeech() {
	var recognition = new SpeechRecognition();

	recognition.lang = "en-US";
	recognition.start();

	recognition.onresult = function(event) {
		var speechResult = event.results[0][0].transcript.toLowerCase();
		console.log(speechResult);

		// if (speechResult === phrases[0]) {
		document.body.classList.add("start-fire");
		text.innerHTML = speechResult;
		text2.innerHTML = speechResult;

		console.log("Confidence: " + event.results[0][0].confidence);
	};

	recognition.onspeechend = function() {
		recognition.stop();
	};

	recognition.onerror = function(event) {
		console.log("Error occurred in recognition: " + event.error);
	};
}

// Trigger with spell.
speechButton.addEventListener("click", function() {
	if (document.body.classList.contains("start-fire")) {
		document.body.classList.remove("start-fire");
		testSpeech();
	} else {
		testSpeech();
	}
});

speechButton.addEventListener("touchstart", function() {
	if (document.body.classList.contains("start-fire")) {
		document.body.classList.remove("start-fire");
		testSpeech();
	} else {
		testSpeech();
	}
});


// Trigger effect with click
var button1 = document.getElementById("click-trigger");

button1.addEventListener(
	"touchstart",
	function(e) {
		e.preventDefault();

		if (document.body.classList.contains("start-fire")) {
			document.body.classList.remove("start-fire");
			button1.textContent = "Trigger with click";
		} else {
			document.body.classList.add("start-fire");
			button1.textContent = "Reset";
		}
	},
	true
);

button1.addEventListener("click", function(e) {
	if (document.body.classList.contains("start-fire")) {
		document.body.classList.remove("start-fire");
		button1.textContent = "Trigger with click";
	} else {
		document.body.classList.add("start-fire");
		button1.textContent = "Reset";
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/splitting/dist/splitting.min.js