Skip to content

Instantly share code, notes, and snippets.

@absolutelynotjames

absolutelynotjames/That's the Spirit.markdown

Created October 13, 2015 19:24
Show Gist options
  • Save absolutelynotjames/f38a2faf826b8ce7f9c6 to your computer and use it in GitHub Desktop.
Save absolutelynotjames/f38a2faf826b8ce7f9c6 to your computer and use it in GitHub Desktop.
Download ZIP
That's the Spirit
Raw
index.html
<body>
<svg version="1.1" id="umbrella_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 392" xml:space="preserve">
<path id="umbrella_x5F_body" class="st0" d="M368.3,34.7c0.9-3.7,1.5-7.4,2.6-11.1c0.5-1.6,0.9-3.1,2-4.3c0.8-0.9,2-2,3.2-1.9
c1.3,0.1,2.4,1.2,3.2,2.1c1,1.2,1.4,2.7,1.8,4.2c1.1,3.6,1.7,7.4,2.6,11.1c5.5,0.5,11.4,0.9,17.3,1.7c43.3,6,76.3,28.1,100.1,64.2
c7.3,11,13.5,22.8,18.5,35c5,12.1,8.9,24.7,11.9,37.5c0.8,3.6,1.6,7.3,2.3,11c0.3,1.8,0.7,3.6,1,5.4c0.3,1.8,0.9,3.8,0.8,5.6
c-0.1,3.6-1.7,6.6-5.6,6.8c-3.7,0.1-5.6-2.7-6-6.1c-0.6-5.1-1.3-10.3-2.9-15.2c-1.6-4.9-4.1-9.4-7.4-13.3
c-5.9-7-13.7-12.2-22.5-14.7c-17.2-5-36.3,1-47.7,14.8c-6.2,7.5-9.8,16.8-10.3,26.5c-0.1,2,0,4.1-1.1,5.8c-0.9,1.4-2.3,2.1-3.8,2.2
c-1.6,0.1-3.4-0.2-4.6-1.3c-1.3-1.1-1.8-2.9-1.8-4.5c-0.4-11.9-4.3-22.5-12.7-31.2c-7-7.3-15.5-11.9-26.4-13.5c0,2.3,0,4.2,0,6.1
c0,65.1,0,130.3,0,195.4c0,2.2,0.6,4.8-0.3,6.4c-1.4,2.2-3.8,4.8-6.1,5.3c-2.2,0.5-4.3-0.6-5.4-2.6c-1.4-2.6-1-5.7-1-8.6
c0-7.1,0-14.1,0-21.2c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-14,0-28.1,0-42.1c0-14.1,0-28.2,0-42.3c0-1.7,0-3.5,0-5.2
c0-2,0-3.9,0-7.1c-4.5,1.4-8.6,2.3-12.2,4c-16.5,7.8-25.5,20.9-26.7,39.1c-0.1,1.9-0.3,3.9-1.3,5.6c-1.1,1.6-3,2.3-4.9,2.4
c-4.3,0.1-5.3-4.6-5.5-8c-1.4-18.2-10.2-31.6-26.8-39c-16.2-7.3-31.9-5.2-46.2,5.4c-10.3,7.7-15.9,18.2-17.1,31
c-0.2,1.8-0.5,3.6-0.8,5.4c-0.2,1.2-0.6,2.3-1.3,3.3c-1.5,1.9-4,2.2-6.2,1.6c-2.3-0.6-3.7-2.5-3.8-4.9c0-1.7,0.4-3.5,0.7-5.2
c0.3-1.8,0.6-3.6,0.9-5.4c0.7-4.2,1.5-8.4,2.5-12.5c6-26,15.5-50.6,30.3-72.9c26.6-40.1,63.8-62.3,112.1-65.4
C365,35.2,366.8,35.2,368.3,34.7C369.4,30,368,34.8,368.3,34.7z M424,164.7c0.5-3.9,0.9-7.8,1-11.7c0.8-23.1-0.4-46-9-67.8
c-6.7-16.9-17.4-30.3-34.9-37c-2.5-1-6-1-8.5-0.1c-16.3,6-26.9,18-33.7,33.6c-10,22.8-11.6,47-10.5,71.5c0.1,3.2,0.5,6.5,0.8,10.2
C354.4,130.8,400.3,132.3,424,164.7 M317.1,154.2c0.3-11.5,0-23,0.9-34.4c1.9-21.7,7.3-42.3,20.8-60c2.8-3.6,6-6.9,9.1-10.5
C307.4,49,250,102.8,240.3,149.9c34.7-15.7,44.4-14.7,76.8,8.4 M436.5,157.5c23.7-21.4,48.8-23.7,75.8-7.5
c-11.6-48.7-66.6-100.6-106.6-100.7C405.7,49.4,441.3,74,436.5,157.5z" />
<path id="drop4" class="st0 drop" d="M489.5,201.3c1.9,7.5,4.2,15,5.4,22.6c0.7,4.4-0.9,11.5-6.5,11.7c-5.8,0.2-7.8-7.3-7-11.8
c1.3-7.6,3.7-15,5.6-22.5C487.8,201.3,488.6,201.3,489.5,201.3C491.3,208.8,488.6,201.3,489.5,201.3z" />
<path id="drop3" class="st0 drop" d="M441.6,244.8c1.8,7.8,4.1,15.6,5.2,23.5c0.4,3.1-0.3,6.5-2.6,8.7c-1.9,1.8-4.6,2.4-6.9,1.1
c-2.6-1.5-4.1-4.5-4.2-7.4c-0.1-1.9,0.3-3.8,0.7-5.6c0.4-2.2,0.9-4.3,1.4-6.4c1.1-4.7,2.3-9.3,3.4-13.9
C439.6,244.8,440.6,244.8,441.6,244.8C443.4,252.6,440.6,244.8,441.6,244.8z" />
<path id="drop2" class="st0 drop" d="M340.3,231.5c1.3,5.9,2.7,11.9,4,17.8c0.3,1.4,0.6,2.8,0.9,4.3c0.3,1.6,0.7,2.9,0.3,4.4
c-0.4,1.9-1,3.9-2.1,5.5c-2.4,3.2-7.6,2.9-9.8-0.4c-1.1-1.6-1.5-3.5-1.6-5.3c-0.2-2.8-0.1-5.5,0.4-8.3c1-6.1,3.5-11.8,5.7-17.6
C338.9,231.7,339.6,231.6,340.3,231.5C342.2,239.6,339.6,231.6,340.3,231.5z" />
<path id="drop1" class="st0 drop" d="M274.4,202.2c2.1,4.9,4.1,9.9,5.3,15.1c1.1,4.9,2.1,10.6-0.4,15.2c-1.8,3.3-5.8,5-9,2.2
c-1.6-1.4-2.6-3.7-3.1-5.8c-0.5-2.5,0.3-5.2,0.9-7.7c1.3-6.4,2.9-12.8,4.3-19.2C273.1,202.1,273.7,202.2,274.4,202.2
C277.7,210.2,273.7,202.2,274.4,202.2z" />
</svg>
<script src="js/bmth.js"></script>
</body>
Raw
script.js
//get drops, convert from htmlcollection to array
var drops = [].slice.call(document.getElementsByClassName('drop'));
var drop;
//animate drops, one by one.
setInterval(dropTheDrop, 250);
function dropTheDrop() {
//get random, single item from array
drop = drops[Math.floor(Math.random() * drops.length)];
//add animation class
drop.classList.add('move');
//remove animated item from array
var index = drops.indexOf(drop);
if (index > -1) {
drops.splice(index, 1);
console.log(drops);
}
}
Raw
style.css
body {
background: #000;
}
.st0 {
fill: #FFFFFF;
}
.drop {
display: block;
position: relative;
}
.drop.move {
animation: move 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes move {
from {
transform: translateY(0px);
opacity: 1.0;
}
to {
transform: translateY(100px);
opacity: 0;
}
}
Raw
That's the Spirit.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment