Skip to content

Instantly share code, notes, and snippets.

@stoplion

stoplion/SVG-Ghosts.markdown

Created January 25, 2015 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stoplion/7caacd4ab6ec25ae2487 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stoplion/7caacd4ab6ec25ae2487 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Ghosts
Raw
index.slim
<nav>
<span>Blinky</span>
<span>Pinky</span>
<span>Inky</span>
<span>Clyde</span>
<span><a href='http://twitter.com/stoplion'>@stoplion</a><span>
</nav>
<svg width="0" height="0">
<path id="ghost" d="M86,35c0,0,0,0.104,0,0.046C86,15.587,70.096-0.074,50.639-0.074C31.181-0.074,14,15.534,14,34.992C14,35.049,14,35,14,35 l0,0v47.232v8.883v0.054v8.828l6.703-6.012l6.31,6.012l5.94-5.791l5.867,5.791l5.831-5.791l5.809,5.791l5.804-5.791l5.796,5.791 l5.795-5.791l5.794,5.791l5.59-6.027L85,99.997v-8.882v-0.054v-8.829L86,35L86,35z M39.89,44.07c-4.256,0-7.708-3.451-7.708-7.708 c0-4.258,3.452-7.709,7.708-7.709c4.258,0,7.708,3.451,7.708,7.709C47.598,40.619,44.147,44.07,39.89,44.07z M61.439,44.07 c-4.258,0-7.709-3.451-7.709-7.708c0-4.258,3.451-7.709,7.709-7.709c4.256,0,7.707,3.451,7.707,7.709 C69.146,40.619,65.695,44.07,61.439,44.07z"/>
</svg>
<div class="ghosts ghosts--solid">
<svg class="icon blinky" viewbox='0 0 150px 150px'>
<use xlink:href="#ghost">
</svg>
<svg class="icon pinky" viewbox='0 0 100px 100px'>
<use xlink:href="#ghost">
</svg>
<svg class="icon inky" viewbox='0 0 150px 150px'>
<use xlink:href="#ghost">
</svg>
<svg class="icon clyde" viewbox='0 0 150px 150px'>
<use xlink:href="#ghost">
</svg>
</div>
Raw
style.sass
@import "compass/css3"
$red: #e9181d
$pink: #eb468b
$blue: #2cccd2
$orange: #fc7821
body
background-color: #190519
animation: bg-blink 1s infinite
animation-fill-mode: both
nav
background: #141414
padding: 10px
color: lighten(#141414, 25%)
font-family: courier, mono-spaced
text-align: center
span
padding: 10px
a
color: lighten(#141414, 50%)
.ghosts
padding-top: 100px
text-align: center
.icon
animation: blink 1s infinite
animation-fill-mode: both
width: 150px
height: 150px
&.blinky
fill: $red
&.pinky
fill: $pink
&.inky
fill: $blue
&.clyde
fill: $orange
&:hover
fill: white
@keyframes blink
0%
opacity: 1
+scale(1.15)
70%
+scale(1)
opacity: 0.5
100%
+scale(1.15)
opacity: 1
@keyframes bg-blink
70%
background-color: #140414
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment