Skip to content

Instantly share code, notes, and snippets.

@MKDale

MKDale/SVG-Animation-with-Velocity.js.markdown

Created March 26, 2015 01:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MKDale/8f4c7ba78a864763714e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MKDale/8f4c7ba78a864763714e to your computer and use it in GitHub Desktop.
Download ZIP
SVG Animation with Velocity.js
Raw
index.html
<div class="container">
<svg class="machine"xmlns="http://www.w3.org/2000/svg" viewBox="-200 0 500 476">
<defs/>
<path class="small-shadow" d="M210 246v-21l-29-4c-2-10-6-18-11-26l18-23 -15-15 -23 18c-8-5-17-9-26-11l-4-29H100l-4 29c-10 2-18 6-26 11l-23-18 -15 15 18 23c-5 8-9 17-11 26L10 225v21l29 4c2 10 6 18 11 26l-18 23 15 15 23-18c8 5 17 9 26 11l4 29h21l4-29c10-2 18-6 26-11l23 18 15-15 -18-23c5-8 9-17 11-26L210 246zM110 272c-20 0-37-17-37-37s17-37 37-37c20 0 37 17 37 37S131 272 110 272z"/>
<path class="small" d="M200 236v-21l-29-4c-2-10-6-18-11-26l18-23 -15-15 -23 18c-8-5-17-9-26-11l-4-29H90l-4 29c-10 2-18 6-26 11l-23-18 -15 15 18 23c-5 8-9 17-11 26L0 215v21l29 4c2 10 6 18 11 26l-18 23 15 15 23-18c8 5 17 9 26 11l4 29h21l4-29c10-2 18-6 26-11l23 18 15-15 -18-23c5-8 9-17 11-26L200 236zM100 262c-20 0-37-17-37-37s17-37 37-37c20 0 37 17 37 37S121 262 100 262z"/>
</svg>
<h1>Createrly<h1>
</div>
Raw
script.js
$('.small, .small-shadow').velocity({
rotateZ: [10,-360]},{
loop:true,
duration: 5000
});
Raw
style.css
body, html {
width: 100%;
height: 100%;
background-color: #3e3e3e; }
h1 {
font-size: 60px;
color: #fff;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 7px;
}
.container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.machine {
width: 60vmin;
fill: #fff; }
.small-shadow, .medium-shadow, .large-shadow {
fill: rgba(0, 0, 0, 0.05); }
.small, .small-shadow, .medium, .medium-shadow, .large, .large-shadow {
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
Raw
SVG-Animation-with-Velocity.js.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment