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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <div class="background">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.23 176.82"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#81d4fa;}.cls-3,.cls-5{opacity:0.59;}.cls-4,.cls-5{fill:#fefefe;}.cls-6{fill:#00796b;}.cls-7{fill:#26a69a;}.cls-8{fill:#e0e0e0;}.cls-9{fill:#fafafa;}.cls-10{fill:#00897b;}.cls-11{fill:#80cbc4;}.cls-12{fill:#00695c;}.cls-13{opacity:0.35;mix-blend-mode:multiply;}.cls-14{fill:#e57373;}.cls-15{fill:#9ccc65;}.cls-16{fill:#7cb342;}.cls-17{fill:#689f38;}.cls-18{fill:#8d6e63;}.cls-19{fill:#6d4c41;}.cls-20{fill:#fff;}.cls-21{fill:#e53935;}.cls-22{fill:#ef5350;}.cls-23{opacity:0.25;}.cls-24{fill:#80deea;}.cls-25{fill:#4dd0e1;}.cls-26{fill:#26c6da;}</style></defs><title>mountains-ship</title><g class="cls-1"><g id="Layer_1" data-name="Layer 1"><rect class="cls-2" width="243" height="120"/><g class="cls-3"><path class="cls-4" d="M83.93,60.72a6.73,6.73,0,0,1-2,1.87c-.31.19-.59.42-.91.58a5.94,5.94,0,0,1-2.57.54c-6.42.19-12.85,0-19.27.08a8.82,8.82,0,0,1-2.76-.42A5.56,5.56,0,0,1,54,61.9,4.2,4.2,0,0,1,53,59.38a6.36,6.36,0,0,1,.87-3.78,2.87,2.87,0,0,1,.59-.71,4.76,4.76,0,0,1,2.13-1.21,4.43,4.43,0,0,1,3.18.54,3.66,3.66,0,0,1,.81-2.65,3.78,3.78,0,0,1,3.12-1.22,3.61,3.61,0,0,1,1.2.33,5.84,5.84,0,0,1,2-3.26,5.42,5.42,0,0,1,3.44-1.25,4.88,4.88,0,0,1,2,.47,5.29,5.29,0,0,1,2.15,1.73A4,4,0,0,1,75,49.51a4,4,0,0,1,.1,2,5.73,5.73,0,0,1,2.8-1,6,6,0,0,1,2.22.29A5.55,5.55,0,0,1,82,51.7a9,9,0,0,1,2.21,2.41A6.62,6.62,0,0,1,85,57.3,6.17,6.17,0,0,1,83.93,60.72Z"/></g><g class="cls-3"><path class="cls-4" d="M209.24,74a6.12,6.12,0,0,0,2.16,2.12,6.27,6.27,0,0,0,3.08.75c6.16.11,12.32,0,18.48.08a8.46,8.46,0,0,0,2.65-.4,5.34,5.34,0,0,0,2.29-1.42,4,4,0,0,0,1-2.42,6.1,6.1,0,0,0-.84-3.62,2.75,2.75,0,0,0-.57-.68,4.57,4.57,0,0,0-2-1.16,4.25,4.25,0,0,0-3.05.52,3.51,3.51,0,0,0-.77-2.54,3.62,3.62,0,0,0-3-1.17,3.46,3.46,0,0,0-1.15.32,5.6,5.6,0,0,0-1.91-3.13,5.2,5.2,0,0,0-3.3-1.2,4.68,4.68,0,0,0-1.9.45,5.07,5.07,0,0,0-2.06,1.66,3.86,3.86,0,0,0-.57,1.09,3.81,3.81,0,0,0-.1,1.92,5.49,5.49,0,0,0-2.68-.94,5.71,5.71,0,0,0-2.13.28,5.32,5.32,0,0,0-1.76.84A8.62,8.62,0,0,0,209,67.61a6.35,6.35,0,0,0-.76,3.06A6.56,6.56,0,0,0,209.24,74Z"/></g><path class="cls-5" d="M6.26,71.71a3.9,3.9,0,0,1,.39-2.09,4.16,4.16,0,0,1,2.65-2,3,3,0,0,1,.32-2.49A3,3,0,0,1,13,64a5,5,0,0,1,4.76-4,4.85,4.85,0,0,1,4.1,2.57,4.57,4.57,0,0,1,4.95.89,3.94,3.94,0,0,1,1,2.21,5.14,5.14,0,0,1,.93-.18,5,5,0,0,1,1.31,0,4.8,4.8,0,0,1,1.79.71,3.67,3.67,0,0,1,1.13,1.09,4.9,4.9,0,0,1,.45.87,5.24,5.24,0,0,1,.32,2.45c-.21,1.47-1.77,3-4,3.54l-19.34,0A4.37,4.37,0,0,1,6.77,72.8,3.19,3.19,0,0,1,6.26,71.71Z"/><path class="cls-5" d="M147.62,62.58a4.1,4.1,0,0,1,.41-2.2,4.38,4.38,0,0,1,2.78-2.15,3,3,0,0,1,3.9-3.75,5.24,5.24,0,0,1,5-4.21A5.1,5.1,0,0,1,164,53a4.81,4.81,0,0,1,5.2.94,4.14,4.14,0,0,1,1,2.33,5.4,5.4,0,0,1,1-.19,5.23,5.23,0,0,1,1.38,0,5,5,0,0,1,1.88.74A3.86,3.86,0,0,1,175.68,58a5.15,5.15,0,0,1,.47.92,5.51,5.51,0,0,1,.34,2.58c-.22,1.55-1.86,3.1-4.17,3.72l-20.33,0c-.29,0-2.62.14-3.83-1.5A3.35,3.35,0,0,1,147.62,62.58Z"/><polygon class="cls-6" points="184.48 63.82 160.21 115.12 183.5 115.12 189.35 63.82 184.48 63.82"/><polygon class="cls-7" points="197.31 63.82 189.35 63.82 183.5 115.12 221.59 115.12 197.31 63.82"/><path class="cls-8" d="M182.67,67.65l3-2.09L188.19,74l2.71-23.75Z"/><path class="cls-9" d="M190.9,50.27h0L188.19,74h0l2.22-4.61,3.84,1.71,2.83-4.71,2.65,2.54Z"/><polygon class="cls-10" points="81.14 64.73 61.94 105.31 80.36 105.31 84.99 64.73 81.14 64.73"/><polygon class="cls-11" points="91.29 64.73 84.99 64.73 80.36 105.31 110.49 105.31 91.29 64.73"/><path class="cls-8" d="M79.7,67.76l2.4-1.65,2,6.69L86.21,54Z"/><path class="cls-9" d="M86.21,54h0L84.07,72.8h0l1.76-3.65,3,1.35,2.24-3.73,2.1,2Z"/><polygon class="cls-12" points="126.97 42.51 92.72 114.88 125.58 114.88 133.84 42.51 126.97 42.51"/><polygon class="cls-10" points="145.07 42.51 133.84 42.51 125.58 114.88 179.32 114.88 145.07 42.51"/><path class="cls-8" d="M124.41,47.91,128.69,45l3.51,11.93L136,23.38Z"/><path class="cls-9" d="M136,23.38h0L132.2,56.89h0l3.13-6.51,5.42,2.42,4-6.65,3.74,3.58Z"/><g class="cls-13"><path d="M14.8,32a9,9,0,0,0,2.64,2.5c.41.25.79.56,1.22.78a7.92,7.92,0,0,0,3.43.72c8.57.26,17.13.06,25.7.11a11.77,11.77,0,0,0,3.68-.56,7.42,7.42,0,0,0,3.19-2,5.6,5.6,0,0,0,1.42-3.37,8.49,8.49,0,0,0-1.16-5,3.83,3.83,0,0,0-.79-1,6.35,6.35,0,0,0-2.84-1.61,5.91,5.91,0,0,0-4.25.72A4.89,4.89,0,0,0,46,19.82a5,5,0,0,0-4.16-1.63,4.81,4.81,0,0,0-1.6.44,7.78,7.78,0,0,0-2.66-4.35A7.23,7.23,0,0,0,33,12.62a6.51,6.51,0,0,0-2.64.63,7.05,7.05,0,0,0-2.87,2.31,5.37,5.37,0,0,0-.79,1.51,5.3,5.3,0,0,0-.14,2.68,7.64,7.64,0,0,0-3.73-1.31,7.94,7.94,0,0,0-3,.39A7.4,7.4,0,0,0,17.39,20a12,12,0,0,0-2.95,3.22,8.83,8.83,0,0,0-1.05,4.26A8.22,8.22,0,0,0,14.8,32Z"/></g><path class="cls-4" d="M13.8,31a9,9,0,0,0,2.64,2.5c.41.25.79.56,1.22.78a7.92,7.92,0,0,0,3.43.72c8.57.26,17.13.06,25.7.11a11.77,11.77,0,0,0,3.68-.56,7.42,7.42,0,0,0,3.19-2,5.6,5.6,0,0,0,1.42-3.37,8.49,8.49,0,0,0-1.16-5,3.83,3.83,0,0,0-.79-1,6.35,6.35,0,0,0-2.84-1.61,5.91,5.91,0,0,0-4.25.72A4.89,4.89,0,0,0,45,18.82a5,5,0,0,0-4.16-1.63,4.81,4.81,0,0,0-1.6.44,7.78,7.78,0,0,0-2.66-4.35A7.23,7.23,0,0,0,32,11.62a6.51,6.51,0,0,0-2.64.63,7.05,7.05,0,0,0-2.87,2.31,5.37,5.37,0,0,0-.79,1.51,5.3,5.3,0,0,0-.14,2.68,7.64,7.64,0,0,0-3.73-1.31,7.94,7.94,0,0,0-3,.39A7.4,7.4,0,0,0,16.39,19a12,12,0,0,0-2.95,3.22,8.83,8.83,0,0,0-1.05,4.26A8.22,8.22,0,0,0,13.8,31Z"/><g class="cls-13"><path d="M219.83,34.73a7,7,0,0,1-2.45,2.41,7.12,7.12,0,0,1-3.5.85c-7,.12-14,.05-21,.09a9.6,9.6,0,0,1-3-.46,6.06,6.06,0,0,1-2.6-1.61,4.57,4.57,0,0,1-1.16-2.75,6.92,6.92,0,0,1,.95-4.11,3.12,3.12,0,0,1,.65-.78A5.18,5.18,0,0,1,190,27.07a4.82,4.82,0,0,1,3.46.59,4,4,0,0,1,.88-2.88,4.11,4.11,0,0,1,3.39-1.33,3.93,3.93,0,0,1,1.31.36,6.35,6.35,0,0,1,2.17-3.55A5.9,5.9,0,0,1,205,18.89a5.31,5.31,0,0,1,2.15.51,5.76,5.76,0,0,1,2.34,1.88,4.38,4.38,0,0,1,.64,1.23,4.32,4.32,0,0,1,.11,2.18,6.23,6.23,0,0,1,3-1.07,6.48,6.48,0,0,1,2.41.31,6,6,0,0,1,2,.95,9.79,9.79,0,0,1,2.41,2.63A7.2,7.2,0,0,1,221,31,7.44,7.44,0,0,1,219.83,34.73Z"/></g><path class="cls-4" d="M218.83,33.73a7,7,0,0,1-2.45,2.41,7.12,7.12,0,0,1-3.5.85c-7,.12-14,.05-21,.09a9.6,9.6,0,0,1-3-.46,6.06,6.06,0,0,1-2.6-1.61,4.57,4.57,0,0,1-1.16-2.75,6.92,6.92,0,0,1,.95-4.11,3.12,3.12,0,0,1,.65-.78A5.18,5.18,0,0,1,189,26.07a4.82,4.82,0,0,1,3.46.59,4,4,0,0,1,.88-2.88,4.11,4.11,0,0,1,3.39-1.33,3.93,3.93,0,0,1,1.31.36,6.35,6.35,0,0,1,2.17-3.55A5.9,5.9,0,0,1,204,17.89a5.31,5.31,0,0,1,2.15.51,5.76,5.76,0,0,1,2.34,1.88,4.38,4.38,0,0,1,.64,1.23,4.32,4.32,0,0,1,.11,2.18,6.23,6.23,0,0,1,3-1.07,6.48,6.48,0,0,1,2.41.31,6,6,0,0,1,2,.95,9.79,9.79,0,0,1,2.41,2.63A7.2,7.2,0,0,1,220,30,7.44,7.44,0,0,1,218.83,33.73Z"/><g class="cls-13"><path d="M82.51,40A5.21,5.21,0,0,1,83,37.24a5.56,5.56,0,0,1,3.54-2.74,3.79,3.79,0,0,1,5-4.76,6.66,6.66,0,0,1,6.36-5.35,6.48,6.48,0,0,1,5.48,3.44A6.11,6.11,0,0,1,110,29a5.26,5.26,0,0,1,1.3,3,6.86,6.86,0,0,1,1.24-.25,6.65,6.65,0,0,1,1.75,0,6.41,6.41,0,0,1,2.39.94,4.91,4.91,0,0,1,1.51,1.46,6.55,6.55,0,0,1,.6,1.16,7,7,0,0,1,.43,3.28c-.28,2-2.37,3.94-5.3,4.73l-25.84,0c-.37,0-3.33.18-4.87-1.9A4.26,4.26,0,0,1,82.51,40Z"/></g><path class="cls-4" d="M81.51,39A5.21,5.21,0,0,1,82,36.24a5.56,5.56,0,0,1,3.54-2.74,3.79,3.79,0,0,1,5-4.76,6.66,6.66,0,0,1,6.36-5.35,6.48,6.48,0,0,1,5.48,3.44A6.11,6.11,0,0,1,109,28a5.26,5.26,0,0,1,1.3,3,6.86,6.86,0,0,1,1.24-.25,6.65,6.65,0,0,1,1.75,0,6.41,6.41,0,0,1,2.39.94,4.91,4.91,0,0,1,1.51,1.46,6.55,6.55,0,0,1,.6,1.16,7,7,0,0,1,.43,3.28c-.28,2-2.37,3.94-5.3,4.73l-25.84,0c-.37,0-3.33.18-4.87-1.9A4.26,4.26,0,0,1,81.51,39Z"/><rect class="cls-14" x="25.06" y="136.36" width="20.11" height="2"/><g id="_Group_" data-name="&lt;Group&gt;"><path class="cls-15" d="M243,149.38v22.7H0V146.2H.26a5.44,5.44,0,0,0,5.2,3.52,5.44,5.44,0,0,0,5.2-3.52h.52a5.42,5.42,0,0,0,5.2,3.52,5.4,5.4,0,0,0,5.16-3.52H22a5.57,5.57,0,0,0,10.58,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.39,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.57,5.57,0,0,0,10.58,0h.34a5.56,5.56,0,0,0,10.57,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.56,5.56,0,0,0,10.57,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.57,5.57,0,0,0,10.36,0H153a5.57,5.57,0,0,0,10.58,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.39,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.57,5.57,0,0,0,10.58,0h.34a5.56,5.56,0,0,0,10.57,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.58,5.58,0,0,0,10.37,0h.46A5.05,5.05,0,0,0,243,149.38Z"/><path class="cls-15" d="M243,109.12v40.25a5.05,5.05,0,0,1-2.66-3.17h-.46a5.58,5.58,0,0,1-10.37,0H229a5.6,5.6,0,0,1-10.4,0h-.43a5.56,5.56,0,0,1-10.57,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.58,5.58,0,0,1-10.37,0h-.52a5.6,5.6,0,0,1-10.39,0h-.43a5.57,5.57,0,0,1-10.58,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.57,5.57,0,0,1-10.36,0h-.52a5.6,5.6,0,0,1-10.4,0h-.43a5.57,5.57,0,0,1-10.58,0h-.34a5.56,5.56,0,0,1-10.57,0h-.46a5.58,5.58,0,0,1-10.37,0H98a5.6,5.6,0,0,1-10.4,0h-.43a5.56,5.56,0,0,1-10.57,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.58,5.58,0,0,1-10.37,0h-.52a5.6,5.6,0,0,1-10.39,0H43.5a5.57,5.57,0,0,1-10.58,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.4,5.4,0,0,1-5.16,3.52,5.42,5.42,0,0,1-5.2-3.52h-.52a5.44,5.44,0,0,1-5.2,3.52,5.44,5.44,0,0,1-5.2-3.52H0v-29a238.56,238.56,0,0,1,41.74-10.51A254.55,254.55,0,0,1,84,103.75c57,.29,60.16,14.24,95.5,9.74,8.11-1,26.15-4.08,52.25-4.41C236.55,109,240.48,109.08,243,109.12Z"/></g><path class="cls-16" d="M168.86,101.18v9.94c2.33,0,4.22-2.23,4.22-5S171.19,101.18,168.86,101.18Z"/><path class="cls-17" d="M164.64,106.15c0,2.75,1.89,5,4.22,5v-9.94C166.53,101.18,164.64,103.4,164.64,106.15Z"/><rect class="cls-18" x="168.52" y="111.06" width="0.64" height="5.62"/><path class="cls-16" d="M144.11,99.9v8.55c2,0,3.63-1.91,3.63-4.27S146.12,99.9,144.11,99.9Z"/><path class="cls-17" d="M140.48,104.18c0,2.36,1.63,4.27,3.63,4.27V99.9C142.11,99.9,140.48,101.82,140.48,104.18Z"/><rect class="cls-18" x="143.82" y="108.39" width="0.55" height="4.83"/><path class="cls-16" d="M159.46,99.75v13.63c3.2,0,5.79-3.05,5.79-6.82S162.66,99.75,159.46,99.75Z"/><path class="cls-17" d="M153.67,106.57c0,3.76,2.59,6.82,5.79,6.82V99.75C156.26,99.75,153.67,102.8,153.67,106.57Z"/><rect class="cls-18" x="158.99" y="113.29" width="0.88" height="7.71"/><path class="cls-18" d="M229,110.69h-.77l-.41,2.16,1.15,0H230l-.35-2.14Z"/><polygon class="cls-16" points="232.73 107.64 234.27 107.64 232.04 103.78 232.9 103.78 228.91 96.88 228.91 111.2 234.79 111.2 232.73 107.64"/><polygon class="cls-17" points="224.92 103.78 225.78 103.78 223.56 107.64 225.09 107.64 223.03 111.2 228.91 111.2 228.91 96.88 224.92 103.78"/><path class="cls-18" d="M200,134.5h-1.55l-.83,4.31,2.3,0h2.24l-.69-4.28Z"/><polygon class="cls-16" points="207.55 128.41 210.61 128.41 206.17 120.72 207.89 120.72 199.92 106.92 199.92 135.53 211.66 135.53 207.55 128.41"/><polygon class="cls-17" points="191.96 120.72 193.68 120.72 189.24 128.41 192.3 128.41 188.19 135.53 199.92 135.53 199.92 106.92 191.96 120.72"/><path class="cls-18" d="M79.77,113.88h-1l-.51,2.66,1.42,0H81.1l-.43-2.65Z"/><polygon class="cls-16" points="84.42 110.12 86.31 110.12 83.56 105.37 84.63 105.37 79.7 96.84 79.7 114.52 86.96 114.52 84.42 110.12"/><polygon class="cls-17" points="74.78 105.37 75.84 105.37 73.1 110.12 74.99 110.12 72.45 114.52 79.7 114.52 79.7 96.84 74.78 105.37"/><path class="cls-18" d="M120.7,123.65h-1.36l-.73,3.81,2,0h2l-.61-3.78Z"/><polygon class="cls-16" points="127.34 118.27 130.04 118.27 126.12 111.48 127.64 111.48 120.61 99.3 120.61 124.56 130.97 124.56 127.34 118.27"/><polygon class="cls-17" points="113.57 111.48 115.09 111.48 111.17 118.27 113.87 118.27 110.24 124.56 120.61 124.56 120.61 99.3 113.57 111.48"/><path class="cls-18" d="M65.72,106.69H65l-.4,2.09h2.2l-.34-2.08Z"/><polygon class="cls-16" points="69.38 103.74 70.86 103.74 68.71 100 69.54 100 65.67 93.3 65.67 107.19 71.38 107.19 69.38 103.74"/><polygon class="cls-17" points="61.8 100 62.64 100 60.48 103.74 61.97 103.74 59.97 107.19 65.67 107.19 65.67 93.3 61.8 100"/><path class="cls-18" d="M34.38,107.49h-.56l-.3,1.55h1.63l-.25-1.54Z"/><polygon class="cls-16" points="37.09 105.3 38.19 105.3 36.59 102.52 37.21 102.52 34.34 97.55 34.34 107.86 38.57 107.86 37.09 105.3"/><polygon class="cls-17" points="31.47 102.52 32.09 102.52 30.49 105.3 31.59 105.3 30.11 107.86 34.34 107.86 34.34 97.55 31.47 102.52"/><path class="cls-18" d="M97.07,103.36h-.54l-.29,1.5h1.58l-.24-1.49Z"/><polygon class="cls-16" points="99.7 101.23 100.77 101.23 99.22 98.55 99.82 98.55 97.04 93.73 97.04 103.72 101.13 103.72 99.7 101.23"/><polygon class="cls-17" points="94.26 98.55 94.86 98.55 93.31 101.23 94.37 101.23 92.94 103.72 97.04 103.72 97.04 93.73 94.26 98.55"/><path class="cls-18" d="M186.71,111.37h-.54l-.29,1.5h1.58l-.24-1.49Z"/><polygon class="cls-16" points="189.33 109.25 190.4 109.25 188.85 106.56 189.45 106.56 186.67 101.75 186.67 111.73 190.77 111.73 189.33 109.25"/><polygon class="cls-17" points="183.89 106.56 184.49 106.56 182.94 109.25 184.01 109.25 182.57 111.73 186.67 111.73 186.67 101.75 183.89 106.56"/><path class="cls-16" d="M24,106.16v11.19c2.63,0,4.76-2.51,4.76-5.6S26.62,106.16,24,106.16Z"/><path class="cls-17" d="M19.24,111.75c0,3.09,2.13,5.6,4.76,5.6V106.16C21.37,106.16,19.24,108.66,19.24,111.75Z"/><rect class="cls-18" x="23.6" y="117.28" width="0.72" height="6.33"/><path class="cls-16" d="M10.2,104.63v19.89c4.67,0,8.45-4.45,8.45-9.94S14.86,104.63,10.2,104.63Z"/><path class="cls-17" d="M1.75,114.57c0,5.49,3.78,9.94,8.45,9.94V104.63C5.53,104.63,1.75,109.08,1.75,114.57Z"/><rect class="cls-18" x="9.51" y="124.38" width="1.28" height="11.25"/><path class="cls-16" d="M224.76,116.68v11.83c2.78,0,5-2.65,5-5.92S227.54,116.68,224.76,116.68Z"/><path class="cls-17" d="M219.73,122.6c0,3.27,2.25,5.92,5,5.92V116.68C222,116.68,219.73,119.33,219.73,122.6Z"/><rect class="cls-18" x="224.35" y="128.43" width="0.76" height="6.69"/><path class="cls-16" d="M236.54,117.25V133c3.7,0,6.69-3.53,6.69-7.88S240.23,117.25,236.54,117.25Z"/><path class="cls-17" d="M229.84,125.12c0,4.35,3,7.88,6.69,7.88V117.25C232.84,117.25,229.84,120.77,229.84,125.12Z"/><rect class="cls-18" x="235.99" y="132.9" width="1.02" height="8.91"/><rect class="cls-19" x="44.77" y="95.3" width="0.78" height="43.03"/><path class="cls-20" d="M81,138.36H25.06l7.59,11.23,20.38,0,20.38,0Z"/><path class="cls-14" d="M43.42,102.65a94,94,0,0,0,.13,31.77,40,40,0,0,0-16.65.64Z"/><path class="cls-21" d="M46.07,99.2a69.18,69.18,0,0,1,2.58,20.74,68.82,68.82,0,0,1-2,14.49A133.89,133.89,0,0,1,65,133.33c4.65,0,9,.32,13,.74Z"/><path class="cls-22" d="M44.27,98.32H39.93L41.62,97l-1.68-1.38h4.33Z"/><rect class="cls-21" x="42.94" y="95.08" width="2.61" height="2.71"/><path class="cls-23" d="M44.27,98.32l-1.32-.53h1.32Z"/><rect class="cls-21" x="25.06" y="136.86" width="55.95" height="2"/><g id="_Group_2" data-name="&lt;Group&gt;"><path class="cls-24" d="M243,147.87v22.66H0V144.65H.26a5.44,5.44,0,0,0,5.2,3.52,5.44,5.44,0,0,0,5.2-3.52h.52a5.42,5.42,0,0,0,5.2,3.52,5.4,5.4,0,0,0,5.16-3.52H22a5.57,5.57,0,0,0,10.58,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.39,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.57,5.57,0,0,0,10.58,0h.34a5.56,5.56,0,0,0,10.57,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.56,5.56,0,0,0,10.57,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.57,5.57,0,0,0,10.36,0H153a5.57,5.57,0,0,0,10.58,0h.34a5.57,5.57,0,0,0,10.58,0h.43a5.6,5.6,0,0,0,10.39,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.57,5.57,0,0,0,10.58,0h.34a5.56,5.56,0,0,0,10.57,0h.43a5.6,5.6,0,0,0,10.4,0h.52a5.58,5.58,0,0,0,10.37,0h.46a5.14,5.14,0,0,0,2.66,3.2Z"/></g><path class="cls-25" d="M.9,158.59h.26a5.44,5.44,0,0,0,5.2,3.4,5.44,5.44,0,0,0,5.2-3.4h.52a5.44,5.44,0,0,0,5.2,3.4,5.41,5.41,0,0,0,5.17-3.4h.46a5.37,5.37,0,0,0,5.29,3.71,5.37,5.37,0,0,0,5.28-3.71h.34a5.63,5.63,0,0,0,10.58,0h.43a5.67,5.67,0,0,0,10.4,0h.52a5.64,5.64,0,0,0,10.36,0h.46a5.63,5.63,0,0,0,10.58,0h.34a5.63,5.63,0,0,0,10.58,0h.43a5.67,5.67,0,0,0,10.39,0h.52a5.65,5.65,0,0,0,10.37,0h.46a5.63,5.63,0,0,0,10.58,0h.34a5.62,5.62,0,0,0,10.57,0h.43a5.67,5.67,0,0,0,10.4,0h.52a5.65,5.65,0,0,0,10.37,0h.46a4.63,4.63,0,0,0,.73,1.48A5.67,5.67,0,0,0,159,162a5.44,5.44,0,0,0,5.2-3.4h.52a5.64,5.64,0,0,0,10.36,0h.46a5.63,5.63,0,0,0,10.58,0h.34a5.63,5.63,0,0,0,10.58,0h.43a5.67,5.67,0,0,0,10.39,0h.52a5.65,5.65,0,0,0,10.37,0h.46a5.63,5.63,0,0,0,10.58,0h.34a5.62,5.62,0,0,0,10.57,0h.43A5,5,0,0,0,243,161v-5.43a5.73,5.73,0,0,1-2.45.56,5.39,5.39,0,0,1-5.29-3.83h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.58,5.58,0,0,1-10.37,0H213a5.6,5.6,0,0,1-10.39,0h-.43a5.57,5.57,0,0,1-10.58,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.57,5.57,0,0,1-10.36,0h-.52a5.44,5.44,0,0,1-5.2,3.52,5.6,5.6,0,0,1-4.32-2,4.85,4.85,0,0,1-.73-1.53h-.46a5.58,5.58,0,0,1-10.37,0h-.52a5.6,5.6,0,0,1-10.4,0h-.43a5.56,5.56,0,0,1-10.57,0H126a5.57,5.57,0,0,1-10.58,0H115a5.58,5.58,0,0,1-10.37,0h-.52a5.6,5.6,0,0,1-10.39,0h-.43a5.57,5.57,0,0,1-10.58,0h-.34a5.57,5.57,0,0,1-10.58,0h-.46a5.57,5.57,0,0,1-10.36,0H60.4a5.6,5.6,0,0,1-10.4,0h-.43a5.57,5.57,0,0,1-10.58,0h-.34a5.56,5.56,0,0,1-10.57,0h-.46a5.58,5.58,0,0,1-10.37,0h-.52a5.44,5.44,0,0,1-5.2,3.52,5.44,5.44,0,0,1-5.2-3.52H5.9a5.39,5.39,0,0,1-5.28,3.83,5.82,5.82,0,0,1-.62,0v4a4.64,4.64,0,0,0,.73-1.5Z"/><path class="cls-26" d="M243,161a5,5,0,0,1-1.91-2.41h-.43a5.62,5.62,0,0,1-10.57,0h-.34a5.63,5.63,0,0,1-10.58,0h-.46a5.65,5.65,0,0,1-10.37,0h-.52a5.67,5.67,0,0,1-10.39,0H197a5.63,5.63,0,0,1-10.58,0h-.34a5.63,5.63,0,0,1-10.58,0H175a5.64,5.64,0,0,1-10.36,0h-.52A5.44,5.44,0,0,1,159,162a5.67,5.67,0,0,1-4.32-1.92,4.63,4.63,0,0,1-.73-1.48h-.46a5.65,5.65,0,0,1-10.37,0h-.52a5.67,5.67,0,0,1-10.4,0h-.43a5.62,5.62,0,0,1-10.57,0h-.34a5.63,5.63,0,0,1-10.58,0h-.46a5.65,5.65,0,0,1-10.37,0h-.52a5.67,5.67,0,0,1-10.39,0h-.43a5.63,5.63,0,0,1-10.58,0h-.34a5.63,5.63,0,0,1-10.58,0h-.46a5.64,5.64,0,0,1-10.36,0h-.52a5.67,5.67,0,0,1-10.4,0H44.4a5.63,5.63,0,0,1-10.58,0h-.34a5.37,5.37,0,0,1-5.28,3.71,5.37,5.37,0,0,1-5.29-3.71h-.46a5.41,5.41,0,0,1-5.17,3.4,5.44,5.44,0,0,1-5.2-3.4h-.52a5.44,5.44,0,0,1-5.2,3.4,5.44,5.44,0,0,1-5.2-3.4H.73a4.64,4.64,0,0,1-.73,1.5v16.73H243Z"/></g></g></svg>
</div>
            
          
!
            
              .background {
  width: 800px;
  margin: 30px auto;
}

svg .cls-21, svg .cls-20, svg .cls-19, 
svg .cls-22, svg .cls-14, svg .cls-23
{  
  animation-name: ship-move, ship-move1;
  animation-duration: 6s, 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes ship-move {
    0% {
        transform: translate(0px);
    }
    50% {
        transform: translate(6px);
    }
}

@keyframes ship-move1 {
   0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-0.5deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

svg .cls-4:first-child, svg .cls-5 {
  animation-name: back-cloud-move;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translate(240px);  
}

@keyframes back-cloud-move {
    0% {
        transform: translate(240px);
    }
    100% {
        transform: translate(-240px);
    }
}

svg .cls-4:not(:first-child), svg .cls-13 {
  animation-name: cloud-move;
  animation-duration: 70s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;  
  transform: translate(-240px);
}

@keyframes cloud-move {
    0% {
        transform: translate(-240px);
    }
    100% {
        transform: translate(240px);
    }
}

svg .cls-24 {
  animation-name: wave1-move;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translateY(1px);
}

@keyframes wave1-move {
    0% {
        transform: translateY(1px);
    }
    50% {
        transform: translateY(-1px);
    }
}

svg .cls-25 {
  animation-name: wave2-move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translateY(0px);
}

@keyframes wave2-move {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(1px);
    }
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console