如何制作船舶动画

Question

如何制作船舶动画（如下图所示）？

我需要CSS或Javascript这两种技术中的哪一种？

Answer 1

这是浮动船的动画，希望你能从中学到一些东西。

HTML

<div class="wrap">
</div>
</div>

<div class="ocean"></div>
<div class="ocean-overlay"></div>
<div class="here-there">
    <div class="traslate">
        <div class="ship">
            <div class="bottom-1">
                <div class="bottom-1-top"></div>
                <div class="bottom-1-top-left"></div>
                <div class="bottom-1-top-right">
                    <div class="bottom-1-top-right-window"></div>
                </div>
            </div>
            <div class="ship-body">
                <div class="middle-window"></div>
                <div class="blue-strip-top"></div>
                <div class="blue-strip-bottom"></div>
                <div class="ship-body-top-back">
                    <div class="blue-strip-top-half"></div>
                </div>
                <div class="chimney-base">
                    <div class="chimney"></div>
                    <div class="chimney"></div>
                </div>
            </div>
            <div class="ship-body-top-front">
                <div class="top-antenna"></div>
                <div class="circular-base"></div>
                <div class="circular-base-1"></div>
            </div>
            <div class="ship-body-top-front-mirror"></div>
        </div>
    </div>
    </div>
</div>

CSS

html , body {height:100%;}
body {
    background: #4297cd;
    padding:0;
    margin:0;
}
.ship {
    width:350px;
    height:20px;

    margin-left:5%;
    position:   absolute;
}
.ship { 
    -webkit-animation:floating-ship 3s aletrnate ;
    -webkit-transition-timing-function: cubic-bezier(0,.5,.99,.54);
    -moz-animation:floating-ship 3s aletrnate ;
    -moz-transition-timing-function: cubic-bezier(0,.5,.99,.54);
}
 @-webkit-keyframes floating-ship {
     from {-webkit-transform:rotate(4deg);}
     to {-webkit-transform:rotate(-4deg);}
 }
 @-moz-keyframes floating-ship {
     from {-moz-transform:rotate(4deg);}
     to {-moz-transform:rotate(-4deg);}
 }
.bottom-1 {
    border-right:10px solid transparent;
    border-top:12px solid #54575c;
    border-left:16px solid transparent;
    width:250px;
    height:0px;
}
.bottom-1:after {
    content:'';
    display:block;
    position:absolute;
    top:-8px;
    left:-7px;
    border-right:10px solid transparent;
    border-top:8px solid #fff;
    border-left:7px solid transparent;
    width:276px;
    height:0px;
}
.bottom-1:before {
    content:'';
    display:block;
    position:absolute;
    top:-11px;
    left:-8px;
    border-right:1px solid transparent;
    border-top:3px solid #e3001b;
    border-left:1px solid transparent;
    width:293px;
    height:0px;
}
.bottom-1-top {
    width:295px;
    height:5px;
    background:#e5e9ec;
    position:absolute;
    top:-16px;
    left:-8px;
}
.bottom-1-top:after {
    content:'';
    display:block;
    position:absolute;
    height:5px;
    width:20px;
    background:red;
    -webkit-transform:skewX(-40deg);
    -moz-transform:skewX(-40deg);
    background:#e5e9ec;
    right:-2px;
}
.bottom-1-top-left {
    width:60px;
    height:15px;
    background:#fff;
    position:absolute;
    top:-31px;
    left:-8px;
}
.bottom-1-top-left:after {
    content:'';
    display:block;
    position:absolute;
    width:40px;
    height:15px;
    -webkit-transform:skewX(50deg);
    -moz-transform:skewX(50deg);
    background:#fff;
    right:-9px;
}
.bottom-1-top-left:before {
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8a9295;
    position:absolute;
    z-index:1;
    top:5px;
    left:8px;
    box-shadow:14px 0 0 #8a9295 , 28px 0 0 #8a9295 , 42px 0 0 #8a9295   ;
}
.bottom-1-top-right {
    width:107px;
    height:15px;
    background:#fff;
    position:absolute;
    top:-31px;
    left:180px;
}
.bottom-1-top-right:after {
    content:'';
    display:block;
    position:absolute;
    width:40px;
    height:15px;
    -webkit-transform:skewX(-50deg);
    -moz-transform:skewX(-50deg);
    background:#fff;
    left:-9px;
}
.bottom-1-top-right:before {
    content:'';
    display:block;
    position:absolute;
    width:40px;
    height:15px;
    -webkit-transform:skewX(-50deg);
    -moz-transform:skewX(-50deg);
    background:#fff;
    right:-13px;
}
.ship-body {
    width:235px;
    height:40px;
    background:#ebebeb;
    position:absolute;
    top:-54px;
    left:14px;
    z-index:-1;
    box-shadow: 0 -5px 7px rgba(0,0,0,0.1) inset;
}
.ship-body:before {
    position:absolute;
    left:-10px;
    content:'';
    width:40px;
    -webkit-transform:skewX(-34deg);
    -moz-transform:skewX(-34deg);
    height:30px;
    background:#ebebeb;
}
.ship-body:after {
    position:absolute;
    right:-16px;
    content:'';
    width:40px;
    -webkit-transform:skewX(44deg);
    -moz-transform:skewX(44deg);
    height:30px;
    background:#ebebeb;
}
.blue-strip-top {
    background:#72a4c4;
    width:224px;
    height:4px;
    position:absolute;
    top:6px;
    z-index:1;
    left:8px;
}
.blue-strip-top:before {
    content:'';
    position:absolute;
    width:10px;
    background:#72a4c4;
    height:4px;
    left:-7px;
    -webkit-transform:skewX(-30deg);
    -moz-transform:skewX(-30deg);
}
.blue-strip-top:after {
    content:'';
    position:absolute;
    width:10px;
    background:#72a4c4;
    height:4px;
    right:-5px;
    -webkit-transform:skewX(50deg);
    -moz-transform:skewX(50deg);
}
.blue-strip-bottom {
    background:#72a4c4;
    width:240px;
    height:4px;
    position:absolute;
    top:14px;
    z-index:1;
}
.blue-strip-bottom:before {
    content:'';
    position:absolute;
    width:10px;
    background:#72a4c4;
    height:4px;
    left:-5px;
    -webkit-transform:skewX(-30deg);
    -moz-transform:skewX(-30deg);
}
.blue-strip-bottom:after {
    content:'';
    position:absolute;
    width:10px;
    background:#72a4c4;
    height:4px;
    right:-5px;
    -webkit-transform:skewX(50deg);
    -moz-transform:skewX(50deg);
}
.ship-body-top-back {
    height:15px;
    width:60px;
    position:absolute;
    background:#ebebeb;
    top:-12px;
    left:8px;
}
.ship-body-top-back:before {
    width:15px;
    height:15px;
    content:'';
    display:block;
    position:absolute;
    -webkit-transform:skewX(-34deg);
    -moz-transform:skewX(-34deg);
    background:#ebebeb;
    left:-5px;
}
.ship-body-top-back:after {
    width:15px;
    height:15px;
    content:'';
    display:block;
    position:absolute;
    -webkit-transform:skewX(43deg);
    -moz-transform:skewX(43deg);
    background:#ebebeb;
    right:-8px;
}
.ship-body-top-front {
    position:absolute;
    width:40px;
    height:10px;
    background:#efefef;
    right:120px;
    top:-74px;
}
.ship-body-top-front:before {
    height:30px;
    width:14px;
    background:#efefef;
    position:absolute;
    content:'';
    -webkit-transform:skewX(-40deg);
    -moz-transform:skewX(-40deg);
    left:-13px;
    z-index:-2;
}
.ship-body-top-front:after {
    height:10px;
    width:20px;
    background:#efefef;
    position:absolute;
    content:'';
    -webkit-transform:skewX(44deg);
    -moz-transform:skewX(44deg);
    right:-11px;
    z-index:-2;
}
.ship-body-top-front-mirror {
    background:#a5d4e4;
    width:40px;
    height:18px;
    position:absolute;
    top:-70px;
    right:125px;
    z-index:-4;
    border-radius:5px;
}
.ship-body-top-front-mirror:after {
    content:'';
    background:#a5d4e4;
    width:40px;
    height:18px;
    position:absolute;
    right:-16px;
    -webkit-transform:skewX(44deg);
    -moz-transform:skewX(44deg);
    z-index:-4;
}
.blue-strip-top-half {
    width:80%;
    top:8px;
    z-index:1;
    height:4px;
    background:#72a4c4;
    position:absolute;
    left:10%;
}
.blue-strip-top-half:before {
    content:'';
    width:10px;
    top:0;
    z-index:1;
    height:4px;
    background:#72a4c4;
    position:absolute;
    -webkit-transform:skewX(-30deg);
    -moz-transform:skewX(-30deg);
    left:-4px;
}
.blue-strip-top-half:after {
    content:'';
    width:10px;
    top:0;
    z-index:1;
    height:4px;
    background:#72a4c4;
    position:absolute;
    -webkit-transform:skewX(44deg);
    -moz-transform:skewX(44deg);
    right:-4px;
}
.top-antenna {
    width:8px;
    height:16px;
    background:#fff;
    position:absolute;
    top:-16px;
    left:20px;
    -webkit-transform:SkewX(44deg);
    -moz-transform:SkewX(44deg);
}
.top-antenna:before {
    content:'';
    position:absolute;
    width:20px;
    height:4px;
    background:#fff;
    display:block;
    top:-4px;
    -webkit-transform: skewX(-44deg) !important;
    -moz-transform: skewX(-44deg) !important;
    left: 2px;
}
.top-antenna:after {
    content:'';
    position:absolute;
    width:0px;
    height:0px;
    border-bottom: 20px solid #fff; 
    border-left: 2px solid transparent; 
    border-right: 2px solid transparent;
    display:block;
    top:-20px;
    right:5px;
    z-index:-1;
    left: 15px;
}
.circular-base {
    display: block;
position: absolute;
bottom: 10px;
left: 10px;
width: 7px;
height: 20px;
overflow: hidden;
}

.circular-base:before {
    display:block;
    content:'';
    position:absolute;
    bottom:0px;
    left:-10px;
    width:20px;
    height:20px;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 39%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(39%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.5)), color-stop(41%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );

}
.circular-base-1 {
    position:absolute;
    width:26px;
    height:4px;
    background:#fff;
    top:-4px;
    left:3px;
}
.circular-base-1:before {
    position: absolute;
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    top: -8px;
    left: 13px;
}
.chimney-base {
    width:60px;
    height:5px;
    position:absolute;
    top:-17px;
    left:9px;
}
.chimney {
    width:25px;
    height:10px;
    background:#f5f5f5;
    position:absolute;
    bottom:0;
    margin-left:5px;
}
.chimney:before {
    content:'';
    width:25px;
    height:6px;
    background:grey;
    position:absolute;
    top:-6px;
}
.chimney:after {
    content:'';
    width:25px;
    height:6px;
    background:#f7f7f7;
    position:absolute;
    top:-12px;
}
.ocean {
    width:100%;
    position:absolute;
    height:100px;
    background:rgba(25,93,164,0.8);
    bottom:0;
}
.ocean-overlay {
    width:100%;
    position:absolute;
    height:100px;
    background:rgba(25,93,164,0.35);
    bottom:0;
    z-index:10;
    box-shadow:0 25px 25px rgba(25,93,164,0.5) inset;
}
.traslate {
    -webkit-animation:5s ease-in-out 0s normal none infinite floating;
    -moz-animation:5s ease-in-out 0s normal none infinite floating;
    width:150px;
    height:20px;
    position:absolute;

}
@-webkit-keyframes floating {
    0% {
        bottom: 48px;
        -webkit-transform:rotate(1deg);
        -webkit-transform-origin:-20% -40%;
    }
    50% {
        bottom: 52px;
        -webkit-transform:rotate(-1deg);
        -webkit-transform-origin:-20% -40%;
    }
    100% {
        bottom: 48px;
        -webkit-transform:rotate(1deg) ;
        -webkit-transform-origin:-20% -40%;
    }
}
@-moz-keyframes floating {
    0% {
        bottom: 48px;
        -moz-transform:rotate(1deg);
        -moz-transform-origin:-20% -40%;
    }
    50% {
        bottom: 52px;
        -moz-transform:rotate(-1deg);
        -moz-transform-origin:-20% -40%;
    }
    100% {
        bottom: 48px;
        -moz-transform:rotate(1deg) ;
        -moz-transform-origin:-20% -40%;
    }
}
.here-there {
    -webkit-animation:movenow 60s infinite ;
    -moz-animation:movenow 60s infinite ;
    position:absolute;
    width:200px;
    bottom:30px;

}
@-webkit-keyframes movenow {
    0%   {right:110%;}
    100% {right:0;}
}
@-moz-keyframes movenow {
    0%   {right:110%;}
    100% {right:0;}
}
.wrap {
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
}
.bottom-1-top-right-window {
    width:6px;
    height:6px;
    border-radius:50%;
    position:absolute;
    background:#ADB1B3 ;
    left:3px;
    z-index:1;
    top:5px;
    box-shadow:14px 0 0 #ADB1B3 , 28px 0 0 #ADB1B3 , 42px 0 0 #ADB1B3 , 56px 0 0 #ADB1B3 , 70px 0 0 #ADB1B3 , 84px 0 0 #ADB1B3 , 98px 0 0 #ADB1B3;
}
.middle-window {
    width:6px;
    height:6px;
    border-radius:50%;
    position:absolute;
    background:#ADB1B3 ;
    left:56px;
    z-index:1;
    bottom:6px;
    box-shadow:14px 0 0 #ADB1B3 , 28px 0 0 #ADB1B3 , 42px 0 0 #ADB1B3 , 56px 0 0 #ADB1B3 , 70px 0 0 #ADB1B3 , 84px 0 0 #ADB1B3 ;
}

Answer 2

这是您需要导入gsap cdn的惊人示例 http://codepen.io/FabioG/pen/ZLONRY

$( document ).ready(function() {
  
  //Boat animation
  TweenMax.fromTo('#boatraw', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.fromTo('#boatshadow', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"},  {rotation:10,  ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#boatraw', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#boatshadow', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  
  //Tentacle animation
  TweenMax.fromTo('#octopusraw', 2.5, {rotation:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
  TweenMax.fromTo('#octopusshadow', 2.5, {rotation:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
  TweenMax.to('#octopusraw', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#octopusshadow', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  
  //wave animation
  TweenMax.fromTo('#wave1', 2, {x:'-2000'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.fromTo('#wave2', 3, {x:'-1800'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1.7});
  TweenMax.fromTo('#wave3', 4, {x:'-1600'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1});
  
  //Star animation
  var stars = $('#stars').children();
  stars.each(function(index, element){
    TweenMax.to(element, (Math.random() * 1.5) + 1, {scale: 0, transformOrigin:"50% 50%", yoyo: true, repeat: -1, delay: -Math.random() * 2})
  })
  
  //Title animation
  var tl = new TimelineMax(),
      letterFallSpeed = .2;
  
  tl.set('#vikingsWord', {y: -2500})
    .to('#vikingsV', letterFallSpeed, {y: 2500})
    .to('#vikingsI1', letterFallSpeed, {y: 2500})
    .to('#vikingsK', letterFallSpeed, {y: 2500})
    .to('#vikingsI2', letterFallSpeed, {y: 2500})
    .to('#vikingsN', letterFallSpeed, {y: 2500})
    .to('#vikingsG', letterFallSpeed, {y: 2500})
    .to('#vikingsS', letterFallSpeed, {y: 2500})
    .fromTo('#inTheSea', .8, {scale: 0, rotation: -15, transformOrigin:"50% 50%"}, {scale: 1, rotation: 0, ease: Elastic.easeOut.config(1, 0.3)});
});

html{
  background-color: #66C3D0;
}

svg{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src=""></script> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20962 10601" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
  <defs>
    <style>
<![CDATA[
    .str0 {stroke:black;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.200000}
    .str1 {stroke:black;stroke-linecap:round;stroke-linejoin:round}
    .fil11 {fill:none}
    .fil10 {fill:#EBE663}
    .fil9 {fill:#E0DC5D}
    .fil1 {fill:#D6E9D8}
    .fil7 {fill:#66C3D0}
    .fil4 {fill:#57A7B3}
    .fil0 {fill:#56698F}
    .fil6 {fill:#3A3939}
    .fil3 {fill:#43818A}
    .fil8 {fill:#D4CE59}
    .fil12 {fill:#FEFEFE;fill-rule:nonzero}
    .fil2 {fill:#2B2A29;fill-opacity:0.200000}
    .fil5 {fill:#3A3939;fill-opacity:0.200000}
   ]]>
    </style>
    <clipPath id="id0">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
    <clipPath id="id1">
      <path d="M16856 867h2959v3948h-2959V867z"/>
    </clipPath>
    <clipPath id="id2">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
    <clipPath id="id3">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id4">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id5">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id6">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id7">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id8">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
  </defs>
  <g id="Layer_x0020_1">
    <path class="fil0" d="M0 0h20962v10601H0z"/>
    <g clip-path="url(#id0)">
      <g id="_520340200">
        <g id="stars">
          <path id="1" class="fil1" d="M8570 2841c70,0 127,57 127,127 0,70 -57,127 -127,127 -71,0 -127,-57 -127,-127 0,-70 56,-127 127,-127z"/>
     <path class="fil1" d="M11604 1812c59,0 107,48 107,108 0,59 -48,107 -107,107 -60,0 -108,-48 -108,-107 0,-60 48,-108 108,-108z"/>
     <path class="fil1" d="M3497 3097c70,0 127,57 127,128 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-71 57,-128 127,-128z"/>
     <path class="fil1" d="M16480 4357c45,0 82,36 82,82 0,45 -37,82 -82,82 -46,0 -83,-37 -83,-82 0,-46 37,-82 83,-82z"/>
     <path class="fil1" d="M15297 1387c45,0 81,37 81,82 0,45 -36,81 -81,81 -45,0 -82,-36 -82,-81 0,-45 37,-82 82,-82z"/>
     <path class="fil1" d="M11261 4321c55,0 100,44 100,100 0,55 -45,100 -100,100 -55,0 -100,-45 -100,-100 0,-56 45,-100 100,-100z"/>
     <path class="fil1" d="M8259 2395c56,0 100,45 100,100 0,55 -44,100 -100,100 -55,0 -100,-45 -100,-100 0,-55 45,-100 100,-100z"/>
     <path class="fil1" d="M17014 2998c56,0 101,45 101,100 0,56 -45,100 -101,100 -55,0 -100,-44 -100,-100 0,-55 45,-100 100,-100z"/>
     <path class="fil1" d="M6183 4905c70,0 127,57 127,127 0,71 -57,128 -127,128 -71,0 -127,-57 -127,-128 0,-70 56,-127 127,-127z"/>
     <path class="fil1" d="M127 1325c70,0 127,57 127,127 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-70 57,-127 127,-127z"/>
     <path class="fil1" d="M4198 1266c71,0 128,57 128,127 0,71 -57,128 -128,128 -70,0 -127,-57 -127,-128 0,-70 57,-127 127,-127z"/>
     <path class="fil1" d="M19404 5488c58,0 105,46 105,104 0,58 -47,105 -105,105 -57,0 -104,-47 -104,-105 0,-58 47,-104 104,-104z"/>
        </g>
        <g id="wave3">
          <path id="wave3shadow" class="fil2" d="M26367 8825c504 1667 831 3819-28 5680-858 1862-2901 3434-6193 3904-3292 471-7833-161-12154-588s-8421-650-10977-1538c-2555-888-3565-2442-4070-4061s-505-3302 937-4835 4327-2915 6274-3122c1948-206 2958 764 3877 1522s1747 1305 2739 1383 2148-312 2975-731c828-418 1327-864 2137-1014 809-151 1929-6 2756 206 828 212 1364 491 1978 775 615 284 1309 574 1948 535s1223-407 1935-875 1552-1037 2239-1265c688-229 1224-117 1832 529 609 647 1290 1829 1795 3495z"/>
          <path id="wave3raw" class="fil3" d="M27489 8635c504 1667 831 3818-27 5680s-2901 3434-6193 3904-7834-161-12155-589c-4321-427-8421-649-10976-1537-2555-889-3565-2443-4071-4061-505-1619-505-3302 938-4835 1442-1533 4327-2916 6274-3122s2958 764 3877 1522 1746 1304 2738 1382 2148-312 2976-730 1327-864 2136-1014c810-151 1929-6 2757 206s1363 490 1978 775c614 284 1308 574 1947 535s1223-407 1935-875c712-469 1552-1037 2240-1266 688-228 1223-117 1832 530 608 646 1290 1828 1794 3495z"/>
        </g>
        <g id="wave2">
          <path id="wave2shadow" class="fil2" d="M24810 10589c-170 822-305 1990-646 3115-341 1124-888 2205-1856 2808-968 602-2355 724-4668 1064-2312 340-5550 898-8520 987-2969 89-5672-290-9037-859-3365-568-7394-1326-9402-2118-2009-791-1996-1616-1893-3305 104-1689 298-4242 1412-5731 1114-1488 3146-1912 4954-1627 1807 284 3389 1276 4521 1878s1814 814 2423 552 1146-998 2333-1388c1187-389 3025-432 4266 275s1885 2163 2861 2407c976 243 2285-726 3494-1308 1208-582 2315-775 3730-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-17 820-188 1643z"/>
          <path id="wave2raw" class="fil4" d="M25681 10400c-171 822-305 1990-646 3115-341 1124-889 2206-1856 2808-968 602-2355 724-4668 1064s-5550 898-8520 987-5672-290-9037-859c-3366-568-7394-1326-9403-2118-2008-791-1996-1616-1892-3305 103-1689 298-4242 1412-5731 1113-1488 3146-1912 4953-1627 1808 284 3390 1276 4522 1878s1814 814 2423 552 1145-998 2333-1388c1187-389 3025-432 4266 275 1240 707 1884 2164 2861 2407 976 244 2285-726 3493-1308 1209-581 2316-775 3731-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-18 820-188 1643z"/>
        </g>
        <g id="octopus">
          <path id="octopusshadow" class="fil5" d="M12389 7200c18-216-24-456-124-711-20-49-72-74-116-53-45 22-65 79-46 129 88 225 125 432 111 615-2 20 2 38 9 55 14 28 39 49 70 53 49 5 92-34 96-88zm944 830l-554 3085-755-136 543-3027c-58-145-110-288-157-427l-191 33c-61 10-153-16-241-205-52-111-94-260-119-421-50-333-21-683 157-714l123-21c-18-330 9-642 80-930l-130-71c-29-16-53-42-69-77-66-142 3-406 90-607 122-279 313-523 466-439l213 117c146-160 315-303 504-428l-17-47c-64-177 170-370 430-483 231-100 529-156 609 15l6 15 22 60c542-126 1127-128 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 17 26 25 43 54 115 60 332 16 568-45 242-138 475-259 539 13 43 30 90 54 140 109 235 325 510 534 776 15 20 31 40 47 60-184 257-439 523-764 707-61 35-121 60-181 78zm-931-2999c114-163 197-330 246-499 15-51-10-107-56-124-47-18-96 10-111 61-44 147-117 295-218 440-22 30-24 72-9 105 6 12 14 23 25 32 38 34 93 27 123-15zm1098 291c-64 168-104 335-119 496-2 20 1 39 9 56 13 28 39 49 69 53 48 7 92-32 97-86 13-142 49-290 106-440 19-50-2-107-46-129-45-22-97 0-116 50zm26-1575c1 9 4 18 8 27 18 37 56 60 95 52 190-38 354-101 488-190 41-27 56-86 29-134-25-47-79-62-121-35-116 77-260 132-429 166-48 9-79 60-70 114zm246-332c205-89 351-91 389-72l91 253c-4 10-13 25-29 43-31 35-86 81-164 127-39 23-84 47-135 69-205 89-351 91-390 72l-16-46-71-197-4-9c16-43 124-151 329-240zm-1597 1611c-14-45 0-208 94-426 96-220 201-331 240-346l219 120c1 3 2 7 3 12 0 2 0 3 1 5 0 7 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-3 21-4 32-1 7-2 13-3 20-2 11-5 22-7 34-2 9-4 17-6 27-3 10-6 22-9 34-3 11-6 22-10 34-3 10-7 22-11 33-4 14-9 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-201 332-240 346l-125-68-94-52zm-76 49l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-2-2-3-20-48-30-153-18-287 2-22 4-44 7-66 0-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-401l238 58c0 1 1 2 1 3 29 62 38 231-1 437-44 240-122 376-157 401zm-1438 1177c-44-93-79-222-101-362-43-284-5-459 20-493l99-17 171-29c10 8 34 34 64 97 43 94 79 222 100 363 43 283 6 458-20 492l-120 20 1 1-150 26c-11-8-35-35-64-98z"/>
          <path id="octopusraw" class="fil6" d="M12929 6654c18-217-24-456-124-712-20-48-72-73-116-52-45 21-65 79-45 129 88 224 125 431 110 615-2 19 2 38 9 54 14 29 40 50 71 54 48 5 91-34 95-88zm944 830l-554 3085-755-136 544-3027c-59-145-111-288-158-427l-191 33c-61 10-153-17-241-205-52-111-94-261-118-421-51-333-22-683 156-714l123-21c-18-331 9-642 80-930l-130-71c-29-16-52-42-68-77-67-142 3-406 89-607 122-279 313-523 467-439l212 117c146-160 315-304 504-428l-17-47c-63-177 170-370 430-483 231-100 529-156 609 15l6 14 22 61c542-126 1127-129 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 18 26 26 43 53 115 59 332 15 568-45 242-138 475-258 538 12 44 30 91 53 140 110 236 325 511 534 777 15 19 31 40 47 60-184 257-438 522-764 707-61 34-121 60-181 78zm-931-3000c114-162 197-330 246-498 15-51-10-107-56-124-46-18-96 10-111 61-43 147-117 295-218 439-22 31-24 73-8 106 5 12 13 23 24 32 38 34 94 27 123-16zm1098 292c-64 168-104 335-119 496-2 20 2 39 9 56 14 28 39 49 69 53 49 7 92-32 97-86 13-142 49-290 107-440 19-50-2-108-47-130-45-21-97 1-116 51zm26-1576c2 10 5 19 8 28 18 37 56 60 95 52 190-38 354-102 488-190 42-27 56-86 30-134-25-47-80-62-121-35-116 76-261 132-430 166-48 9-79 60-70 113zm246-331c205-89 351-91 389-72l92 253c-5 10-14 25-30 42-31 35-85 81-164 128-39 23-84 47-135 69-205 89-351 91-389 72l-17-46-71-197-4-10c17-42 125-150 329-239zm-1597 1610c-14-44 0-208 95-425 95-220 200-332 240-346l218 120c1 3 2 7 3 12 0 1 1 3 1 5 1 6 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-2 21-4 32-1 6-2 13-3 20-2 10-5 22-7 33l-6 27c-2 11-6 23-9 34-3 12-6 23-9 35-4 10-8 22-12 33-4 14-8 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-200 331-240 346l-124-69-1 1-94-53zm-76 50l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-3-1-4-21-47-31-152-19-286 2-22 4-44 7-66 1-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-402l238 59c0 1 1 2 1 3 29 61 38 231 0 437-45 240-123 376-158 401zm-1438 1177c-44-93-79-222-101-363-43-283-5-458 20-492l99-17 171-29c10 7 34 34 64 97 43 94 79 222 100 363 44 283 6 458-19 492l-120 20v1l-150 25c-10-7-34-34-64-97z"/>
        </g>
        <g id="boat">
          <path id="boatshadow" class="fil5 str0" d="M2871 5099c-110-79-260 36-213 162 44 120 220 120 263-1 26 143 45 286 78 428 36 155 87 308 160 450 136 264 347 478 616 607 39 18 79 35 119 50l-367 475c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l386-501c164 49 334 71 505 79 19 1 38 1 56 2l-280 363c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l320-415c128 6 257 12 386 16v292l-39 50c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l143-184v5725h767V7552l8-10c50-65 48-153 1-215l294-382c102-1 203-3 304-7 121-4 242-19 361-45l-292 377c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l366-474c128-42 251-99 363-176 226-155 390-377 494-629 52-129 88-263 114-399 22-122 34-245 49-368 53 95 194 94 246-2 50-91-19-207-123-207-72 0-119 56-152 114-34 59-58 124-83 187-57 145-115 290-187 428-5 10-11 19-16 29-69-167-234-285-426-285-212 0-391 144-445 340-53-196-232-340-444-340s-392 144-445 340c-45-166-181-296-351-331v-230h1219l-100-156c-292-458-331-963-108-1385l2-4h219v-253H5525v-260h-186v260H4106v253h219l2 4c224 422 184 926-108 1385l-100 156h1220v230c-170 35-307 164-352 331-53-196-232-340-445-340-212 0-391 144-444 340-53-196-232-340-445-340-207 0-383 138-441 327-72-136-129-282-180-427-24-68-47-136-74-203-20-51-41-110-87-143zm2944 1846c62 1 124 1 186 1l-186 240v-241zm1395-1089c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 149 67 149 150 1 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-33-2019c-37 94-64 191-80 290H4655c-16-99-42-196-79-290h1712zm-1615 458h1517c-5 121 5 243 29 366H4644c25-123 34-245 29-366zm-136 826h-56c49-95 89-191 119-288h1663c31 97 70 193 120 288H4537zm895 735c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 150-150zm-890 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150z"/>
          <path id="boatraw" class="fil6 str1" d="M3255 4921c-110-79-260 36-214 162 44 120 221 120 264-1 26 143 44 287 77 428 37 155 87 308 160 450 136 264 348 478 617 607 39 19 79 35 119 50l-367 475c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-32l176-228c50-65 49-153 1-215l387-501c163 49 334 71 505 79 19 1 37 2 56 2l-280 363c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l320-414c129 5 258 11 386 16v291l-38 50c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l142-185v5725h768V7374l7-10c50-65 48-153 1-215l295-382c101-1 202-3 303-6 121-5 243-19 361-46l-291 377c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l367-474c128-42 250-99 363-176 226-155 390-377 494-629 51-129 88-263 113-399 23-122 35-245 50-368 53 95 194 94 246-1 50-92-19-207-123-207-73 0-119 55-152 113-34 59-58 124-83 187-58 145-115 290-188 428-5 10-10 20-15 29-70-167-234-285-426-285-213 0-392 145-445 340-53-195-232-340-444-340-213 0-392 145-445 340-45-166-181-295-352-330v-230h1220l-100-157c-292-458-332-963-108-1385l2-3h219v-254H5908v-260h-185v260H4490v254h219l2 3c223 422 184 927-108 1385l-100 157h1220v229c-171 35-307 165-352 331-53-195-233-340-445-340s-391 145-444 340c-54-195-233-340-445-340-208 0-384 138-441 328-72-137-129-283-181-428-24-68-46-136-73-203-20-51-42-110-87-143zm2944 1846c62 1 124 1 185 1l-185 240v-241zm1395-1089c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-34-2019c-37 95-63 192-79 290H5039c-16-98-42-195-79-290h1711zm-1614 458h1517c-5 121 4 244 29 366H5028c24-122 34-245 29-366zm-136 826h-57c50-95 89-191 120-288h1663c30 97 70 193 119 288H4921zm894 735c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 150 67 150 150 0 82-68 149-150 149s-150-67-150-149c0-83 67-150 150-150z"/>
        </g>
        <g id="wave1">
          <path id="wave1shadow" class="fil2" d="M29951 11948c-291 730-653 1800-1548 2971-894 1170-2321 2441-4988 3027-2667 585-6574 485-10469 540-3895 56-7777 268-10905-256s-5502-1784-6906-3382c-1405-1597-1840-3533-1958-4910-117-1377 83-2195 1029-2853 946-659 2638-1159 4034-1003 1395 156 2494 968 3440 1630 945 663 1736 1175 2905 1086 1168-89 2714-780 3809-1332 1096-552 1741-964 2666-820 925 145 2130 848 3110 1361 979 512 1734 836 2457 671 724-165 1416-818 2179-1050 764-231 1597-40 3059 270 1461 310 3550 739 5069 1176 1519 438 2468 884 2997 1112 530 229 639 240 585 441-55 200-274 590-565 1321z"/>
          <path id="wave1raw" class="fil7" d="M30706 11822c-291 731-653 1801-1548 2972-895 1170-2321 2441-4988 3026-2667 586-6574 485-10469 541s-7778 268-10906-256-5501-1784-6906-3382c-1404-1598-1840-3533-1957-4910-118-1377 82-2195 1029-2854 946-659 2637-1158 4033-1002s2495 968 3440 1630 1737 1175 2905 1086c1169-89 2714-780 3810-1332 1095-552 1740-965 2665-820s2130 848 3110 1360c980 513 1734 837 2458 672s1416-819 2179-1050 1597-40 3058 269c1461 310 3550 739 5069 1177 1519 437 2469 883 2998 1112 529 228 639 240 584 440-55 201-274 591-564 1321z"/>
        </g>
        <path id="moon" class="fil8" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
      </g>
      <g clip-path="url(#id3)">
        <path id="Curve_x0020_" class="fil9" d="M17986 475c737 530 1095 1487 823 2406s-1093 1527-1999 1571c195 140 416 251 660 323 1163 344 2384-320 2728-1483s-320-2384-1482-2728c-244-72-490-100-730-89z"/>
        <path id="Curve_x0020__0" class="fil10" d="M18819 780c575 731 657 1774 128 2602-528 829-1508 1194-2413 981 152 193 339 365 558 505 1048 668 2439 360 3107-687 668-1048 361-2439-687-3107-219-140-453-237-693-294z"/>
      </g>
      <g clip-path="url(#id8)">
        <path class="fil11" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
        <g id="vikingsWord">
          <path id="vikingsS" class="fil12" d="M5093 453c188 81 296 130 323 146l1 5c0 2-56 59-169 172l-106-58c-71 76-109 119-113 129 331 137 514 215 547 233l47 260c-73 83-179 189-319 317l-5 1c-26-16-155-76-387-179l-6-8-32-176c-1-2 39-43 118-122l9-2c145 64 218 98 219 101-41 40-61 62-60 66l100 54c84-89 126-135 126-137-9-8-156-73-442-196-79-37-119-57-120-61l-42-228c27-35 130-141 311-317z"/>
          <path id="vikingsG" class="fil12" d="M4294 588l28-1 267-49c6 1 10 3 11 8l36 198c1 6-2 10-8 11l-394 72 116 639c1 4 36 24 106 61 19-17 47-49 82-95-69-29-104-43-107-42l-1-5c3-10 60-69 171-178 17-3 84 26 202 86l32 179c-209 219-319 329-329 331-241-105-381-170-420-194l-171-938c0-6 2-10 7-11l350-64c10-1 17-4 22-8z"/>
          <path id="vikingsN" class="fil12" d="M1718 2312c-290 53 894-163 0 0zM3076 820l276-50 221 111 4-1-25-137c0-7 3-10 8-11l270-50c7 0 11 2 12 8l217 1185c1 6-2 10-9 11l-270 50c-6 1-10-2-11-8l-139-759c-3-4-76-39-219-102l-5 1 164 896c1 6-1 10-8 11l-266 49c-6 1-10-2-11-8L3069 831c0-7 2-10 7-11z"/>
          <path id="vikingsI2" class="fil12" d="M2712 886l271-49c6 0 9 2 10 8l217 1185c1 6-2 10-8 11l-270 50c-6 1-10-2-11-8L2704 897c0-6 3-10 8-11z"/>
          <path id="vikingsK" class="fil12" d="M1862 1042l272-50c6 0 10 2 11 7l109 600 173-164-86-471c-1-7 1-10 7-11l271-50c7 0 10 3 11 8l103 562c0 4-87 90-263 259 197 71 308 116 335 136l52 285-9 1-534-226 48 261c1 7-1 11-7 12l-272 50c-6 1-10-2-11-9l-217-1190c0-6 2-10 7-10z"/>
          <path id="vikingsI1" class="fil12" d="M1498 1108l270-49c7 0 10 2 11 7l217 1186c1 6-2 10-8 11l-270 49c-7 1-10-1-11-7l-217-1186c0-7 3-10 8-11z"/>
          <path id="vikingsV" class="fil12" d="M684 1257l260-48c6 0 10 2 11 8l154 843c2 2 37 23 106 61 5-1 32-33 81-95l-154-844c0-6 2-9 8-10l260-48c6 0 10 3 11 8l170 935c-17 24-124 133-322 327l-4 1c-255-112-394-176-417-192l-171-936c0-6 2-10 7-10z"/>
        </g>
        <path id="inTheSea" class="fil12" d="M4799 1878h67c1 1 2 1 2 3v291c0 2-1 2-2 2h-67c-1 0-2 0-2-2v-291c0-2 1-3 2-3zm90 0h68l48 36h1v-33c0-2 1-3 2-3h66c2 1 3 1 3 3v291c0 2-1 2-3 2h-66c-2 0-2 0-2-2v-187c-1-1-17-12-48-33h-1v220c0 2-1 2-3 2h-65c-2 0-2 0-2-2v-291c0-2 1-3 2-3zm313 0h183c1 0 2 1 2 2v51c0 2-1 3-2 3h-58v238c0 2 0 2-2 2h-65c-2 0-3 0-3-2v-238h-55c-1 0-2-1-2-3v-51c0-2 1-2 2-2zm202 0h66c2 0 3 1 3 3v179h48v-179c1-2 2-3 3-3h65c2 0 3 1 3 3v291c0 2-1 2-3 2h-65c-2 0-3 0-3-2v-51h-48v51c0 2-1 2-3 2h-66c-2 0-3 0-3-2v-127c0-5 1-11 2-19-1 0-2-4-2-13v-9c0-1 1-1 2-1l-2-2v-120c1-2 1-3 3-3zm272-1c1 0 3 1 4 1h20c1 0 3-1 4-1s3 1 5 1h14c3 0 4-1 4-1l5 1h27c2 0 3 1 3 2v48c0 2-1 3-3 3h-83v54h45c2 0 2 1 2 2v48c0 1 0 2-2 2h-45v51s8 7 22 19h2c14-12 22-18 23-18 28 18 45 30 50 35v1l-73 49h-3c-57-40-87-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c2 0 4-1 5-1zm307 2c41 27 64 43 70 48v1c0 1-16 12-48 34l-22-18c-21 15-31 23-33 26 73 47 113 73 120 79v64c-21 16-51 37-90 61h-1c-5-4-33-24-84-59l-1-2v-44l33-24h3c31 22 47 33 47 34-11 8-17 12-17 13l22 17c23-17 35-26 35-27-1-2-33-24-96-66-18-12-26-19-26-19v-57c8-7 37-27 88-61zm170-2c2 0 3 1 5 1h19c2 0 3-1 4-1 2 0 3 1 5 1h15c2 0 3-1 3-1l6 1h27c1 0 2 1 2 2v48c0 2-1 3-2 3h-84v54h45c2 0 3 1 3 2v48c0 1-1 2-3 2h-45v51s8 7 23 19h1c14-12 22-18 24-18 28 18 44 30 49 35v1l-73 49h-2c-58-40-88-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c1 0 3-1 4-1zm204 2h1c55 37 85 58 92 64v229c0 2-1 2-3 2h-64c-1 0-2 0-2-2v-49h-46v49c0 2-1 2-2 2h-65c-1 0-2 0-2-2v-229c5-4 35-26 91-64zm-22 87v99h46v-100s-8-7-23-19c-11 9-19 15-23 20z"/>
      </g>
    </g>
    <path class="fil11" d="M0 0h20962v10601H0z"/>
  </g>
</svg>