HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id="root">
<div id="container">
<!-- Edited in illustrator and c/p without editing -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.11111 305.77778">
<g id="a3c00615-a6a2-4b05-9761-188cc14520fb" data-name="Layer 2">
<g id="a9f5a80e-e35c-46c9-98e9-0290a8854a3c" data-name="fight">
<rect id="e19efb2e-51ce-47c6-9aef-2937211094a8" data-name="background" width="475.11111" height="305.77778" style="fill:none" />
<g id="a57a5e0c-6a61-42c3-a7f9-bfd55413f604" data-name="background">
<path id="a548192e-ab94-4284-a73b-18e187eec860" data-name="cloud4" d="M231.72357,198.40372c0,5.89,8.21559,10.67,18.35426,10.67h96.56231c7.72631,0,13.9934-4.12,13.9934-9.2,0-4.07995-4.04872-7.54-9.64948-8.74-3.686-8.82-15.51172-18.9-24.56231-18.9-7.69259,0-20.657,3.84-27.55667,9.44-1.22307-.06994-2.47985-.1-3.75352-.1-13.16681,0-24.32616,3.47-28.14713,8.26a117.81586,117.81586,0,0,0-16.8866-2.1C239.93916,187.73368,231.72357,192.51371,231.72357,198.40372Z" style="fill:#989da3" />
<path id="b2443e23-f818-4097-bab1-1bfc4f049660" data-name="cloud7" d="M128.12316,200.19334c0,3.73,10.17181,5.78,17.61954,5.78h48.07363v-.01a2.62883,2.62883,0,0,0,.27549.01c5.20319,0,18.76214-2.54,18.76214-7.05,0-3.94-10.335-8.07-16.42582-9.06-4.64207-5.07-17.14-9.33-26.82205-9.33-11.3859,0-29.00537,7.92005-31.07649,14.34C132.8265,196.42332,128.12316,198.39335,128.12316,200.19334Z" style="fill:#989da3" />
</g>
<g id="f8b50806-7db1-4f14-b508-00b986902924" data-name="ship">
<g id="ffea392a-c9f3-499a-821f-f8b7b47ef248" data-name="background">
<path d="M322.935,158.67858l-11.88586,2.88521-.38466.09287-4.86844,1.18061-1.58523.3847-3.27656.79594-5.60461,1.3597-.02656.00664a5.74456,5.74456,0,0,0-.7893.82909,4.80675,4.80675,0,0,0-.49081.82245,2.1244,2.1244,0,0,0-.10611.25868c-.03979.07959-.06635.16582-.0995.252a2.01843,2.01843,0,0,0-.07959.26528,1.71653,1.71653,0,0,0-.05971.26533c-.02652.13266-.0464.26528-.06631.39795a3.605,3.605,0,0,0-.01988.37806c-.00664.126-.00664.252-.00664.37807v.07959a.32252.32252,0,0,0,.00664.07959,1.78444,1.78444,0,0,0,.01988.26533c.00663.09946.01991.199.03315.29848.01328.11274.03316.23213.05307.34487a2.47435,2.47435,0,0,0,.05972.30512c.01987.09287.03979.19234.06631.2852v.01988a.02318.02318,0,0,0,.00664.01328,8.86406,8.86406,0,0,0,.27856.94183c.11938.35156.25868.70971.41786,1.0679.01992.06631.05308.13262.07959.199h.00664c.00664.01987.01328.03315.01988.05307.073.15254.14594.31172.21889.4709.07295.15258.14594.30512.22553.45766.01324.01991.01988.04643.03316.06635.16581.16581.33163.33823.49081.50405a.75877.75877,0,0,1,.09951.10615h.00664c.15918.16581.31835.33827.47089.50409.11275.11938.21889.24541.33164.36479.14594.16582.29184.325.43114.48417.17906.20562.35815.41123.524.61684.11939.1393.23217.27861.34492.41787.23876.29184.47089.59032.68315.88216.09286.11938.17909.23877.26532.35815h.00664c.03979.05308.07295.09951.10611.15258.1393.199.27856.398.41122.59028.1393.19238.26533.39135.39135.59032.252.39135.49081.7893.7097,1.18065.07295.13266.13927.25864.21226.38467.15917.29848.30508.597.451.89544.053.126.11274.252.17245.37807.07959.17905.15918.36479.23213.54389q.17909.44766.33828.8954c.01987.05971.03979.126.05967.18573.03979.11939.07959.23213.11278.34488.05968.20561.11939.41122.17242.61019.01992.073.03984.15258.05971.22553.03316.126.06631.252.09287.37807.03316.15254.06631.29848.09287.44438.01988.11275.03979.23217.05967.35156a.44725.44725,0,0,0,.01328.09283c0,.01991.00664.03983.00664.05307.053.33163.09283.66327.11938.98827.01324.16581.02652.33163.03316.49085a13.815,13.815,0,0,1-.03316,1.65818c-.01328.16582-.02655.33164-.05307.49746-.01988.16581-.04643.33163-.06631.49081a1.91155,1.91155,0,0,1-.02656.19233c-.01324.09287-.03315.18574-.053.27857a.20488.20488,0,0,0-.01328.05307c-.02652.15254-.05971.30512-.09287.45766-.02651.126-.05967.25868-.09287.38471,0,.01324-.00659.01988-.01323.03315a11.62533,11.62533,0,0,1-.37807,1.24032,16.03111,16.03111,0,0,1-.85565,1.97654c-.0066.01327-.01324.01991-.01988.03319-.06631.126-.13266.25865-.21225.38467-.11274.20561-.23213.41786-.35151.62348-.02656.05971-.06635.11274-.09951.17245-.08623.14594-.17909.29848-.272.44438-.15918.24541-.31836.49082-.49082.72963-.126.18569-.27856.36479-.41122.55048-.05967.07963-.11939.15258-.17906.22553-.10614.15254-.21889.30512-.34491.4643-.43778.55713-.91532,1.10766-1.42605,1.65818-.11939.13266-.23877.25869-.36479.38471-.37807.398-.776.78926-1.18725,1.1806-.08622.08623-.17909.17246-.272.25869l-36.14831.06631h-1.06786l-58.67963.11275q.06958-.20891.13926-.43775c.11938-.36479.23217-.75614.35155-1.1806.03316-.126.06631-.252.09947-.38471.11938-.50409.24541-1.05462.36483-1.65818.07959-.39135.16582-.80257.23877-1.24031.04643-.23881.09287-.47758.13266-.72963.01988-.1459.0464-.29184.06631-.44438.05972-.37807.11939-.76937.17246-1.1806a.05984.05984,0,0,0,.00664-.03319c.09283-.61684.17906-1.27348.26528-1.97654.0398-.35156.08623-.71635.126-1.08778h.00664a1.7455,1.7455,0,0,0-.01328-.18569,3.61888,3.61888,0,0,0-.02652-.38471c-.01992-.23213-.03979-.4643-.073-.68979a.50146.50146,0,0,0-.00664-.09951c-.02651-.19233-.05307-.37807-.08623-.5704-.02651-.20561-.06631-.41123-.1061-.6102-.0332-.15922-.06635-.3184-.10615-.47094a.02318.02318,0,0,1-.00664-.01327c-.07295-.31172-.15918-.61684-.252-.91532a.02321.02321,0,0,1-.0066-.01324c-.02656-.08623-.05308-.16582-.07963-.24541-.02652-.06635-.0464-.13266-.06631-.19237-.05308-.1459-.11275-.29184-.17246-.43774-.05967-.14595-.11938-.28521-.1857-.43115-.01991-.04643-.04643-.09286-.06635-.1393-.053-.11938-.11274-.23213-.17245-.34487l-.0398-.07959a3.61046,3.61046,0,0,0-.19233-.35156c-.09287-.15917-.1857-.31835-.28521-.47089a4.08715,4.08715,0,0,0-.23876-.35156c-.00664-.01327-.01328-.01987-.01992-.03315-.08623-.13266-.1857-.26533-.2852-.39135-.11275-.13926-.22553-.27856-.33828-.41122-.1061-.11939-.20561-.23213-.31172-.34488-.05971-.06635-.11938-.126-.17909-.18573-.1393-.15254-.2852-.29185-.43774-.43115-.0398-.03979-.08623-.07959-.13267-.11938-.14594-.126-.29848-.25205-.451-.37807-.06635-.053-.13266-.10611-.199-.15254-.13262-.10611-.27192-.20561-.41782-.30512a.69415.69415,0,0,0-.073-.053h-.00664l-.35816-.23881a14.54469,14.54469,0,0,0-2.87857-1.41937h-.00664c-.272-.10615-.54389-.20561-.82909-.29184-.41787-.00664-.82909-.01328-1.23372-.03316s-.80253-.03979-1.19388-.06635l-.17906-.01988c-.13266-.00664-.26532-.01991-.39134-.03319-.19234-.0066-.39135-.02652-.57705-.0464q-1.15405-.11944-2.2485-.31839c-.179-.03316-.35815-.06632-.53061-.09947-.15918-.02656-.31835-.05307-.47093-.09287-.1857-.03979-.37143-.08623-.55049-.126a1.98,1.98,0,0,1-.21225-.05308c-.24541-.05307-.49082-.11938-.72963-.179-.31171-.08623-.61683-.1791-.91531-.272-.21222-.06632-.41783-.13267-.62348-.20562-.1857-.06631-.378-.13266-.56377-.20561-.199-.073-.3913-.1459-.577-.22553-.07295-.03316-.1459-.05967-.21889-.09283-.11938-.04643-.23877-.0995-.35151-.15258-.25869-.11274-.51074-.23213-.75614-.35151s-.49746-.252-.73622-.37807c-.26533-.1393-.51738-.29184-.76942-.44438-.252-.15918-.5041-.3184-.7495-.48422h-.0066c-.10615-.07295-.21889-.15254-.325-.22549-.19233-.13266-.378-.272-.56376-.41786a.95952.95952,0,0,1-.09951-.073c-.17242-.13266-.34487-.272-.51069-.41787-.126-.10614-.252-.21225-.37807-.33163a2.30689,2.30689,0,0,1-.19238-.16582c0-.00664-.0066-.00664-.01323-.01328-.11939-.09951-.23877-.21225-.35156-.325-.05967-.05972-.126-.11939-.18569-.18574s-.126-.13262-.18574-.19233c-.09287-.09287-.19233-.199-.2852-.29848l-.09287-.09287c-.19233-.21221-.38467-.42447-.55712-.65l-.199-.23876c-.01328-.01328-.01991-.02652-.03319-.0398-.0398-.05307-.08623-.10615-.11939-.15918a14.12555,14.12555,0,0,1-.8556-1.18064c-.06631-.09947-.13267-.199-.19234-.29848-.126-.1857-.23881-.37143-.35155-.56377-.04643-.06631-.07959-.13266-.11938-.199-.14595-.252-.29185-.51073-.43115-.78266-.03979-.08622-.08623-.16581-.126-.252-.07295-.1393-.13926-.27861-.20561-.42451a7.7635,7.7635,0,0,1-.34488-.75613.93871.93871,0,0,1-.05307-.11939c-.07959-.17246-.15254-.35151-.21889-.524-.073-.1791-.1459-.35819-.20561-.53725-.0398-.08623-.06632-.17245-.09947-.25868-.07963-.21889-.15922-.44438-.23217-.66991-.073-.199-.13266-.398-.19233-.597-.04644-.126-.07959-.25865-.11939-.39131q-.14927-.49746-.2786-1.01483c-.0066-.0066-.0066-.0066-.0066-.01324-.02656-.11278-.05307-.21889-.07963-.33163-.01988-.073-.03979-.15258-.053-.22553-.04644-.1857-.08623-.37807-.126-.57041l-.01991-.07959c-.01988-.0995-.04644-.199-.05968-.30511-.02655-.10611-.04643-.21226-.06635-.31836-.03979-.21225-.07959-.42451-.11274-.6434a1.23545,1.23545,0,0,1-.02652-.16581.14578.14578,0,0,1-.00664-.053.24163.24163,0,0,1-.01328-.09287c-.03315-.16581-.05967-.33163-.08622-.49745s-.04644-.33827-.07295-.50409c-.05972-.451-.11939-.902-.16582-1.36634a2.91379,2.91379,0,0,1,2.56022-3.35615h41.78612a2.94267,2.94267,0,0,1,2.69952,3.449,29.68838,29.68838,0,0,1,6.95771,1.33978,20.96213,20.96213,0,0,1,2.35461.93523c.06635.02652.13266.05968.199.09287.37143.16582.73623.35152,1.09438.55049s.71634.41122,1.06126.63012c.199.126.3913.252.58368.3847.36479.252.72294.51074,1.06786.79594a16.32182,16.32182,0,0,1,1.52551,1.3597,15.47884,15.47884,0,0,1,1.2138,1.32654c.07959.09287.15918.19234.23213.2852.01328.01328.02656.03316.0398.04644l.199.25868c.29184.37807.5638.76938.82909,1.18061q.24873.3681.47758.75613c.08622.13931.16581.27857.2454.42451.22553.398.44438.80917.65,1.23367.31839.65.61683,1.33319.88216,2.04289l.07959.199c.126.31835.23877.65.34491.98163q.11938.32834.21885.67655c.05308.16581.10615.33163.14594.50409.1459.4709.27193.96175.39135,1.4658.13262.53725.24541,1.08778.35815,1.65818.00664.05308.01988.09951.02652.15258.07295.38467.1393.776.199,1.1806.06636.38471.11943.78266.17246,1.18065H259.042a8.86857,8.86857,0,0,1-.06631-1.18065c0-.1061,0-.20561.0066-.31171s.01328-.21226.01992-.31176a.902.902,0,0,1,.01988-.19234,1.64374,1.64374,0,0,1,.01991-.17909,1.79639,1.79639,0,0,1,.02652-.1857c.00664-.05307.01992-.0995.02656-.15258a8.138,8.138,0,0,1,.2852-1.15408c.05307-.16582.11938-.33828.18569-.5041.04644-.11274.09287-.21885.13931-.33163.06631-.13926.13266-.27193.20561-.41123.05971-.11938.126-.24541.199-.36479s.14594-.23877.22553-.35815c.10611-.16582.22549-.33828.35152-.50409.17245-.22554.35155-.451.55052-.67655a12.21421,12.21421,0,0,1,.96839-.98163l.21885-.199h.00664a.74429.74429,0,0,1,.13267-.11938c.19233-.16582.39134-.33164.60356-.49086a19.81091,19.81091,0,0,1,2.149-1.43265q1.06457-.62679,2.348-1.23367c.30512-.1393.61684-.2852.93519-.42451.58368-.252,1.20716-.50409,1.8572-.75613.90867-.35152,1.877-.68979,2.91837-1.02807l.597-.15254,1.00818-.25868,6.48014-1.65818,5.31281-1.3597,3.11075-.79594,1.50564-.3847,4.60971-1.18061.36483-.09287,23.65889-6.05567,2.90513,3.16382Z" style="fill:#5f3d3a" />
<path d="M206.735,162.247c19.37188-.72256,25.77975,7.20116,26.85065,18.68438l-28.32391,1.47688Z" style="fill:#68574c" />
<path d="M201.37049,192.39265c-.0398.37143-.08623.73622-.126,1.08778-.08622.70306-.17245,1.3597-.26528,1.97654a.05984.05984,0,0,1-.00664.03319c-.05307.41123-.11274.80253-.17246,1.1806-.01991.15254-.04643.29848-.06631.44438-.03979.252-.08623.49082-.13266.72963-.07295.43774-.15918.849-.23877,1.24031-.11942.60356-.24545,1.15409-.36483,1.65818-.03316.13266-.06631.25869-.09947.38471-.11938.42446-.23217.81581-.35155,1.1806q-.06965.22881-.13926.43775l-11.8991.01991c.05967-.15254.11939-.30512.1857-.45766.15918-.40458.33163-.79593.51737-1.1806.053-.13266.11938-.25868.17905-.38471.272-.5704.56381-1.12757.88217-1.65818.25868-.43114.53061-.84237.81581-1.24031.17246-.252.35819-.49082.54389-.72963.11938-.15253.23876-.29844.36479-.44438a15.8087,15.8087,0,0,1,1.12757-1.1806l.03315-.03319a13.3254,13.3254,0,0,1,2.7526-1.97654,13.85764,13.85764,0,0,1,2.318-.98922,2.08888,2.08888,0,0,1,.64331-.09856Z" style="fill:#7c5d49" />
</g>
<path id="a4e0843f-b4e3-447d-ac45-aa2dc5494bd8" data-name="middleground" d="M322.92831,158.67194l-11.919,2.89185-.38467.09287-4.86179,1.18061-1.58523.3847-3.27656.79594-5.60466,1.3597a5.10055,5.10055,0,0,0-.78266.83573,4.28419,4.28419,0,0,0-.50409.82245,2.12271,2.12271,0,0,0-.1061.25868,1.61446,1.61446,0,0,0-.08623.252,2.01843,2.01843,0,0,0-.07959.26528,1.71653,1.71653,0,0,0-.05971.26533c-.02652.13266-.0464.26528-.06631.39795a3.605,3.605,0,0,0-.01988.37806,1.8022,1.8022,0,0,0-.01328.37807.32252.32252,0,0,0,.00664.07959.32252.32252,0,0,0,.00664.07959,1.78444,1.78444,0,0,0,.01988.26533,1.52561,1.52561,0,0,0,.03315.29848c.01328.11274.03316.23213.05307.34487a2.47435,2.47435,0,0,0,.05972.30512,2.17751,2.17751,0,0,0,.05967.2852.02427.02427,0,0,0,.00664.01988.02318.02318,0,0,0,.00664.01328,8.86406,8.86406,0,0,0,.27856.94183c.11938.35156.25868.70971.41786,1.0679.01992.06631.05308.13262.07959.199h.00664c.00664.01987.01328.03315.01988.05307.073.15254.14594.31172.21889.4709.07295.15258.14594.30512.22553.45766.01324.01991.01988.04643.03316.06635.16581.16581.33163.33823.49081.50405a.75877.75877,0,0,1,.09951.10615h.00664c.15918.16581.31835.33827.47089.50409.11275.11938.21889.24541.33164.36479.14594.16582.29184.325.43114.48417.17906.20562.35815.41123.524.61684.11939.1393.23217.27861.34492.41787.23876.29184.47089.59032.68315.88216.09286.11938.17909.23877.26532.35815h.00664c.03979.05308.07295.09951.10611.15258.1393.199.27856.398.41122.59028.1393.19238.26533.39135.39135.59032.252.39135.49081.7893.7097,1.18065.07295.13266.13927.25864.21226.38467.15917.29848.30508.597.451.89544.053.126.11274.252.17245.37807.07959.17905.15918.36479.23213.54389q.17909.44766.33828.8954c.01987.05971.03979.126.05967.18573.03979.11939.07959.23213.11278.34488.05968.20561.11939.41122.17242.61019.01992.073.03984.15258.05971.22553.03316.126.06631.252.09287.37807.02652.15254.05967.29848.08623.44438.01988.11939.03979.23877.05967.35156h.00664a.44725.44725,0,0,0,.01328.09283c0,.01991.00664.03983.00664.05307.053.33163.09283.66327.11938.98827.01324.16581.01988.325.02652.49085a13.77679,13.77679,0,0,1-.03316,1.65818c-.01328.16582-.02651.33164-.04643.49746s-.04643.33163-.06631.49081c-.01328.06631-.01992.13262-.0332.19233-.01324.09287-.03315.18574-.04639.27857a.20488.20488,0,0,0-.01328.05307l-.09951.45766c-.02651.126-.05967.25868-.09282.38471,0,.01324-.00664.01988-.00664.03315-.11279.41787-.23881.82909-.39135,1.24032a15.07573,15.07573,0,0,1-.85561,1.97654c-.00664.01327-.01328.01991-.01991.03319-.06632.126-.13267.25865-.199.38467-.11274.20561-.23213.41786-.35151.62348-.03984.05971-.073.11274-.10615.17245-.09287.14594-.18569.29848-.2852.44438-.15918.24541-.31836.49082-.49081.72963-.126.18569-.25869.37143-.39135.55048-.05967.07963-.11939.15258-.17906.22553-.11278.15918-.23217.31172-.35819.4643-.44438.55713-.922,1.11429-1.43929,1.65818-.11938.126-.23877.25869-.36479.38471-.37143.398-.76942.78926-1.18064,1.1806-.08623.07959-.17246.16582-.25869.24541l-36.14167.07959h-1.06786l-58.68627.13266c0-.00664.00664-.01328.00664-.01991q.06958-.20891.13926-.43775c.11938-.36479.23217-.75614.35155-1.1806.03316-.126.06631-.252.09947-.38471.11938-.50409.24541-1.05462.36483-1.65818.07959-.39135.16582-.80257.23877-1.24031.04643-.23881.09287-.47758.13266-.72963.01988-.1459.0464-.29184.06631-.44438.05972-.37807.11939-.76937.17246-1.1806a.05984.05984,0,0,0,.00664-.03319c.09283-.61684.17906-1.27348.26528-1.97654.0398-.35156.08623-.71635.126-1.08778V192.386c-.00664-.05967-.00664-.11938-.01324-.179-.00664-.13266-.01328-.25869-.02656-.38471-.01987-.23213-.03979-.4643-.06631-.68979a.51124.51124,0,0,0-.01328-.09951c-.01987-.19233-.04643-.37807-.07959-.5704-.03315-.20561-.073-.41123-.11274-.6102-.03316-.15922-.06635-.31176-.09951-.47094a.02318.02318,0,0,1-.00664-.01327c-.07295-.31172-.15918-.61684-.252-.91532a.02321.02321,0,0,1-.0066-.01324c-.02656-.07959-.05308-.16582-.08623-.24541-.01992-.06635-.04643-.13266-.05971-.19237-.05308-.1459-.11275-.29184-.17246-.43774-.05967-.14595-.11938-.28521-.1857-.43115-.01991-.04643-.04643-.09286-.06635-.1393-.053-.11938-.11274-.23213-.17245-.34487l-.0398-.07959c-.05967-.11939-.126-.23881-.19233-.35156-.09287-.15917-.1857-.31835-.28521-.47089a4.08715,4.08715,0,0,0-.23876-.35156c-.00664-.01327-.01328-.01987-.01992-.03315-.08623-.13266-.1857-.26533-.2852-.39135-.11275-.13926-.22553-.27856-.33828-.41122-.1061-.11939-.20561-.23213-.31172-.34488-.05971-.06635-.11938-.126-.17909-.18573-.1393-.1459-.2852-.29185-.43774-.43115-.0398-.03979-.08623-.07959-.13267-.11938-.14594-.126-.29848-.25205-.451-.37807-.06635-.053-.13266-.10611-.199-.15254-.13262-.10611-.27192-.20561-.41782-.30512a.69415.69415,0,0,0-.073-.053h-.00664l-.35816-.23881a14.54469,14.54469,0,0,0-2.87857-1.41937h-.00664c-.272-.10615-.54389-.20561-.82909-.29184l-.00664-.00664c-.41123-.00664-.82245-.01328-1.22708-.02652-.40458-.01992-.80253-.03979-1.19388-.06635l-.17906-.01988c-.13266-.00664-.26532-.01991-.39134-.03319-.19234-.0066-.39135-.02652-.57705-.0464q-1.15405-.11944-2.2485-.31839c-.179-.03316-.35815-.06632-.53061-.09947-.15918-.02656-.31835-.05307-.47093-.09287-.1857-.03979-.37143-.08623-.55049-.126a1.98,1.98,0,0,1-.21225-.05308c-.24541-.05307-.49082-.11938-.72963-.179-.31171-.08623-.61683-.1791-.91531-.272-.21222-.06632-.41783-.13267-.62348-.20562-.1857-.06631-.378-.13266-.56377-.20561-.199-.073-.3913-.1459-.577-.22553-.07295-.03316-.1459-.05967-.21889-.09283-.11938-.04643-.23877-.0995-.35151-.15258-.25869-.11274-.51074-.23213-.75614-.35151s-.49746-.252-.73622-.37807c-.26533-.1393-.51738-.29184-.76942-.44438-.252-.15918-.5041-.3184-.7495-.48422h-.0066c-.10615-.07295-.21889-.15254-.325-.22549-.19233-.13266-.378-.272-.56376-.41786a.95952.95952,0,0,1-.09951-.073c-.17242-.13266-.34487-.272-.51069-.41787-.126-.10614-.252-.21225-.37807-.33163a2.30689,2.30689,0,0,1-.19238-.16582c0-.00664-.0066-.00664-.01323-.01328-.11275-.1061-.22553-.21225-.33828-.325-.06631-.05972-.13266-.126-.199-.18574-.05972-.06631-.126-.13262-.18574-.19233-.09287-.09287-.19233-.199-.2852-.29848l-.09287-.09287c-.19233-.21221-.38467-.42447-.55712-.65l-.199-.23876c-.01328-.01328-.01991-.02652-.03319-.0398-.0398-.05307-.08623-.10615-.11939-.15918a14.12555,14.12555,0,0,1-.8556-1.18064c-.06631-.09947-.13267-.199-.19234-.29848-.126-.1857-.23881-.37143-.35155-.56377-.04643-.06631-.07959-.13266-.11938-.199-.14595-.252-.29185-.51073-.43115-.78266-.03979-.08622-.08623-.16581-.126-.252-.07295-.1393-.13926-.27861-.20561-.42451a7.7635,7.7635,0,0,1-.34488-.75613.93871.93871,0,0,1-.05307-.11939c-.07959-.17246-.15254-.35151-.21889-.524-.073-.1791-.1459-.35819-.20561-.53725-.0398-.08623-.06632-.17245-.09947-.25868-.07963-.21889-.15922-.44438-.23217-.66991-.073-.199-.13266-.398-.19233-.597-.04644-.126-.07959-.25865-.11939-.39131q-.14927-.49746-.2786-1.01483c-.0066-.0066-.0066-.0066-.0066-.01324-.02656-.11278-.05307-.21889-.07963-.33163-.01988-.073-.03979-.15258-.053-.22553-.04644-.1857-.08623-.37807-.13267-.57041a.33263.33263,0,0,0-.01327-.07959c-.01988-.0995-.04644-.199-.05968-.30511-.02655-.10611-.04643-.21226-.06635-.31836-.03979-.21225-.07959-.42451-.11274-.6434a1.23545,1.23545,0,0,1-.02652-.16581.12471.12471,0,0,1-.01328-.053c-.00664-.02655-.00664-.05971-.01327-.09287-.03316-.15917-.05968-.33163-.07959-.49745-.02652-.16582-.04644-.33827-.07295-.50409-.06632-.451-.126-.90868-.17246-1.37962h.00664l21.689.0332,3.56177.0066h.00664c.03979.00664.08623.00664.126.01327.00664,0,.00664,0,.01324.01328h.08623a28.55933,28.55933,0,0,1,9.23937,2.31481,1.71176,1.71176,0,0,1,.19237.09287,19.61327,19.61327,0,0,1,2.18215,1.18061c.199.126.398.252.59032.3847q.5671.37807,1.09438.79594a18.85957,18.85957,0,0,1,3.05771,3.01788l.199.25868c.29849.37807.58369.776.84237,1.18061.17242.2454.33164.49745.48418.75613.08623.13931.16582.27857.24541.42451.126.21885.2454.44438.36479.66991.08623.16582.16581.33823.2454.50405.08623.1791.17246.36483.25869.54389.23877.50409.45766,1.02806.65663,1.55871.02656.06631.04644.13262.073.199a.86631.86631,0,0,1,.05971.18569q.14926.398.27857.79594c.03979.126.08623.25868.11938.3847.02656.09287.05307.19234.07959.29185.05307.16581.09951.33163.14594.50409.1393.47753.25869.96835.36479,1.4658.126.53725.23217,1.09442.325,1.65818.00664.05308.01992.09951.02656.15258.06631.38467.126.78266.179,1.1806.05308.38471.09951.78266.1393,1.18065h21.66908l14.53231-.00664h7.23628a8.83048,8.83048,0,0,1-.06632-1.174c0-.1061.00664-.21225.01324-.31171.00664-.10615.01328-.21226.01992-.31176a.902.902,0,0,1,.01988-.19234,1.64374,1.64374,0,0,1,.01991-.17909c.00664-.06631.01328-.126.01992-.1857h.0066c.00664-.05307.01328-.0995.01992-.15258a7.17517,7.17517,0,0,1,.29184-1.15408,4.54606,4.54606,0,0,1,.1791-.5041c.04639-.11274.09282-.22549.1459-.33163.06631-.13926.13266-.27193.20561-.41123.05971-.11938.126-.24541.199-.36479.06635-.11938.1393-.23877.21225-.35815.11275-.17246.22553-.33828.35156-.50409.17241-.22554.35151-.451.55048-.67655a12.22109,12.22109,0,0,1,.9684-.98163,2.16565,2.16565,0,0,1,.23212-.199h.00664a.74429.74429,0,0,1,.13267-.11938c.19233-.16582.39134-.33164.60356-.49086a18.7581,18.7581,0,0,1,2.12247-1.43265q1.06456-.62679,2.348-1.23367c.30508-.1393.61684-.2852.94184-.42451q.87552-.388,1.85051-.75613c.91532-.35152,1.89035-.69643,2.93829-1.03471l.57044-.1459,1.00815-.25868,6.48018-1.65818,5.31281-1.3597,3.11075-.79594,1.50559-.3847,4.60975-1.18061.36479-.09287,23.68545-6.06231.00664.00664Z" style="fill:#9a6f50" />
<g id="b075b2fd-80cb-417d-a597-a38d7949fba6" data-name="stripes">
<path d="M302.19443,185.39514H199.195c-.00664-.01327-.01328-.01987-.01992-.03315-.08623-.13266-.1857-.26533-.2852-.39135-.11275-.13926-.22553-.27856-.33828-.41122-.1061-.11939-.20561-.23213-.31172-.34488H301.84952c.03979.11939.07959.23213.11278.34488.05968.20561.11939.41122.17242.61019C302.15464,185.2426,302.17456,185.32219,302.19443,185.39514Z" style="fill:#8e5e40" />
<path d="M302.43984,186.56915H199.91128c-.05967-.11939-.126-.23881-.19233-.35156-.09287-.15917-.1857-.31835-.28521-.47089a4.08715,4.08715,0,0,0-.23876-.35156H302.19443c.03316.126.06631.252.09287.37807.03316.15254.06631.29848.09287.44438C302.40005,186.33034,302.42,186.44976,302.43984,186.56915Z" style="fill:#ad8361" />
<path d="M302.57914,189.85235c-.01328.16582-.02655.33164-.05307.49746-.01988.16581-.04643.33163-.06631.49081a1.91155,1.91155,0,0,1-.02656.19233H201.2511c-.01987-.19233-.04643-.37807-.07959-.5704-.03315-.20561-.073-.41123-.11274-.6102Z" style="fill:#8e5e40" />
<path d="M302.4332,191.033c-.01324.09287-.03315.18574-.053.27857a.20488.20488,0,0,0-.01328.05307c-.02652.15254-.05971.30512-.09287.45766-.02651.126-.05967.25868-.09287.38471H201.35725c-.00664-.13266-.01328-.25869-.02656-.38471-.01987-.23213-.03979-.4643-.06631-.68979a.51124.51124,0,0,0-.01328-.09951Z" style="fill:#ad8361" />
<path d="M300.91432,195.49016c-.06631.126-.13266.25865-.21225.38467-.11274.20561-.23213.41786-.35151.62348-.02656.05971-.06635.11274-.09951.17245h-99.451c.05972-.37807.11939-.76937.17246-1.1806Z" style="fill:#8e5e40" />
<path d="M300.25105,196.67076c-.08623.14594-.17909.29848-.272.44438-.15918.24541-.31836.49082-.49082.72963H200.60111c.04643-.23881.09287-.47758.13266-.72963.01988-.1459.0464-.29184.06631-.44438Z" style="fill:#ad8361" />
<path d="M296.61634,201.23783c-.37807.51518-.90208.82279-1.31331,1.32943l-95.90244.199c.11938-.47225.3324-.97942.46648-1.5284Z" style="fill:#8e5e40" />
<path d="M215.27932,178.57009c.06631.38467.126.78266.179,1.1806H184.68259c-.24541-.05307-.49082-.11938-.72963-.179-.31171-.08623-.61683-.1791-.91531-.272-.21222-.06632-.41783-.13267-.62348-.20562-.1857-.06631-.378-.13266-.56377-.20561-.199-.073-.3913-.1459-.577-.22553-.07295-.03316-.1459-.05967-.21889-.09283Z" style="fill:#8e5e40" />
<path d="M299.674,179.75069H258.969c0-.1061.00664-.21225.01324-.31171.00664-.10615.01328-.21226.01992-.31176a.902.902,0,0,1,.01988-.19234,1.64374,1.64374,0,0,1,.01991-.17909c.00664-.06631.01328-.126.01992-.1857h39.80955c.1393.199.27856.398.41122.59028C299.422,179.35275,299.548,179.55172,299.674,179.75069Z" style="fill:#8e5e40" />
<path d="M215.45837,179.75069c.05308.38471.09951.78266.1393,1.18065H193.09951c-.272-.10615-.54389-.20561-.82909-.29184-.41787-.00664-.82909-.01328-1.23372-.03316s-.80253-.03979-1.19388-.06635l-.17906-.01988c-.13266-.00664-.26532-.01991-.39134-.03319-.19234-.0066-.39135-.02652-.57705-.0464q-1.15405-.11944-2.2485-.31839c-.179-.03316-.35815-.06632-.53061-.09947-.15918-.02656-.31835-.05307-.47093-.09287-.1857-.03979-.37143-.08623-.55049-.126a1.98,1.98,0,0,1-.21225-.05308Z" style="fill:#ad8361" />
<path d="M300.38371,180.93134h-63.117l14.53231-.00664h7.23628a8.83048,8.83048,0,0,1-.06632-1.174h40.705C299.92606,180.142,300.16482,180.54,300.38371,180.93134Z" style="fill:#ad8361" />
<path d="M213.93949,173.317q.14926.398.27857.79594H174.59421l-.09287-.09287c-.19233-.21221-.38467-.42447-.55712-.65l-.199-.23876c-.01328-.01328-.01991-.02652-.03319-.0398-.0398-.05307-.08623-.10615-.11939-.15918h40.21417c.02656.06631.04644.13262.073.199A.86631.86631,0,0,1,213.93949,173.317Z" style="fill:#8e5e40" />
<path d="M295.07754,174.11289H261.22412a12.22109,12.22109,0,0,1,.9684-.98163,2.16565,2.16565,0,0,1,.23212-.199H294.527c.01992.06631.05308.13262.07959.199h.00664c.00664.01987.01328.03315.01988.05307.073.15254.14594.31172.21889.4709C294.925,173.80781,294.998,173.96035,295.07754,174.11289Z" style="fill:#8e5e40" />
<path d="M214.417,174.78944c.05307.16581.09951.33163.14594.50409H175.808a2.30689,2.30689,0,0,1-.19238-.16582c0-.00664-.0066-.00664-.01323-.01328-.11939-.09951-.23877-.21225-.35156-.325-.05967-.05972-.126-.11939-.18569-.18574s-.126-.13262-.18574-.19233c-.09287-.09287-.19233-.199-.2852-.29848h39.62385c.03979.126.08623.25868.11938.3847C214.364,174.59046,214.39051,174.68993,214.417,174.78944Z" style="fill:#ad8361" />
<path d="M296.17855,175.29353H260.32208c.11275-.17246.22553-.33828.35156-.50409.17241-.22554.35151-.451.55048-.67655h33.85342c.01324.01991.01988.04643.03316.06635.16581.16581.33163.33823.49081.50405a.75877.75877,0,0,1,.09951.10615h.00664C295.86684,174.95525,296.026,175.12771,296.17855,175.29353Z" style="fill:#ad8361" />
<path d="M210.70936,167.29447c.29849.37807.58369.776.84237,1.18061h-40.5856a.93871.93871,0,0,1-.05307-.11939c-.07959-.17246-.15254-.35151-.21889-.524-.073-.1791-.1459-.35819-.20561-.53725Z" style="fill:#8e5e40" />
<path d="M293.91681,167.29447c-.03979.07959-.06635.16582-.0995.252a2.01843,2.01843,0,0,0-.07959.26528,1.71653,1.71653,0,0,0-.05971.26533c-.02652.13266-.0464.26528-.06631.39795H270.43034c.91532-.35152,1.89035-.69643,2.93829-1.03471l.57044-.1459Z" style="fill:#8e5e40" />
<path d="M212.03591,169.23121c.08623.13931.16582.27857.24541.42451h-40.7647c-.07295-.1393-.13926-.27861-.20561-.42451a7.7635,7.7635,0,0,1-.34488-.75613h40.5856C211.72415,168.72048,211.88337,168.97253,212.03591,169.23121Z" style="fill:#ad8361" />
<path d="M293.59182,169.39039a1.78444,1.78444,0,0,0,.01988.26533H267.638c.30508-.1393.61684-.2852.94184-.42451q.87552-.388,1.85051-.75613H293.6117a3.605,3.605,0,0,0-.01988.37806c-.00664.126-.00664.252-.00664.37807v.07959A.32252.32252,0,0,0,293.59182,169.39039Z" style="fill:#ad8361" />
<path d="M203.58583,161.65666a19.61327,19.61327,0,0,1,2.18215,1.18061H169.22172c-.02655-.10611-.04643-.21226-.06635-.31836-.03979-.21225-.07959-.42451-.11274-.6434a1.23545,1.23545,0,0,1-.02652-.16581.12471.12471,0,0,1-.01328-.053Z" style="fill:#8e5e40" />
<path d="M206.3583,163.222q.5671.37807,1.09438.79594H169.48037c-.01988-.073-.03979-.15258-.053-.22553-.04644-.1857-.08623-.37807-.13267-.57041a.33263.33263,0,0,0-.01327-.07959c-.01988-.0995-.04644-.199-.05968-.30511H205.768C205.967,162.96329,206.166,163.08931,206.3583,163.222Z" style="fill:#ad8361" />
<circle cx="321.64746" cy="156.98281" r="2.68994" style="fill:#c09059" />
</g>
<g id="fd67f7be-5949-4506-a113-2316fe06908b" data-name="back">
<path id="f274ad30-3e6c-4e07-af90-aac9921f2d30" data-name="beam" d="M190.3588,159.23348l0-67.73034c1.111-1.461,2.28942-1.48959,3.57192,0v67.73034Z" style="fill:#8e5e40" />
<path id="fb5fcf58-0e84-49a1-9ee1-8a3f678464c9" data-name="top sail" d="M171.4703,99.82544c11.93514,10.753,10.95073,25.07662.11482,34.04559a.48839.48839,0,0,0,.31319.86392h34.50932a.50705.50705,0,0,0,.31189-.10759c11.84733-9.30665,12.52139-26.53019-.00529-35.55887a.50627.50627,0,0,0-.29465-.09493H171.79914A.48926.48926,0,0,0,171.4703,99.82544Z" style="fill:#26252a" />
<line x1="174.28776" y1="116.85425" x2="222.7066" y2="116.85425" style="fill:none" />
<path d="M193.21251,132.65325c3.48556.03175,12.04059.00767,12.9039.00513a.18672.18672,0,0,0,.12682-.05021,23.66635,23.66635,0,0,0,7.50794-13.39572.19108.19108,0,0,0-.349-.13525c-4.61745,6.83554-11.67616,10.87378-20.23227,13.19625A.19271.19271,0,0,0,193.21251,132.65325Z" style="fill:#454a51" />
<rect x="190.3588" y="134.73495" width="3.57193" height="5.50945" style="fill:#7c5d49" />
<circle cx="192.14477" cy="90.39665" r="3.31636" style="fill:#26252a" />
<circle cx="193.24943" cy="91.90573" r="0.79053" style="fill:#454a51" />
</g>
<g id="a763d582-43c6-47a2-b043-6bedcf19f640" data-name="middle">
<path d="M233.5856,170.08682v10.84452H215.59767a28.64009,28.64009,0,0,0-3.07095-10.84452h10.148V44.8744l3.648-.849V170.08682Z" style="fill:#8e5e40" />
<path d="M238.69944,52.61018V48.74865a.3287.3287,0,0,0-.41626-.31682l-5.58759,1.54438a.32869.32869,0,0,1-.41611-.30681l-.20057-6.59a.3287.3287,0,0,0-.40251-.31026l-5.35363,1.2364v.01987l-3.24479.75517a.3287.3287,0,0,1-.40321-.32014V36.53368a.3287.3287,0,0,1,.26319-.3221l17.80147-3.6204a.3287.3287,0,0,1,.39421.3221v7.4962a.3287.3287,0,0,0,.38634.32361l6.07893-1.08281a.3287.3287,0,0,1,.38634.3236v4.80535a.3287.3287,0,0,0,.33389.32866L260.20077,44.92a.3287.3287,0,0,1,.11312.63913l-21.17783,7.36155A.3287.3287,0,0,1,238.69944,52.61018Z" style="fill:#26252a" />
<path d="M232.337,42.623l7.76661-1.60788a.3287.3287,0,0,1,.30469.54853l-7.57346,7.95412a.3287.3287,0,0,1-.5666-.21666l-.19315-6.34624A.32871.32871,0,0,1,232.337,42.623Z" style="fill:#454a51" />
<path d="M238.92094,48.24037,246.3538,45.676a.3287.3287,0,0,1,.32112.56029l-7.43287,6.371a.32869.32869,0,0,1-.54261-.24956V48.55109A.32868.32868,0,0,1,238.92094,48.24037Z" style="fill:#454a51" />
<line x1="222.67478" y1="44.8744" x2="219.07985" y2="45.71676" style="fill:none" />
<path id="beb4a86e-0d0f-4bbb-8ddf-1e6304bd3573" data-name="top sail" d="M203.45217,77.13662c11.93514,10.753,10.95072,25.07662.11481,34.0456a.48839.48839,0,0,0,.31319.86392H238.3895a.507.507,0,0,0,.31188-.1076c11.84733-9.30664,12.5214-26.53019-.00529-35.55886a.50619.50619,0,0,0-.29465-.09494H203.781A.48926.48926,0,0,0,203.45217,77.13662Z" style="fill:#26252a" />
<line x1="206.26962" y1="94.16544" x2="254.68846" y2="94.16544" style="fill:none" />
<path d="M225.19437,109.96444c3.48556.03175,12.04059.00766,12.9039.00512a.18669.18669,0,0,0,.12683-.05021A23.66641,23.66641,0,0,0,245.733,96.52364a.19109.19109,0,0,0-.349-.13525c-4.61745,6.83553-11.67616,10.87377-20.23227,13.19624A.19272.19272,0,0,0,225.19437,109.96444Z" style="fill:#454a51" />
<rect x="222.67477" y="112.04614" width="3.64799" height="5.50945" style="fill:#7c5d49" />
<rect x="222.67477" y="151.6582" width="3.64799" height="5.50945" style="fill:#7c5d49" />
<path id="b1d07897-363f-4417-a805-bba3c780a13c" data-name="top sail" d="M203.91749,116.74868c11.93514,10.753,10.95073,25.07663.11482,34.0456a.48838.48838,0,0,0,.31318.86392h34.50933a.507.507,0,0,0,.31188-.10759c11.84733-9.30665,12.5214-26.5302-.00529-35.55887a.50616.50616,0,0,0-.29465-.09494H204.24633A.48926.48926,0,0,0,203.91749,116.74868Z" style="fill:#26252a" />
<line x1="206.73495" y1="133.7775" x2="255.15379" y2="133.7775" style="fill:none" />
<path d="M225.6597,149.5765c3.48556.03175,12.04059.00767,12.9039.00513a.18672.18672,0,0,0,.12682-.05021,23.66647,23.66647,0,0,0,7.50794-13.39572.19108.19108,0,0,0-.349-.13525c-4.61746,6.83553-11.67616,10.87378-20.23228,13.19624A.19272.19272,0,0,0,225.6597,149.5765Z" style="fill:#454a51" />
</g>
<g id="f51a4df3-6167-47ad-b9e9-cc252496e066" data-name="front">
<path id="e2f79903-3dd8-47e7-97c6-8a567ce7b132" data-name="beam" d="M255.36634,180.93429l0-112.747c-1.23108-1.3076-2.40881-1.27174-3.53746,0l-.02763,112.747Z" style="fill:#8e5e40" />
<path id="a4bea006-1d72-4a5c-bdb6-bcc16bb60f37" data-name="top sail" d="M232.38739,91.56279c11.93515,10.753,10.95073,25.07662.11482,34.04559a.48839.48839,0,0,0,.31319.86392h34.50933a.507.507,0,0,0,.31188-.10759c11.84733-9.30665,12.52139-26.5302-.00529-35.55887a.50626.50626,0,0,0-.29465-.09494H232.71623A.48927.48927,0,0,0,232.38739,91.56279Z" style="fill:#26252a" />
<line x1="235.20485" y1="108.5916" x2="283.62369" y2="108.5916" style="fill:none" />
<path d="M254.1296,124.3906c3.48556.03175,12.04059.00767,12.9039.00513a.1867.1867,0,0,0,.12682-.05021,23.66643,23.66643,0,0,0,7.50795-13.39572.19109.19109,0,0,0-.349-.13525c-4.61745,6.83553-11.67616,10.87378-20.23227,13.19624A.19272.19272,0,0,0,254.1296,124.3906Z" style="fill:#454a51" />
<rect x="251.75981" y="126.4723" width="3.64799" height="5.50945" style="fill:#7c5d49" />
<path id="aa59ca58-485c-48ed-a184-617a520c47e3" data-name="top sail" d="M232.38739,132.07763c11.93515,10.753,10.95073,25.07662.11482,34.0456a.48839.48839,0,0,0,.31319.86392h34.50933a.507.507,0,0,0,.31188-.1076c11.84733-9.30664,12.52139-26.53019-.00529-35.55886a.50619.50619,0,0,0-.29465-.09494H232.71623A.48926.48926,0,0,0,232.38739,132.07763Z" style="fill:#26252a" />
<line x1="235.20485" y1="149.10645" x2="283.62369" y2="149.10645" style="fill:none" />
<path d="M254.1296,164.90545c3.48556.03175,12.04059.00766,12.9039.00512a.18669.18669,0,0,0,.12682-.0502,23.66643,23.66643,0,0,0,7.50795-13.39572.19109.19109,0,0,0-.349-.13525c-4.61745,6.83553-11.67616,10.87377-20.23227,13.19624A.19272.19272,0,0,0,254.1296,164.90545Z" style="fill:#454a51" />
<rect x="251.75981" y="166.90099" width="3.64799" height="5.50945" style="fill:#7c5d49" />
<circle cx="253.5838" cy="67.77275" r="3.31636" style="fill:#26252a" />
<circle cx="254.68846" cy="69.28183" r="0.79053" style="fill:#454a51" />
</g>
<g id="f87de3e3-3307-4e05-87ec-b6f68674b91e" data-name="cannons">
<g id="b9897fb7-0639-46b4-aa18-c8454d268545" data-name="cannon4">
<circle cx="263.16749" cy="189.11676" r="3.64799" style="fill:#908d93;stroke:#8e5e40;stroke-miterlimit:10;stroke-width:2px" />
<polygon id="a47242a7-0a0e-4377-bb0a-80d44d875882" data-name="shaft" points="263.598 185.214 265.326 187.057 261.375 191.498 259.398 190.082 263.598 185.214" style="fill:#908d93" />
<circle id="e1a6d16d-2038-466d-b0d1-2effcdf4d187" data-name="tip" cx="261.27795" cy="187.45931" r="2.56369" style="fill:#454a51;stroke:#c7bbbb;stroke-miterlimit:10;stroke-width:2px" />
</g>
<g id="f7331266-933a-4f35-aa44-4b7426160a90" data-name="cannon3">
<circle cx="251.22859" cy="189.11676" r="3.64799" style="fill:#908d93;stroke:#8e5e40;stroke-miterlimit:10;stroke-width:2px" />
<polygon id="a8c5aa36-a8ae-4368-9079-461961263ff9" data-name="shaft" points="251.659 185.214 253.387 187.057 249.436 191.498 247.459 190.082 251.659 185.214" style="fill:#908d93" />
<circle id="fd80d3e9-df22-4a85-a1df-2a8b1ed22e92" data-name="tip" cx="249.33906" cy="187.45931" r="2.56369" style="fill:#454a51;stroke:#c7bbbb;stroke-miterlimit:10;stroke-width:2px" />
</g>
<g id="b792285e-a92e-45b3-91b4-83963183bb8e" data-name="cannon2">
<circle cx="239.2897" cy="189.11676" r="3.64799" style="fill:#908d93;stroke:#8e5e40;stroke-miterlimit:10;stroke-width:2px" />
<polygon id="e28bc916-f8a8-47ea-a3d9-6be4a9f7fba1" data-name="shaft" points="239.721 185.214 241.448 187.057 237.497 191.498 235.521 190.082 239.721 185.214" style="fill:#908d93" />
<circle id="b14ab259-71d2-40fb-9115-08cf4d9929da" data-name="tip" cx="237.40017" cy="187.45931" r="2.56369" style="fill:#454a51;stroke:#c7bbbb;stroke-miterlimit:10;stroke-width:2px" />
</g>
<g id="f476599c-a0eb-442c-a7b3-fddfd5e6d1e9" data-name="cannon1">
<circle cx="227.35081" cy="189.11676" r="3.64799" style="fill:#908d93;stroke:#8e5e40;stroke-miterlimit:10;stroke-width:2px" />
<polygon id="b6e7ec8f-0382-49da-8367-5dfdc0c8706b" data-name="shaft" points="227.782 185.214 229.509 187.057 225.558 191.498 223.582 190.082 227.782 185.214" style="fill:#908d93" />
<circle id="bd0cc25f-9984-4e84-9e06-409d590d697e" data-name="tip" cx="225.46128" cy="187.45931" r="2.56369" style="fill:#454a51;stroke:#c7bbbb;stroke-miterlimit:10;stroke-width:2px" />
</g>
<g id="b0313ff7-b542-4620-8757-4c4022288490" data-name="cannon0">
<circle cx="215.41192" cy="189.11676" r="3.64799" style="fill:#908d93;stroke:#8e5e40;stroke-miterlimit:10;stroke-width:2px" />
<polygon id="a0a4e655-4f93-48c6-8ae1-dc93ce56a3bc" data-name="shaft" points="215.843 185.214 217.57 187.057 213.619 191.498 211.643 190.082 215.843 185.214" style="fill:#908d93" />
<circle id="bac75fa6-ff74-437d-a11b-5c9cf3bb7494" data-name="tip" cx="213.52239" cy="187.45931" r="2.56369" style="fill:#454a51;stroke:#c7bbbb;stroke-miterlimit:10;stroke-width:2px" />
</g>
</g>
<g id="b355bdbc-62e7-479d-b4d7-f77673ec06bf" data-name="foreground">
<path d="M168.78665,159.18281l25.14408.05067q19.36176,1.4586,21.66694,21.69786l43.43767-.00664c-1.08039-5.63684,4.16228-9.76773,13.01051-13.03993" style="fill:none;stroke:#673434;stroke-miterlimit:10;stroke-width:3px" />
<path d="M168.78665,158.1871h-.06131a4.58589,4.58589,0,0,0-.05414.99553l.11166.99794Z" style="fill:#673434" />
<path d="M272.39064,168.819c2.12847-.76594,7.83778-2.77127,9.9608-3.67784-2.52118.1725-8.59754,1.38306-10.65008,1.81026l-1.47589.57929.86594,1.77793Z" style="fill:#673434" />
<path d="M272.56993,169.29636c2.12847-.76594,7.65307-3.26091,9.77609-4.16749-2.52118.1725-8.76472.91714-10.81726,1.34433l-1.52975.59137,1.30854,2.68669Z" style="fill:#673434" />
<path d="M295.29639,165.37761c-2.227,1.976-2.15868,4.93-.136,8.78654,10.76794,10.74252,9.11871,21.02765.14264,28.4031l-8.73538.016c11.66679-7.70053,15.04424-16.06507,6.50247-27.4793C291.02545,171.21971,290.75923,167.41574,295.29639,165.37761Z" style="fill:#7c5d49" />
</g>
</g>
<g id="e9b8b0d9-209d-45c2-a6ab-00b391980de0" data-name="foreground">
<path id="a9aa28f4-9570-44b5-9235-5118864d4a03" data-name="cloud5" d="M238.11733,209.42682c0,2.85848,11.87464,3.12683,17.00481,3.12683h58.41663c6.93728,0,15.59128-.87719,15.59128-3.3435,0-2.13088-6.49534-4.339-12.71428-5.3406-.87709-4.23814-8.72546-8.38177-17.57944-8.38177-1.76552,0-3.59906.03308-5.40616.10869-4.16991-3.32153-11.39827-5.67445-18.15784-5.67445-10.30193,0-24.53182,6.72807-24.53182,12.75688a2.45364,2.45364,0,0,0,.01889.33544C245.17559,204.71054,238.11733,207.22506,238.11733,209.42682Z" style="fill:#adb5bd" />
<path id="befd65ea-6a52-47fa-9593-02551c710bc2" data-name="cloud6" d="M225.598,207.87625c0,2.83-3.38,4.22-7.7,4.22h-23.92c-3.2,0-8.04-.2-8.04-2.52,0-1.41,2.12-3.33,4.51-4.64.22-5.82,6.41-11.5,13.45-11.5,6.95,0,15.01,3.03,15.49,8.63C222.678,203.21628,225.598,205.76626,225.598,207.87625Z" style="fill:#adb5bd" />
<path id="abeb9710-1824-417c-acea-8284ffa26aa9" data-name="cannon3smoke2" d="M252.67237,187.27754a1.49508,1.49508,0,0,1,.09465.52454,2.13085,2.13085,0,0,1-1.6442,1.86076,1.19524,1.19524,0,0,1-.94642.539,1.019,1.019,0,0,1-.52133-.146c-.29836.36574-.63362.55341-.92236.4684a.74509.74509,0,0,1-.454-.54539,1.49172,1.49172,0,0,1-.81167.223c-.64484,0-1.16778-.35291-1.16778-.78923a.72934.72934,0,0,1,.4315-.61116c-.75393-.23419-1.27365-.73467-1.27365-1.31375,0-.71542.79562-1.31055,1.8431-1.43406a.975.975,0,0,1-.10266-.43632,1.459,1.459,0,0,1,1.6041-1.24317,1.74863,1.74863,0,0,1,1.34905.57427,2.94024,2.94024,0,0,1,.932-.14759c1.18222,0,2.13825.6641,2.13825,1.48379A1.2684,1.2684,0,0,1,252.67237,187.27754Z" style="fill:#302d30" />
<path id="a1978b19-9696-4798-ac47-43760fd4b4b0" data-name="cannon4smoke2" d="M264.61127,187.27754a1.4953,1.4953,0,0,1,.09464.52454,2.13084,2.13084,0,0,1-1.6442,1.86076,1.19521,1.19521,0,0,1-.94642.539,1.019,1.019,0,0,1-.52133-.146c-.29836.36574-.63362.55341-.92236.4684a.74509.74509,0,0,1-.454-.54539,1.49172,1.49172,0,0,1-.81167.223c-.64484,0-1.16778-.35291-1.16778-.78923a.72934.72934,0,0,1,.4315-.61116c-.75393-.23419-1.27365-.73467-1.27365-1.31375,0-.71542.79562-1.31055,1.84311-1.43406a.975.975,0,0,1-.10267-.43632,1.459,1.459,0,0,1,1.6041-1.24317,1.74863,1.74863,0,0,1,1.349.57427,2.94024,2.94024,0,0,1,.932-.14759c1.18222,0,2.13825.6641,2.13825,1.48379A1.26841,1.26841,0,0,1,264.61127,187.27754Z" style="fill:#302d30" />
<path id="b083a7b8-4e9e-41a4-85b1-e147a2504065" data-name="cannon2smoke2" d="M240.73348,187.27754a1.49508,1.49508,0,0,1,.09465.52454,2.13085,2.13085,0,0,1-1.6442,1.86076,1.19524,1.19524,0,0,1-.94642.539,1.019,1.019,0,0,1-.52133-.146c-.29836.36574-.63362.55341-.92236.4684a.74509.74509,0,0,1-.454-.54539,1.49173,1.49173,0,0,1-.81168.223c-.64484,0-1.16777-.35291-1.16777-.78923a.72932.72932,0,0,1,.4315-.61116c-.75393-.23419-1.27365-.73467-1.27365-1.31375,0-.71542.79562-1.31055,1.8431-1.43406a.975.975,0,0,1-.10266-.43632,1.459,1.459,0,0,1,1.60409-1.24317,1.74864,1.74864,0,0,1,1.34906.57427,2.94024,2.94024,0,0,1,.932-.14759c1.18222,0,2.13825.6641,2.13825,1.48379A1.2684,1.2684,0,0,1,240.73348,187.27754Z" style="fill:#302d30" />
<path id="b990f17f-d5f5-4aad-804c-15a5d2154c8b" data-name="cannon1smoke2" d="M228.79459,187.27754a1.49531,1.49531,0,0,1,.09465.52454,2.13085,2.13085,0,0,1-1.6442,1.86076,1.19524,1.19524,0,0,1-.94642.539,1.019,1.019,0,0,1-.52134-.146c-.29836.36574-.63362.55341-.92235.4684a.74509.74509,0,0,1-.454-.54539,1.49173,1.49173,0,0,1-.81168.223c-.64484,0-1.16777-.35291-1.16777-.78923a.72932.72932,0,0,1,.4315-.61116c-.75393-.23419-1.27366-.73467-1.27366-1.31375,0-.71542.79563-1.31055,1.84311-1.43406a.975.975,0,0,1-.10266-.43632,1.459,1.459,0,0,1,1.60409-1.24317,1.74861,1.74861,0,0,1,1.34905.57427,2.94035,2.94035,0,0,1,.932-.14759c1.18221,0,2.13825.6641,2.13825,1.48379A1.2684,1.2684,0,0,1,228.79459,187.27754Z" style="fill:#302d30" />
<path id="b4395cd3-4eb4-4e26-9421-fd2045e9a212" data-name="cannon0smoke2" d="M216.8557,187.27754a1.49531,1.49531,0,0,1,.09465.52454,2.13085,2.13085,0,0,1-1.6442,1.86076,1.19525,1.19525,0,0,1-.94643.539,1.019,1.019,0,0,1-.52133-.146c-.29836.36574-.63362.55341-.92235.4684a.7451.7451,0,0,1-.454-.54539,1.4917,1.4917,0,0,1-.81167.223c-.64484,0-1.16778-.35291-1.16778-.78923a.72933.72933,0,0,1,.43151-.61116c-.75393-.23419-1.27366-.73467-1.27366-1.31375,0-.71542.79563-1.31055,1.84311-1.43406a.975.975,0,0,1-.10267-.43632,1.459,1.459,0,0,1,1.6041-1.24317,1.74863,1.74863,0,0,1,1.34905.57427,2.94033,2.94033,0,0,1,.932-.14759c1.18222,0,2.13826.6641,2.13826,1.48379A1.26843,1.26843,0,0,1,216.8557,187.27754Z" style="fill:#302d30" />
<path id="be2137bd-2959-4758-981d-094f81cf0711" data-name="cannon1smoke1" d="M228.32478,187.08028a1.52714,1.52714,0,0,1-.26422.56825,1.74395,1.74395,0,0,1-2.3653,2.56266,1.25112,1.25112,0,0,1-2.05172-.9598,1.22718,1.22718,0,0,1,.06525-.39793c-1.05212-.19737-1.78909-.659-1.78909-1.197,0-.48228.58894-.9025,1.466-1.12694a.84132.84132,0,0,1-.27219-.59849c0-.58575.70036-1.06008,1.56466-1.06008a1.744,1.744,0,0,1,1.40071.58735,1.40442,1.40442,0,0,1,.82611-.269,1.44613,1.44613,0,0,1,1.23039.70194c.52528.13849.86749.3661.86749.62237C229.00285,186.73806,228.74182,186.94021,228.32478,187.08028Z" style="fill:#2d2b2d" />
<path id="f3645360-77f3-4b4a-8fe5-2c513dbc77fc" data-name="cannon3smoke1" d="M252.20256,187.08028a1.52714,1.52714,0,0,1-.26422.56825,1.74394,1.74394,0,0,1-2.36529,2.56266,1.25113,1.25113,0,0,1-2.05173-.9598,1.22719,1.22719,0,0,1,.06526-.39793c-1.05213-.19737-1.7891-.659-1.7891-1.197,0-.48228.58894-.9025,1.466-1.12694a.84132.84132,0,0,1-.27219-.59849c0-.58575.70036-1.06008,1.56467-1.06008a1.74407,1.74407,0,0,1,1.40071.58735,1.40437,1.40437,0,0,1,.8261-.269,1.44614,1.44614,0,0,1,1.2304.70194c.52527.13849.86749.3661.86749.62237C252.88064,186.73806,252.6196,186.94021,252.20256,187.08028Z" style="fill:#2d2b2d" />
<path id="f1867fc5-d3e6-46eb-a793-7d76b8591b3b" data-name="cannon2smoke1" d="M240.26367,187.08028a1.52714,1.52714,0,0,1-.26422.56825,1.74394,1.74394,0,0,1-2.36529,2.56266,1.25113,1.25113,0,0,1-2.05173-.9598,1.22718,1.22718,0,0,1,.06525-.39793c-1.05212-.19737-1.78909-.659-1.78909-1.197,0-.48228.58894-.9025,1.466-1.12694a.84132.84132,0,0,1-.27219-.59849c0-.58575.70036-1.06008,1.56467-1.06008a1.74407,1.74407,0,0,1,1.40071.58735,1.40437,1.40437,0,0,1,.8261-.269,1.44615,1.44615,0,0,1,1.2304.70194c.52527.13849.86748.3661.86748.62237C240.94174,186.73806,240.68071,186.94021,240.26367,187.08028Z" style="fill:#2d2b2d" />
<path id="e7a2dd9c-37c0-421f-b099-ed20f39a5073" data-name="cannon4smoke1" d="M264.14145,187.08028a1.52714,1.52714,0,0,1-.26422.56825,1.74394,1.74394,0,0,1-2.36529,2.56266,1.25113,1.25113,0,0,1-2.05173-.9598,1.22719,1.22719,0,0,1,.06526-.39793c-1.05213-.19737-1.78909-.659-1.78909-1.197,0-.48228.58893-.9025,1.466-1.12694a.84131.84131,0,0,1-.27218-.59849c0-.58575.70036-1.06008,1.56466-1.06008a1.74405,1.74405,0,0,1,1.40071.58735,1.40437,1.40437,0,0,1,.8261-.269,1.44614,1.44614,0,0,1,1.2304.70194c.52527.13849.86749.3661.86749.62237C264.81953,186.73806,264.55849,186.94021,264.14145,187.08028Z" style="fill:#2d2b2d" />
<path id="e61552af-3eec-4670-a4bc-9ab8cd83cd79" data-name="cannon0smoke1" d="M216.38589,187.08028a1.52745,1.52745,0,0,1-.26422.56825,1.74395,1.74395,0,0,1-2.3653,2.56266,1.25113,1.25113,0,0,1-2.05173-.9598,1.22719,1.22719,0,0,1,.06526-.39793c-1.05212-.19737-1.78909-.659-1.78909-1.197,0-.48228.58894-.9025,1.466-1.12694a.84132.84132,0,0,1-.27219-.59849c0-.58575.70036-1.06008,1.56466-1.06008a1.74405,1.74405,0,0,1,1.40071.58735,1.4044,1.4044,0,0,1,.82611-.269,1.44614,1.44614,0,0,1,1.23039.70194c.52528.13849.86749.3661.86749.62237C217.064,186.73806,216.80293,186.94021,216.38589,187.08028Z" style="fill:#2d2b2d" />
<path id="a25c7b63-026d-4ef6-8db1-2406eb5f9fc5" data-name="cannon2smoke0" d="M240.76508,187.77279a1.91716,1.91716,0,0,1-2.06491,1.72349c-.03939,0-.08043-.00163-.11982-.00163a1.44035,1.44035,0,0,1-1.22122.87815,1.63925,1.63925,0,0,1-1.4149-1.37715,1.87211,1.87211,0,0,1-.37589.03611c-.84041,0-1.53308-.50063-1.53308-1.10795a.93263.93263,0,0,1,.33813-.691.7949.7949,0,0,1-.22816-.54,1.03528,1.03528,0,0,1,.691-.86995.76726.76726,0,0,1,.67954-.75835.39028.39028,0,0,1,.087.00822,1.35078,1.35078,0,0,1,1.18183-1.1014,1.28839,1.28839,0,0,1,1.126.9389,1.4381,1.4381,0,0,1,1.17362,1.16869A1.84243,1.84243,0,0,1,240.76508,187.77279Z" style="fill:#2e2b2e" />
<path id="e0809366-ab32-4e29-9c71-05d2e5090c80" data-name="cannon3smoke0" d="M252.704,187.77279a1.91716,1.91716,0,0,1-2.06491,1.72349c-.03939,0-.08043-.00163-.11982-.00163a1.44033,1.44033,0,0,1-1.22122.87815,1.63926,1.63926,0,0,1-1.4149-1.37715,1.87211,1.87211,0,0,1-.37589.03611c-.84041,0-1.53308-.50063-1.53308-1.10795a.93263.93263,0,0,1,.33813-.691.7949.7949,0,0,1-.22816-.54,1.03528,1.03528,0,0,1,.691-.86995.76726.76726,0,0,1,.67954-.75835.39028.39028,0,0,1,.087.00822,1.35078,1.35078,0,0,1,1.18183-1.1014,1.28839,1.28839,0,0,1,1.126.9389,1.4381,1.4381,0,0,1,1.17362,1.16869A1.84243,1.84243,0,0,1,252.704,187.77279Z" style="fill:#2e2b2e" />
<path id="a19e2f58-5b76-4768-9b47-da039048322a" data-name="cannon0smoke0" d="M216.8873,187.77279a1.91716,1.91716,0,0,1-2.06491,1.72349c-.03939,0-.08043-.00163-.11982-.00163a1.44035,1.44035,0,0,1-1.22122.87815,1.63924,1.63924,0,0,1-1.4149-1.37715,1.87221,1.87221,0,0,1-.3759.03611c-.8404,0-1.53308-.50063-1.53308-1.10795a.93267.93267,0,0,1,.33813-.691.79493.79493,0,0,1-.22815-.54,1.03528,1.03528,0,0,1,.691-.86995.76726.76726,0,0,1,.67954-.75835.39039.39039,0,0,1,.087.00822,1.35076,1.35076,0,0,1,1.18182-1.1014,1.28838,1.28838,0,0,1,1.126.9389,1.43808,1.43808,0,0,1,1.17362,1.16869A1.84243,1.84243,0,0,1,216.8873,187.77279Z" style="fill:#2e2b2e" />
<path id="b19f6e4f-8994-4c34-b060-35cb5185017e" data-name="cannon4smoke0" d="M264.64286,187.77279a1.91716,1.91716,0,0,1-2.06491,1.72349c-.03939,0-.08042-.00163-.11982-.00163a1.44032,1.44032,0,0,1-1.22121.87815,1.63926,1.63926,0,0,1-1.41491-1.37715,1.87211,1.87211,0,0,1-.37589.03611c-.84041,0-1.53308-.50063-1.53308-1.10795a.93263.93263,0,0,1,.33813-.691.7949.7949,0,0,1-.22816-.54,1.03528,1.03528,0,0,1,.691-.86995.76726.76726,0,0,1,.67954-.75835.39028.39028,0,0,1,.087.00822,1.35078,1.35078,0,0,1,1.18183-1.1014,1.28839,1.28839,0,0,1,1.126.9389,1.43809,1.43809,0,0,1,1.17362,1.16869A1.84243,1.84243,0,0,1,264.64286,187.77279Z" style="fill:#2e2b2e" />
<path id="ba6b7079-163d-4043-ae9f-a0882dc30b69" data-name="cannon1smoke0" d="M228.82619,187.77279a1.91716,1.91716,0,0,1-2.06491,1.72349c-.03939,0-.08043-.00163-.11982-.00163a1.44035,1.44035,0,0,1-1.22122.87815,1.63924,1.63924,0,0,1-1.4149-1.37715,1.87218,1.87218,0,0,1-.37589.03611c-.84041,0-1.53309-.50063-1.53309-1.10795a.93265.93265,0,0,1,.33814-.691.7949.7949,0,0,1-.22816-.54,1.03528,1.03528,0,0,1,.691-.86995.76726.76726,0,0,1,.67954-.75835.39039.39039,0,0,1,.087.00822,1.35077,1.35077,0,0,1,1.18182-1.1014,1.28841,1.28841,0,0,1,1.126.9389,1.4381,1.4381,0,0,1,1.17362,1.16869A1.84243,1.84243,0,0,1,228.82619,187.77279Z" style="fill:#2e2b2e" />
<circle id="a8ba1cdd-c75f-45f3-8d55-a8ad6fb9a1e7" data-name="cannon4ball" cx="261.27795" cy="187.45931" r="1.824" style="fill:#26252a" />
<circle id="f3502cab-41ed-4e94-86de-e5cef3beb3fd" data-name="cannon3ball" cx="249.33906" cy="187.45931" r="1.824" style="fill:#26252a" />
<circle id="b90ef171-e030-4946-ad51-a93193675a5f" data-name="cannon1ball" cx="225.46128" cy="187.45931" r="1.824" style="fill:#26252a" />
<circle id="f94b04a4-ce24-4956-b636-4d3f042d2fa1" data-name="cannon2ball" cx="237.40017" cy="187.45931" r="1.824" style="fill:#26252a" />
<circle id="aa0187bd-9276-4f85-b6c2-d44e29cc68eb" data-name="cannon0ball" cx="213.52239" cy="187.45931" r="1.824" style="fill:#26252a" />
<path id="e4e9b358-c979-4c7d-8ca0-b9de4f900a89" data-name="cloud3" d="M144.12386,141.12639c0,2.56523-13.318,2.80605-19.07181,2.80605H59.53465c-7.78053,0-17.48646-.78719-17.48646-3.00049,0-1.91227,7.28487-3.89383,14.25975-4.79272.9837-3.80335,9.78607-7.52189,19.71629-7.52189,1.98012,0,4.03654.02969,6.0633.09754,4.67678-2.98077,12.78377-5.09232,20.365-5.09232,11.55417,0,27.51376,6.03785,27.51376,11.44817a1.76741,1.76741,0,0,1-.02119.301C136.20765,136.894,144.12386,139.15051,144.12386,141.12639Z" style="fill:#454a51" />
<path id="ab7a4648-bbca-417b-b59e-42f4a8b70297" data-name="cloud2" d="M44.60253,254.27227c0,3.73,10.17181,5.78,17.61954,5.78h48.07364v-.01a2.62865,2.62865,0,0,0,.27548.01c5.2032,0,18.76214-2.54,18.76214-7.05,0-3.94-10.335-8.07-16.42581-9.06-4.64208-5.07-17.14-9.33-26.82205-9.33-11.3859,0-29.00538,7.92-31.07649,14.34C49.30588,250.50225,44.60253,252.47228,44.60253,254.27227Z" style="fill:#d3d7d9" />
<path id="a5fd5b8d-449a-4f4a-a6cf-b960a2cd3f3f" data-name="cloud1" d="M300.62085,268.31427c0,2.83,3.584,4.22,8.16465,4.22h25.36337c3.39311,0,8.52519-.2,8.52519-2.52,0-1.41-2.24792-3.33-4.78215-4.64-.23331-5.82-6.79683-11.5-14.26162-11.5-7.36939,0-15.91574,3.03-16.42469,8.63C303.7171,263.6543,300.62085,266.20428,300.62085,268.31427Z" style="fill:#d3d7d9" />
<path id="b3e81e81-2cf8-4198-bb00-5d1365b5ca8e" data-name="cloud0" d="M430.60253,162.44815c0,3.73-9.97,5.78-17.27,5.78h-47.12v-.01a2.52576,2.52576,0,0,1-.27.01c-5.1,0-18.38995-2.54-18.38995-7.05,0-3.94,10.12994-8.07,16.1-9.06,4.55-5.07,16.8-9.33,26.29-9.33,11.16,0,28.43,7.92,30.46,14.34C425.99249,158.67813,430.60253,160.64817,430.60253,162.44815Z" style="fill:#454a51" />
</g>
</g>
</g>
</svg>
</div>
</div>
#root {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f3e7;
}
#container {
position: relative;
width: 100%;
max-width: 1400px;
}
/**
* This would have been much simpler in AE, but I wanted to mix it up and see what animating paths was like
*/
const ballName = "ball";
const cloudNames = [
"cloud0",
"cloud1",
"cloud2",
"cloud3",
"cloud4",
"cloud5",
"cloud6",
"cloud7"
];
const smokeNames = ["smoke0", "smoke1", "smoke2"];
const cannonNames = ["cannon0", "cannon1", "cannon2", "cannon3", "cannon4"];
const createBallTarget = (cannonIndex) =>
`[data-name="${cannonNames[cannonIndex]}${ballName}"]`;
const createSmokeTarget = (cannonIndex, smokeIndex) =>
`[data-name="${cannonNames[cannonIndex]}${smokeNames[smokeIndex]}"]`;
const createCloudTarget = (cloudIndex) =>
`[data-name="${cloudNames[cloudIndex]}"]`;
const randomIntFromInterval = (min, max) =>
Math.floor(Math.random() * (max - min + 1) + min);
const randomDoubleFromInterval = (min, max) =>
(Math.random() * (max - min + 1) + min).toFixed(2);
// used to make transformOrigin be center in reference to the path rather than the entire SVG
const setTransformOrigin = (target) => {
const path = document.querySelectorAll(target)[0];
const { x, y, height, width } = path.getBBox();
path.style.transformOrigin = `${x + width / 2}px ${y + height / 2}px`;
};
const resetCannon = (cannonIndex) => {
anime.set(createBallTarget(cannonIndex), {
opacity: 0,
translateX: 0,
translateY: 0
});
setTransformOrigin(createCloudTarget(2));
smokeNames.forEach((st, i) => {
setTransformOrigin(createSmokeTarget(cannonIndex, i));
anime.set(createSmokeTarget(cannonIndex, i), {
opacity: 0,
translateX: 0,
translateY: 0
});
});
};
const fireCannon = (cannonIndex) => {
const smokeIndex = randomIntFromInterval(0, 2);
const smokeTarget = createSmokeTarget(cannonIndex, smokeIndex);
const ballTarget = createBallTarget(cannonIndex);
const { height, width, x, y } = document
.querySelectorAll(smokeTarget)[0]
.getBBox();
let smokeTimeLine = anime.timeline({
easing: "easeOutElastic(1, .8)"
});
smokeTimeLine.set({
targets: smokeTarget,
rotate: `${randomIntFromInterval(0, 180)}deg`,
transformOrigin: `${x}px ${y}px 0`
});
smokeTimeLine
.add({
targets: smokeTarget,
opacity: [0.0, 1],
scale: [1, randomDoubleFromInterval(2.5, 4)],
duration: 1000
})
.add(
{
targets: smokeTarget,
opacity: [1, 0],
duration: 2000
},
"-=700"
);
let cannonBallTimeLine = anime.timeline({ easing: "linear" });
cannonBallTimeLine
.add({
targets: ballTarget,
opacity: [0.0, 1],
duration: 20
})
.add({
targets: ballTarget,
translateX: `-${randomIntFromInterval(31, 33)}%`,
translateY: [
{
value: -1 * randomIntFromInterval(20, 30),
easing: "easeOutCubic"
},
{
value: randomIntFromInterval(62, 64),
easing: "easeInCirc"
}
],
complete: () =>
anime({
targets: createCloudTarget(2),
scale: [1, 1.05, 1],
duration: 250,
easing: `spring(1, 80, 10, 20)`
})
})
.add({
targets: ballTarget,
opacity: [1, 0.0],
duration: 20
});
};
const resetCannons = () => {
resetCannon(0);
resetCannon(1);
resetCannon(2);
resetCannon(3);
resetCannon(4);
};
resetCannons();
const cloudAnimation = (i, maxDelta) => {
anime({
targets: createCloudTarget(i),
translateX: () => anime.random(-1 * maxDelta, maxDelta),
translateY: () => anime.random(-1 * maxDelta, maxDelta),
duration: randomIntFromInterval(3000, 5000),
easing: `easeInOutSine`,
complete: () => cloudAnimation(i, maxDelta)
});
};
const animateSurroundingClouds = () => {
cloudAnimation(0, 8);
cloudAnimation(1, 8);
cloudAnimation(2, 8);
cloudAnimation(3, 8);
};
const animateShipClouds = () => {
cloudAnimation(4, 8);
cloudAnimation(5, 8);
cloudAnimation(6, 8);
cloudAnimation(7, 8);
};
animateSurroundingClouds();
animateShipClouds();
const staggerFire = (i) => {
setTimeout(() => fireCannon(i), i * 200);
};
const setupReoccuringFire = (i) => {
setTimeout(() => {
resetCannon(i);
fireCannon(i);
setupReoccuringFire(i);
}, randomIntFromInterval(3000, 5000));
};
setTimeout(() => {
resetCannons();
staggerFire(0);
staggerFire(1);
staggerFire(2);
staggerFire(3);
staggerFire(4);
setupReoccuringFire(0);
setupReoccuringFire(1);
setupReoccuringFire(2);
setupReoccuringFire(3);
setupReoccuringFire(4);
}, 3000);
Also see: Tab Triggers