Steven Universe Boardwalk

In this example below you will see how to do a Steven Universe Boardwalk with some HTML / CSS and Javascript

Steven Universe boardwalk SVG, handmade pixel art in photoshop exported as svg files and animated in CSS

Thumbnail
This awesome code was written by sgoldgar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sgoldgar ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Steven Universe Boardwalk</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<!-- background -->
<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="850px" height="485px">
<image  x="0px" y="0px" width="850px" height="485px"  xlink:href="data:img/png;base64,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" />
</svg>
  
<!-- ocean -->
<svg class="ocean" 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="850px" height="55px">
<image  x="0px" y="0px" width="850px" height="55px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1IAAAA3BAMAAAD02WZAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAG1BMVEX///8xrsFi8eXL//9i8eUxrsHL//+F/vz///+WI/WtAAAABHRSTlMAAAAAs5NmmgAAAAFiS0dEAIgFHUgAAAAHdElNRQfhBhYPLhGBFfGHAAAGBElEQVR42u2awW7jOAyGc8j0PHPZ86BYzHmBvkAxqzjXKRDZD7COcp1DbL/+ivxJSnLcxWKBxTQIiSKtZYmi/o+NKSW7HVsIIb593ol9irFP2XZuH86c1L2Yk7oXc1If32KMhAn25TNfd2mZ+PpH3fOTdPrVET+qOal7MSd1L+ak7sVE/mFJ5xjTGOIpLGzUegLDHzvAzLczr90+hFs/IbzetO23Gt3+ozmpezEndS/mpO7FMoNwZDTzOdJ2dwzpsohNKDdOIbcTqZTCgcGGGtY+iDWOpfW1un7dnP37czPk+es/xpv+eqmunlI1HB669PJH5e0dN3VHi2Q99R7Dn1I76S8yJ1UicVJ6/bo5u5P6d+akSiQfm5TpvMzAlGl0CftfhsJntZma8PzJ1UXuCDL060AIYz82sPJwcJcm6jXKVM+rqUUkyoJTdU32iVPl7cs2S+lssCRy7kLe+sSd96HlqWGXsQRuLL4zGbro8vBvif7682Vj9kbD719X17cTriK3i9bpU1r3dVJOykk5qYcmRY2vumTUCyQyqgsYGNH0/EfuRq0i6kFYpnOfrNQgdaUVTXu5lu20MMy69uKKpKWa5Uw/1DpSE3XCqLxy6p5rm3z77Td+xu8DwsTwHTJGQubudA+K00ConyX4draYIxTloeeIoinXGQiOhkvu5lG/axKfONPoPtcZmCCN2ZECwtgqgWzFAmAvTilMZISkL+cC+nKKwR33clJOykk5qQcllQsJqiXOfEqbUYj0FzmkXZYr74Rnjrunn/w3rYmaLguqjTyUDCoRirwgborDNdD+uRcFoUWkgecbJ8u2kykuayd9QnTmlEsis5kG0tiZb9ISJzmHli1+yZthkbLpgp0+5x8vfOEeAwd0IR0gArXaTBYDJ+rQtp65H/nGWhdaNLnKMmNSuc3n4jKv5PJBXyXyGJ2Uk3JSTupBSWn0ORoORFaKkR1fy5SMFBVFgAw6EExsOJbcJ1VNgZiOtOwtJ1Nc1k4u7zhBeshzGntcGFQpool7PMAPurXGMuQVfmfzfaXyR0BLBswNcQ4ejo5VQBLAKFWB/APQqtQvVS6IT6hXoiRL+ohBk2JzUk7KSTmphyZVPz8FS9Q9LD0AMQBFhQUU4QwI8z3WZpa9nY0lYQYMN/XroDecLOpEZec4l20nUxQAxQ5R/NZURTvezVawrqzztRK8ccVNIgqVAMMC+WhhhRSnMwReZMZrqW2iVDaVbtQKRlapiMkQ/sYRFi0igYeTclJO6n8ghUeKvFFP+lbK75ESHoKu3ur5DTe/wiuznBMOsOiZ0fFbtC2GaNRv16Zr64T3anBCr50eG244wUpbTPhw6qCPSM4sEgN3kUAVj6NIiwlFyzpP6JK6cJ5AmhZnJ2lVUqdNpZqUpeDRtlUqBy3akNez8Rb3oPspJ+WknJSTekxS1bN3kjvySY3xMq/GT3Qu65+iHNFV97EP0O2BHe8RqaJH7UQibIqKwztOmrpjxGzYUx1L7SNWJRj/MfAkxgu/V/MKBv6m/lD8yCsFcdUlnrR/QwpSYGwd5orlUtI58A4z6f9LtZ/isspJOSkn5aQelFTBMFTD7LSpgYWnPn8RYlSd8TW+g560yac+PIPcwJ4x4huE+Ays7EVrJ0Jq0eM8rF/0aJxcw9o6mzfakaOZJSOP0xQc6uImyLw3jg/6gL8q1aN6tNvaquksIve8z7ZVICursKYqhqxA7UWc9BwqJnFSTspJOakHJVUGXqtjR1tyNPlspdFQyIHoSbUSnc9RJMkt01COY4PWDmstihM7hdWzy44kiWsnJ118aBOqYJqrV2QPpBURrVzCnKoQPiUaq+NXO0iuyYc6RuRjQ8oEassFS1+aVFN/sRNkyxj5WiW+N2/enJSTclJO6qFJ8aRdsn1gCLbhm6Rn+RIFuFjHhauRrS0njR6q5zaAHN9zIp/t3TqJt05CW5CQ+BLnoI9qqyPs63b1cqJ+y1E+jlQV5lIRqRAnPsOeimsJWPJRj4Bl/488aCI1UqFe7+ofQEjitfqfKGcUTspJOSkn9Yik/gbH9+dUaiz1UAAAAABJRU5ErkJggg==" />
</svg>

<!--   steven -->
  <svg class="steven"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="22px" height="36px">
<image x="0px" y="0px" width="22px" height="36px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAkBAMAAAB/KNeuAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEX///8ODg4AAADvfG3x5sNRjOUODg7x5sMAAADvfG1RjOX///+IVasuAAAABnRSTlMAAAAAAABupgeRAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+EGFg83Orapod8AAABPSURBVBjTY2AAgbS0REEGKCCNzZYGAoKCxLLZy8tJZZdXdCgp4WNzzpw5c7Ixkezy8pkQYGxMJNvFE6y3vJwotouLi9eqVauWhrq40IINAHZteh8eBXOAAAAAAElFTkSuQmCC" />
</svg>
  
  <svg class="garnet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="36px" height="64px">
<image  x="0px" y="0px" width="36px" height="64px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABABAMAAACAS8jnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEX///8AAAA6ADLiAGP+q/cAAADN/f3MMoE6ADLiAGP+q/f///81QuJOAAAABXRSTlMAAAAAAMJrBrEAAAABYktHRACIBR1IAAAAB3RJTUUH4QYWEA4ivDtQfgAAAKFJREFUOMut0ysSwkAMgOGUGQSOuEomDsnsDRgEkorAcAGuUDSYoDHkCOWUJNvSWobsL3Z2P7FiHwA5zuESpgoSDx1g1D9pzlNQYZiOFytEAGE6tVYBqlCs9uojrUqQvkQemjYYooV6b6tTfaYI+aZ8dtrtRe4BEh+THZ5NnEQK0ZZCRB70JLe8iBFzg1iHafiPPY3P5FfK1zcjWn+vthR9AAL4QCzZCCjzAAAAAElFTkSuQmCC" />
</svg>
  
  <svg class="amethyst"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="33px" height="51px">
<image  x="0px" y="0px" width="33px" height="51px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAzBAMAAADr1HzMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEX////c0++4mcpgX4EAAADc0++4mcoAAADfxu5gX4H///9dXhtCAAAABXRSTlMAAAAAAMJrBrEAAAABYktHRACIBR1IAAAAB3RJTUUH4QYWEBAWSc6bFAAAAIVJREFUKM9jYACD0NBQQQEGZECOCGsoBCAEyRIJDaWeSFhaWmpoaKAghSJpaVARiOFkiKQlKSFEwI4kUyQtTVBQsLyio7yUNBEgKAcCsEhoAJkiSkCgRiURJaWZQDDZGOhUoAvJEwEBJqXyypnlJS6UijAwgEye4oKcwskR4VoFAksoEQEALSXMWKOImK0AAAAASUVORK5CYII=" />
</svg>
    <svg class="rope"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="19px" height="28px">
<image  x="0px" y="0px" width="19px" height="28px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAcAgMAAAD+aGyKAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAADFBMVEVgX4H///9gX4H////l5PDSAAAAAnRSTlMAAHaTzTgAAAABYktHRAH/Ai3eAAAAB3RJTUUH4QYWEBEOQ7kyAwAAACtJREFUCNdjWLWCNTSEAQu5atUKBiwkEGitwEpygZnoZGhoVAOJJNAaDBIAWuEuIU/4d/kAAAAASUVORK5CYII=" />
</svg>
  <svg class="pearl"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="39px" height="60px">
<image  x="0px" y="0px" width="39px" height="60px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAA8BAMAAAAXnL5eAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEX/////2b6Q6dtn//P/z8//////2b757OGQ6dv+4X5n//P/z880XR6fAAAABXRSTlMAAAAAAMJrBrEAAAABYktHRACIBR1IAAAAB3RJTUUH4QYWEBs1CF0zrQAAAJ5JREFUOMtjYIAA1tC0tDRBAQYUQJlgaHg5UDAtUZCagqEgi9DsIlswNAAqGBqWJggEVBEEgogOCAAyqSIIAhwdHZ0zgYKCoiAlEKspFWRgAFnTpIQal5QJMikpaXR0dK0yNqCeIAODkubMmbOoLMjACRJctdiYmoKsoaHBxsZWqHaRKggEVBTk3r17iwsDMw0E0QBlgsCEhCWBUVMQAKoKxhbECphuAAAAAElFTkSuQmCC" />
    </svg>
    <svg class="cloud1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="127px" height="134px">
<image  x="0px" y="0px" width="127px" height="134px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAACGAgMAAACJTr1RAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAADFBMVEX////c8fLc8fL////25tLDAAAAAnRSTlMAAHaTzTgAAAABYktHRACIBR1IAAAAB3RJTUUH4QYXChElRgiKgAAAANxJREFUWMPt170NgzAQBeALEg09SzCFR0jBUWQE9vEIlsJNGV8QJPzYVH5GCa/kvuL0sIQhWkdEWoolN6hljOM2B2jEmUKm2ASgkmXwoJF1BrNQ6UElgTiDAoUEY08Axq7SgzIylycExFZEgehci0oP4nO/5AU0h0X9BLAnAFcP7+g1AQCYOTgfODuwzP67CQA+/Ai0hATc77fEd0KB3TvM3FIa0OkYDMpFD/oOfL5vrAjA3We+HUMA1f5RN29oaBMAoJsu1usxDPxAAcBk9jeEAa0rNsWAP0/VZgYvOMfseiKKQ8gAAAAASUVORK5CYII=" />
</svg>

<svg class="cloud2"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="151px" height="142px">
<image  x="0px" y="0px" width="151px" height="142px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAACOBAMAAADOaIcZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAD1BMVEX////c8fLR0NDc8fL////GoosxAAAAA3RSTlMAAAD6dsTeAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+EGFwoWErH0uUgAAAD+SURBVGje7dhLDoMgFIVhGjfAjTtoN1DC/vdWfMSqDQJXbGjP+Ued+A24YFVj4vkhJ6ZKxDTSmNh/xfyuUx4E1vmP9LsNF9PPAAPznljBsju5P3yiLBUB61LEquShx8Fcn80JsdjZPtAsOtaVWsQU2IHXLKahoh6xRE6WH1CYntrBlhix67GwcS0KJnLemXviYNITK8PG01nHw8LqRKw0JxX/Uog1gFWigkWM2BewZh+QibWAVXk+CztWsDDtq8B0ocwBYaGbagZO1i0f0ECwcQoazJrVyqNhwwwKh7BddFSs7MgTK/Hc5mb4a9hUynvfxYhFvenqfiNlMcSysBfPh71p0DstggAAAABJRU5ErkJggg==" />
</svg>

<svg class="cloud3"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="77px" height="63px">
<image  x="0px" y="0px" width="77px" height="63px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAA/AgMAAADYja3pAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAADFBMVEX////c8fLc8fL////25tLDAAAAAnRSTlMAAHaTzTgAAAABYktHRACIBR1IAAAAB3RJTUUH4QYXDDsCiOSPcQAAAG9JREFUOMvl0rERgCAQRNGTkNwmrMISDDyLsAqbsASD2yqFERm9dDHyZzwCZnYQuYqwSXwcBgDH+AW6Gw4H1PZGGNEcA56VsSmEL2/SGrGxiL9i2pNEXZyZ8qjrG5VH6fQ+lPL/JFH69JZV0llYPAHiokR1PBWm/gAAAABJRU5ErkJggg==" />
</svg>

<!-- <svg class="sparkles"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="819px" height="306px">
<image  x="0px" y="0px" width="819px" height="306px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzMAAAEyAgMAAACzBmapAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAADFBMVEX////20Pn20Pn///9bdUspAAAAAnRSTlMAAHaTzTgAAAABYktHRACIBR1IAAAAB3RJTUUH4QYXDQAqgCGihAAAA5BJREFUeNrt3UFuqzAYReEEKRPmWcRjFVlCBnUGWUL3kyVEaljlq1RVaWIMvx0w1845w4oCX6QqxWCz2fh1t+OmntDohka3zqFRDY1uezSyoRGp//A1Hwn70QiNbtVrwrUX23bdWp8HGl2NQ4MGjYZmtW8sNGgE2zk0qqHRzap5THVYGw0a5codnkNTVqVpmusBjWhodOtHNaWFRjdJTWMcxPC6ueU11hEWNGhK0bjlNU2PBo2mJvoXnjULjmc019gRFjS6mlvScNnfHRg1bR/NHtaMHRANmjwa5573cFhIcznG7mE7+JWGBo2A5ukXRDX3bTo0aNbXjOzBlnXEOXj/1HR6922i5gigQVOtxrKH+zZo0Ahq8mc6PW0CmiKqTFPEA6Foyq8uDRERUUKrzftEg6bcdp9oVCtGY7q100Ytk/F6X2jQrK8Z+7b4Zxmibi9o0LyN5lcxptkragaPhgZNXs3YoPD+aNj7Lmp5GTRoitbsDRpTi2ssj+WgQZNXo5/l8QI0aPJoygmNbmiISKqfC8PoeT6iodGtTM3w+W7PPZrVQ5M35z7N0y1Pg+fb9D/D7n/m+awGQ5NJE70C1rfm3JsvLwKaq0vRTG+DBo2s5tRfXtRsnTdQ/Tgpswl8CGjQaGgSVrPvr/bbM8OLRg7MXH78UY8GTWWa7uZe1cz3IaBBs4omvs5FaBIXW3Vo0FSm2UdpjknHyHdbEw2aTJpinsZBU3Z1aYjoobpe+ohGNzReEZOkl70RjUZWE7Uidlhjnx5p0KSvvoIGTSbNLJfjERrDAFn6J4wGTR7NPPNAIu4IWTTJ54QGTSbNLCNlCU8gjJ0TGjTimphyrfqIBk1FmtxrI6FBI5PtQmjo7/13Ao1SaNBkqX1BE/0CbjRoatHY/qEbuobbOjRo0MRrDmnH7EyHRIOmeM2soXlLzcglylLDZWjQlK7Zhc94sZekmJb+RoOmSE1ouCz80MvzghihDdGgKV0TrgmsVRF86OWbb9O8UMJaNWjQ5NQEhsva4IpJ3rj0/BeC7owGjbrmMPTj8KtTPP78mlPyLSM0aPJoAoWf2JxjbZaJgZUeDZoyNTPmX/dNDazc9G61okGTW+N9vU49KerQoHl7jT89YOq9k8pv8UKz9jm/jcY79Xmnu6FBQ0REREREpFiu5SzQoFn7DGZMcDkLNGjkQ6MbGtm8h6CLDo1ulWmEnxhDg2aR/gMWyMIAZ9m2WQAAAABJRU5ErkJggg==" />
</svg> -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sgoldgar/steven-universe-boardwalk-OggrXo */
body {
  background: lightblue;
  width:500px;
  margin: 0 15%;
}

.scene{
  position: absolute;
}

.ocean{
  transform: translateY(-50px);
  animation: waves 1s infinite alternate;
}

@keyframes waves{
  from {transform: translateY(-50px);}
  to {transform: translateY(-45px);}
}


.steven{
  position: absolute;
  transform: translateX(570px) translateY(-174px);
  z-index: 1;
  animation: walk 4s infinite alternate;
}

@keyframes walk{
  0% {transform: translateX(570px) translateY(-174px)}
  30% {transform: translateX(599px) translateY(-174px)}
  60% {display: none;}
  100% {display:none;}
}

.garnet{
  position: absolute;
  transform: translateY(-256px) translateX(290px);
  z-index:1;
  animation: jump 1s infinite;
}

@keyframes jump{
  from {transform: translateY(-256px) translateX(290px)}
  to{transform: translateY(-266px) translateX(290px)}
}

.amethyst{
  position: absolute;
  transform: translateY(-145px) translateX(80px);
}

.rope{
  position: absolute;
  transform: translateY(-148px) translateX(65px);
  animation: whip 1s infinite alternate;
}

@keyframes whip {
  from {transform: translateY(-148px) translateX(65px) rotate(0deg);}
  to {transform: translateY(-148px) translateX(65px) rotate(-15deg);}
}

.pearl{
  transform: translateX(740px) translateY(-330px);
  z-index:1;
  position: absolute;
  animation: spin 1s infinite ;
}

@keyframes spin{
  from {   transform: translateX(740px) translateY(-330px);
  z-index:1;}
  to {  transform: translateX(740px) translateY(-330px) rotateY(180deg);
        -webkit-backface-visibility: visible;}
}

.steven:hover, .garnet:hover, .amethyst:hover, .pearl:hover{
  cursor: pointer;
}

.cloud1{
    position: absoulte;
    transform: translateY(-420px) translateX(0px);
  animation: float1 50s infinite;
}

@keyframes float1{
  from {    transform: translateY(-420px) translateX(0px);}
  to{    transform: translateY(-420px) translateX(720px);}
}

.cloud2{
  position: absolute;
  transform: translateY(-600px) translateX(500px);
  animation: float2 30s infinite;
}

@keyframes float2{
  from { transform: translateY(-600px) translateX(500px);}
   to { transform: translateY(-600px) translateX(-120px);}
}
  
.cloud3 {
    position: absolute;
    transform: translateY(-450px) translateX(0px);
  animation: float3 120s infinite alternate;
}

@keyframes float3{
  from { transform: translateY(-450px) translateX(0px);}
   to { transform: translateY(-450px) translateX(450px);}
}

.sparkles{
  position: absolute;
  transform: translateY(-550px) translateX(-250px);
  animation: shine 5s infinite alternate;
}

@keyframes shine {
  from { transform: translateY(-550px) translateX(-250px);}
  to {transform: translateY(-520px) translateX(-255px);}
}

Comments