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.

            
              <!--
Shame this is not very mobile performant
-->
<svg xmlns="http://www.w3.org/2000/svg">
	<defs>

		<!--
		Did you know you can nest SVG inside SVGs?
		-->
		<svg id="boat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      .cls-1, .cls-4 {
        fill: #8c6239;
      }

      .cls-1, .cls-2, .cls-4, .cls-5 {
        stroke: #42210b;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .cls-1 {
<!-- stroke-width: 2px; -->
      }

      .cls-2 {
        fill: #4d4d4d;
      }

      .cls-3 {
        fill: #1a1a1a;
      }

      .cls-5 {
        fill: #e6e6e6;
      }
    </style>
  </defs>
  <title>ship</title>
  <path id="body" class="cls-1" d="M86.7,55c-9.2.7,2.6,43.2-45.2,43.2-25.8,0-29.5-27-30-39.2C11.4,56.1,5,55.6,5,55.6L3.7,38.7l-2-4.6H6.5l4,4.6H22.9s5.4,12.2,9.3,12.7,2.8,7,2.8,7H70.3s1-9,5.4-9c16.9,0,22.3-2.9,22.3-2.9S102.7,53.7,86.7,55Z"/>
  <circle class="cls-2" cx="34.4" cy="71.7" r="4.5"/>
  <circle class="cls-2" cx="49.3" cy="71.7" r="4.5"/>
  <circle class="cls-2" cx="64.2" cy="71.7" r="4.5"/>
  <polygon class="cls-2" points="25.8 52.5 14 52.5 16.5 42.4 20.5 42.4 25.8 52.5"/>
  <path id="flag" class="cls-3" d="M50.3,1.1L50.1,13.5S43.8,6.7,27.1,6.7C36.6,0.5,50.3,1.1,50.3,1.1Z"/>
  <polygon id="mast" class="cls-4" points="50.2 1 52.2 1 56.1 58.3 49.2 58.3 50.2 1"/>
  <polygon class="cls-2" points="11.6 52.5 7.6 52.5 7.1 42.4 14 42.4 11.6 52.5"/>
  <path id="sail" class="cls-5" d="M71.7,48.8c-1.2,1.6-6-.8-16.4,2S34.7,62.4,26.9,62.4c3.6-10.2,10.2-36.6-2.1-49C46.2,8.3,64.6,6.6,67.7,8.1,90.2,18.6,74,45.7,71.7,48.8Z"/>
</svg>



		<!-- 
		A gradient to be used 
		-->
		<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
				<stop offset="0%" style="stop-color:rgb(0,160,230);stop-opacity:1" />
				<stop offset="100%" style="stop-color:rgb(0,140,230);stop-opacity:1" />
		</linearGradient>
		
		
		<!--
		The path used to create the wave pattern and wave mask
		-->
		<symbol id="wave">
			  <path class="waveBody" d="M0,60H100l0.2-38C78.6,43.6,60.7,35.8,50.5,18.3,39.9,35.7,21.6,43.6,0,22V60Z"/>
  <path class="waveSurface" d="M0,22c21.6,21.6,39.9,13.7,50.5-3.7C60.7,35.8,78.6,43.6,100.2,22"/>
		</symbol>

		<!-- 
		Bellow are the three patterns used in this pen
	 We have to create three of the because we want
		to create an infinite loop
		-->
		<pattern id="patternLeft" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
			<use x="0" y="0" xlink:href="#wave" />
		</pattern>

		<!--
		Move the second pattern down by 50 units, because the total height is 100 
		-->
		<pattern id="patternRight" x="0" y="50" width="100" height="100" patternUnits="userSpaceOnUse">
			<use x="0" y="0" xlink:href="#wave" />
		</pattern>

		<!--
		This third pattern will be placed in front of the ship and does not repeat vertically
		-->
		<pattern id="patternMask" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
			<use x="0" y="0" xlink:href="#wave" />
		</pattern>
	</defs>

	<title>Ships Ahoy!</title>

	<!--
	The two animated patterns
	-->
	<rect class="pattern1" x="0" y="0" width="100%" height="100%" fill="url(#patternLeft)" />

	<rect class="pattern2" x="0" y="0" width="100%" height="100%" fill="url(#patternRight)" />

	<!-- 	
	The ship itself. Note the several <g> tags. They are necessary to create the various movements of the ship and sea
	-->
	<g id="shipMasterPosition" transform="translate(0, 0)">
		<g id="shipWavePosition" transform="translate(0, 0)">
			<g id="shipTranslation" x="0" y="0">
				<g id="shipDirection" transform="scale(1, 1)" >
				<use id="ship" x="0" y="0" width="100" height="100" xlink:href="#boat" />
					</g>
			</g>
		</g>
	</g>

	<!--
	The wave that is in front of the ship, makes it look nice 
	-->
	<g id="shipMask" transform="translate(0, 0)">
		<rect class="pattern3" x="0" y="0" width="100%" height="100" fill="url(#patternMask)" />
	</g>

</svg>
            
          
!
            
              $seaColor: rgb(0,140,230);
$seaSurface: rgb(0,160,230);
$seaGradient: url(#grad1); 

$lineThickness: 8px;

body {
	margin: 0;
	padding: 0;
}

svg {
/* 	The root svg has to be absolutely positioned
	so we can have a pattern covering all available area */
	position: absolute;
	width: 100%;
	height: 100%;
	stroke-linecap:round;
	stroke-linejoin:round;
	background: $seaColor;
}

.waveSurface {
	stroke: $seaSurface;
	stroke-miterlimit: 3;
	stroke-width: $lineThickness;
	fill: none;
}

.waveBody {
	fill: $seaGradient;
	opacity: 0.96
	
}


#boat {
	fill: rgb(100,50,50);
	stroke: rgb(70,30,30);
	background: grey;
	overflow: visible;
	stroke-width: $lineThickness * 0.3;
}

#ship {
		// We will show the ship, via JS, once everything else is ready
	visibility: hidden;
}


            
          
!
            
              var shipGroup = document.getElementById("shipMasterPosition"),
				shipX = 0,
				shipDirection,
				shipSpeed = 1.7,
				w = window.innerWidth,
				h = window.innerHeight,
				factor = 50, // The height of the tile
				rows = Math.floor(h / factor),
				row,
				end = w + factor,
				startedLeft = 0,
				startedRight = 0,
				shouldLoop = false;


// Make a timeline that runs once, at the end of each cycle, it checks to see if it should loop again
var main_tl = new TimelineLite({paused:true, onUpdate:moveShip, onComplete:repeat});

main_tl.add(waveMoveVert(patternLeft, 2), 0);
main_tl.add(waveMoveHorz(patternLeft, 2, "+"), 0);
main_tl.add(waveMoveVert(patternRight, 2), 0);
main_tl.add(waveMoveHorz(patternRight, 2, "-"), 0);
main_tl.add(waveMoveVert(patternMask, 2), 0);



// A secondary motion
var waveMask_tl = new TimelineLite({paused:true});

waveMask_tl.add(waveMoveHorz(patternMask, 2, "-"));




function boatRock(dur) {

	this.dur = dur || 1;
	var ease = Power1.easeInOut;

		TweenMax.fromTo(shipTranslation, this.dur*2, {y:0, x:"-=30"}, {y:"-=10", x:"+=30", ease:ease, repeat:-1, yoyo:true});
		TweenMax.fromTo(ship, this.dur, {rotation:"-4", transformOrigin:"50% 100%"}, {rotation:"4", ease:ease, repeat:-1, yoyo:true});

}




function moveShip() {

	TweenMax.set(shipWavePosition, {attr:{transform:"translate(" + shipX + ", " + "0)"}});


// TO DO: Check if mobile, because the preceived speed of the boat is different when viewing in a phone
if(shipDirection === "+" ? shipX += shipSpeed : shipX -= shipSpeed);

}




// Because the pattern sits inside a <defs> tag, you must animate it using the attrPlugin. You also have to make sure the attribute to be tweened exist in the tag otherwise GSAP cannot affect it.
function waveMoveVert(el, dur) {

	return TweenMax.to(el, dur * 0.5, {attr:{y:"-=10"}, ease:Power1.easeInOut, repeat:1, yoyo:true});

}




function waveMoveHorz(el, dur, direction) {

	return TweenMax.to(el, dur, {attr:{x:direction+"=100"}, ease:Linear.easeNone});

}




function positionShip() {

	// Pick a random vertical position
	row = getRandomRow(1, (rows - 2));

	// Pick a random horizontal position
	var shipXStart = getRandomInterger(0,1) * w;

	// Make sure the ship does not start from the same side too many times
	if(startedLeft < 3) {

		if(startedRight < 3) {

			if(shipXStart === 0) {
				positionShipHorz("left");

			} else {
				positionShipHorz("right");

			}

		} else {
			shipXStart = 0;
			positionShipHorz("left");
			startedRight = 0;

		}

	} else {
		shipXStart = w;
		positionShipHorz("right");
		startedLeft = 0;

	}


	// Flip the direction in which the ship moves
	if(shipX < w ? shipDirection = "+" : shipDirection = "-");


	var shipY = row * factor;
	var waveY = shipY + factor; // offset the wave by one row 

	// Check which direction to move
	var direction = getDirection();

	// Position the ship and the ship mask at the same level
	TweenMax.set(shipMasterPosition, {attr:{transform:"translate(0, " + shipY + ")"}})
	TweenMax.set(shipMask, {attr:{transform:"translate(0, " + waveY + ")"}})
}



function positionShipHorz (side) {
	if(side === "left" ) {
				shipX = -(factor * 2);
				TweenMax.set("#shipDirection", {attr:{transform:"scale(1, 1)"}});
				startedLeft++;

	} else {
				shipX = w + (factor * 2);
				TweenMax.set("#shipDirection", {attr:{transform:"scale(-1, 1)"}});
				startedRight++;

	}

	// console.log("positionShipHorz:", shipX)
}




function getRandomRow(min,max) {
	return getRandomInterger(min,max);

}




function getRandomInterger(min,max) {
		return Math.floor(Math.random()*(max-min+1)+min);

}




function getDirection () {
		if(row % 2 !== 0) {

			return "+";

		} else {

		return "-";

		}
}




function repeat() {
	
	// Check to see if ship has left the screen
	if( shipX > end || shipX < -(factor * 2) ) {
		// console.log("End of the world", "W:", w, "ShipX:", shipX, "End:", end, "Factor:", (factor*2));

		// Should we stop the secondary motion?

		// Reposition the ship
		positionShip();

		// Start it all again
		start();		

	} else {
		// console.log("Not the end yet")

		start();

	}		

}




function start() {

	// Adjust the wave mask direction accordingly
	waveMaskDirection();

	// play the animations
	main_tl.play(0);

}




function waveMaskDirection() {

	if(getDirection() === "-") {
		return waveMask_tl.play(0);
	} else {
		return waveMask_tl.totalProgress(1).reverse();
	}

}


var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};



function onResize() {
	
	// Hide the ship as we recalculate things
	TweenMax.set([ship,shipMask], {autoAlpha:0});
	
			w = window.innerWidth;
			h = window.innerHeight;
			end = w + factor;
			rows = Math.floor(h / factor);
			
			positionShip();

	// Show the ship after we recalculate things
	TweenMax.set([ship,shipMask], {autoAlpha:1});
			
}





function init() {
	
	// Is this a mobile device?
	if( isMobile.any() ) {
		// Yes
		// Update the speed of the ship
		shipSpeed = 5;
		
		// Listen for resize changes so we can recaltulate the inner.width and inner height in mobile devices
		window.addEventListener("resize", onResize)

	}
	
	
	boatRock();

	positionShip();
		
 start();
	
		
		TweenMax.set(ship, {autoAlpha:1});
	
}





 // wait until DOM is ready
 document.addEventListener("DOMContentLoaded", function(event) {

 // wait until window, stylesheets, images, links, and other media assets are loaded
 window.onload = function() {

  // All ready, start!		
		init();


  };

 });

            
          
!
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