<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gaegu|Patrick+Hand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gaegu|Patrick+Hand|Poor+Story" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<body>
<div id="container">
<svg id="waveBurger" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100px" height="60px" viewBox="0 0 100 60">
<path class="cls-1 waves mid" d="M10,26.29c8.75,0,11.25,7.5,20,7.5,8.93,0,11.07-7.5,20-7.5,8.75,0,11.25,7.5,20,7.5s11.25-7.5,20-7.5" />
<path class="cls-1 waves top" d="M10,6.29c8.75,0,11.25,7.5,20,7.5,8.93,0,11.07-7.5,20-7.5,8.75,0,11.25,7.5,20,7.5s11.25-7.5,20-7.5" />
<path class="cls-1 waves bot" d="M10,46.29c8.75,0,11.25,7.5,20,7.5,8.93,0,11.07-7.5,20-7.5,8.75,0,11.25,7.5,20,7.5s11.25-7.5,20-7.5" />
<path class="str" d="M10,30H22.2h22.2h22.25h22.2" />
<path class= "cls-1 xLines xA" d= "m10 30 L90 30"/>
<path class= "cls-1 xLines xB" d="m10 30 L90 30"/>
<path class="xD" d= "M30 10 L70 50"/>
<path class="xU" d="M30 50 L70 10"/>
</svg>
<button class="button3" id='clickMe' onclick="animAte()">GO</button>
</div>
</body>body{
width:100vw;
height:100vh;
background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 34%, rgba(112,204,238,1) 35%, rgba(43,78,148,1) 100%);
}
#container {
margin:0;
height:90%;
width:100%;
display: flex;
flex-direction:column;
align-items:center;
justify-content: center;
}
#waveBurger{
width:200px;
height:200px;
}
.cls-1 {
fill: none;
stroke: #000000;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 5px;
}
.hidden {
display:block;
}
.hide {
display:none;
}
/* button! */
button:hover {
transform: scale(0.9, 0.9) translate(0px, 5px);
filter: drop-shadow(0px 0px 10px);
}
button:active {
background: black;
color:gray;
}
button:focus {
outline: 50px;
}
button {
color:dark-gray;
line-height: 0.2em;
font-family: "Poor Story", light;
filter: drop-shadow(18px 18px 3px rgba(0, 0, 0, 0.4));
font-size: 30px;
background: rgba(43, 43, 43, 0.31);
height: 20px;
width: 150px;
border-style: solid;
border-color: #252528;
border-radius: 9px;
border-width: 1px;
z-index: 5;
transition: all 0.2s ease-in-out;
padding: 1em;
}
//set up Snap objects
var topWave = Snap.select(".top");
midWave = Snap.select(".mid");
botWave = Snap.select(".bot");
straight = Snap.select(".str");
xA = Snap.select(".xA");
xB = Snap.select(".xB");
xD = Snap.select(".xD");
xU = Snap.select(".xU");
//set up Snap point maps
straightPoints = straight.node.getAttribute("d");
topWavePoints = topWave.node.getAttribute("d");
midWavePoints = midWave.node.getAttribute("d");
botWavePoints = botWave.node.getAttribute("d");
xAPoints = xA.node.getAttribute("d");
xBPoints = xB.node.getAttribute("d");
xDPoints = xD.node.getAttribute("d");
xUPoints = xU.node.getAttribute("d");
//hide x lines
$(".xLines").addClass("hide");
// set up toggle button
var toggle = "go";
function animAte() {
switch (toggle) {
case "go":
rippleSquish();
document.getElementById("clickMe").innerHTML = "RESET";
toggle = "reset";
break;
case "reset":
reSet();
document.getElementById("clickMe").innerHTML = "GO";
toggle = "go";
break;
}
}
//animate ripples
var rippleSquish = function() {
$(".xLines").addClass("hide");
$(".waves").removeClass("hide");
topWave.animate({ d: straightPoints },500, mina.easein);
midWave.animate({ d: straightPoints }, 500, mina.easein);
botWave.animate({ d: straightPoints }, 500, mina.easein, rotate);
};
//rotate to 'x'
var rotate = function() {
$(".xLines").removeClass("hide");
$(".waves").addClass("hide");
xA.animate({ d: xUPoints }, 500, mina.easein);
xB.animate({ d: xDPoints }, 500, mina.easein);
};
//reverse rotation back to flat line
var reSet = function() {
xA.animate({ d: xAPoints }, 500, mina.easein);
xB.animate({ d: xBPoints }, 500, mina.easein, reWave);
};
//bring back the ripples
var reWave = function() {
$(".xLines").addClass("hide");
$(".waves").removeClass("hide");
topWave.animate({ d: topWavePoints }, 500, mina.easein);
midWave.animate({ d: midWavePoints }, 500, mina.easein);
botWave.animate({ d: botWavePoints }, 500, mina.easein);
};
External CSS
This Pen doesn't use any external CSS resources.