A Pen by tcmulder.

index.html

<div class="svg-animation">
  
  

<svg id="logo" class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" xml:space="preserve">
<path id="zenman" class="zenman" d="M30.435,49.849c0.108-0.105,31.666-30.872-0.004-30.872c-31.654,0-0.139,30.743-0.004,30.872
	c-14.966-5.686-29.926-11.366-29.926,0c0,11.372,14.96,5.69,29.93,0h0.002c14.967,5.69,29.932,11.372,29.932,0
	C60.365,38.482,45.4,44.172,30.435,49.849 M30.431,18.331c3.652,0,6.608-3.963,6.608-8.843c0-4.891-2.956-8.855-6.608-8.855
	c-3.65,0-6.607,3.965-6.607,8.855C23.824,14.368,26.781,18.331,30.431,18.331"/>
</svg>

<svg id="circle" class="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
  <path id="dots" class="dots" d="M590.905,343.249c-1.96-0.302-3.289-2.106-2.981-4.034c0.217-1.943,1.993-3.324,3.958-3.078c1.968,0.242,3.383,2.057,3.156,4.06C594.723,342.179,592.863,343.545,590.905,343.249M583.972,376.257c-1.914-0.518-3.058-2.471-2.55-4.359c0.51-1.89,2.485-3.038,4.414-2.575c1.928,0.469,3.067,2.422,2.545,4.365C587.862,375.625,585.885,376.779,583.972,376.257M573.354,408.278c-1.84-0.739-2.771-2.821-2.076-4.646c0.69-1.832,2.767-2.76,4.626-2.071c1.859,0.683,2.791,2.767,2.076,4.646C577.27,408.086,575.198,409.014,573.354,408.278M559.098,438.851c-1.763-0.957-2.34-3.073-1.477-4.823c0.868-1.756,3.009-2.446,4.779-1.554c1.775,0.895,2.482,3.08,1.588,4.88C563.096,439.156,560.822,439.782,559.098,438.851M541.405,467.567c-1.627-1.134-2.041-3.358-0.927-4.966s3.363-2.022,5.018-0.938c1.655,1.09,2.074,3.314,0.925,4.972C545.277,468.288,543.033,468.707,541.405,467.567M520.633,494.145c-1.484-1.314-1.667-3.59-0.404-5.084c1.263-1.492,3.521-1.667,5.041-0.4c1.521,1.272,1.706,3.552,0.404,5.085C524.374,495.279,522.112,495.462,520.633,494.145M496.899,518.118c-1.324-1.47-1.216-3.722,0.249-5.016c1.438-1.322,3.651-1.297,5.027,0.147c1.359,1.426,1.329,3.764-0.15,5.124C500.521,519.706,498.224,519.593,496.899,518.118M470.631,539.285c-1.149-1.618-0.805-3.861,0.778-5.011c1.579-1.154,3.832-0.804,5.026,0.779c1.198,1.578,0.848,3.824-0.777,5.011C474.033,541.248,471.782,540.897,470.631,539.285M442.159,557.379c-0.946-1.716-0.35-3.91,1.324-4.916c1.682-0.997,3.864-0.415,4.875,1.287c1.009,1.711,0.425,3.926-1.307,4.946C445.326,559.731,443.131,559.135,442.159,557.379M411.756,571.997c-0.755-1.837,0.104-3.921,1.91-4.66c1.822-0.716,3.911,0.076,4.713,1.879c0.813,1.819-0.01,3.982-1.884,4.717C414.636,574.699,412.515,573.832,411.756,571.997M379.914,583.113c-0.54-1.908,0.539-3.906,2.411-4.469c1.872-0.557,3.874,0.523,4.471,2.417c0.595,1.889-0.485,3.892-2.411,4.468C382.453,586.102,380.451,585.021,379.914,583.113M347.004,590.53c-0.312-1.933,0.994-3.782,2.907-4.172c1.919-0.375,3.778,0.907,4.153,2.855c0.372,1.948-0.928,3.839-2.905,4.217C349.189,593.83,347.325,592.508,347.004,590.53M313.451,594.018c-0.089-1.978,1.42-3.649,3.373-3.724c1.953-0.047,3.645,1.319,3.798,3.326c0.147,1.945-1.352,3.795-3.363,3.84C315.246,597.543,313.542,596,313.451,594.018M279.722,593.736c0.132-1.978,1.821-3.487,3.772-3.363c1.952,0.118,3.473,1.824,3.397,3.807c-0.077,1.982-1.766,3.487-3.773,3.363C281.111,597.42,279.591,595.719,279.722,593.736M246.23,589.707c0.355-1.943,2.207-3.274,4.135-2.959c1.93,0.315,3.251,2.165,2.952,4.123c-0.3,1.963-2.147,3.289-4.136,2.964C247.197,593.504,245.877,591.66,246.23,589.707M213.42,581.88c0.573-1.889,2.545-2.929,4.44-2.451c1.887,0.501,2.995,2.472,2.475,4.382c-0.519,1.914-2.517,3.043-4.461,2.516C213.923,585.836,212.842,583.789,213.42,581.88M181.751,570.261c0.79-1.819,2.884-2.663,4.674-1.879c1.78,0.809,2.66,2.875,1.928,4.7c-0.742,1.854-2.862,2.762-4.696,1.929C181.813,574.206,180.96,572.081,181.751,570.261M151.592,555.15c0.992-1.719,3.181-2.333,4.889-1.381c1.706,0.951,2.322,3.142,1.381,4.887c-0.944,1.741-3.134,2.362-4.889,1.381C151.216,559.057,150.597,556.866,151.592,555.15M123.358,536.69c1.192-1.603,3.369-1.874,4.997-0.789c1.607,1.11,1.988,3.334,0.852,4.959c-1.136,1.628-3.398,2.018-5.053,0.868C122.478,540.611,122.188,538.269,123.358,536.69M97.449,515.09c1.356-1.445,3.616-1.539,5.045-0.207c1.43,1.331,1.525,3.62,0.209,5.104c-1.313,1.484-3.573,1.578-5.045,0.207S96.094,516.54,97.449,515.09M74.087,490.757c1.51-1.287,3.787-1.145,5.085,0.32s1.152,3.724-0.32,5.05c-1.475,1.324-3.752,1.184-5.086-0.32C72.434,494.3,72.576,492.039,74.087,490.757M53.706,463.879c1.646-1.104,3.853-0.681,4.927,0.957c1.131,1.593,0.77,3.797-0.85,4.951c-1.607,1.148-3.894,0.77-5.057-0.868C51.617,467.237,52.06,464.979,53.706,463.879M36.488,434.87c1.762-0.912,3.931-0.246,4.843,1.479c0.914,1.733,0.244,3.911-1.491,4.873c-1.734,0.964-3.903,0.296-4.843-1.484C34.058,437.957,34.725,435.777,36.488,434.87M22.612,404.121c1.853-0.705,3.959,0.192,4.701,2.002c0.74,1.811-0.149,3.887-1.979,4.646c-1.836,0.755-3.939-0.143-4.702-2.007C19.873,406.902,20.759,404.821,22.612,404.121M12.507,371.937c1.921-0.483,3.857,0.661,4.325,2.56c0.444,1.903-0.568,3.839-2.5,4.384c-1.883,0.533-3.981-0.571-4.439-2.529C9.411,374.397,10.58,372.42,12.507,371.937M6.091,338.82c1.964-0.262,3.783,1.097,4.055,3.032c0.275,1.934-1.094,3.764-3.048,4.079c-1.959,0.315-3.775-1.041-4.058-3.033C2.76,340.906,4.123,339.081,6.091,338.82M3.45,305.19c1.981-0.034,3.653,1.519,3.732,3.472c0.078,1.953-1.467,3.61-3.447,3.704s-3.651-1.46-3.732-3.472C-0.075,306.882,1.467,305.225,3.45,305.19M4.669,271.479c1.979,0.186,3.358,1.911,3.274,3.865c-0.118,1.949-1.823,3.426-3.8,3.296c-1.98-0.133-3.484-1.867-3.361-3.874C0.875,272.756,2.702,271.291,4.669,271.479M9.732,238.128c1.939,0.41,3.178,2.292,2.765,4.204c-0.447,1.901-2.238,3.188-4.197,2.832c-1.942-0.355-3.311-2.259-2.851-4.22C5.874,238.979,7.788,237.716,9.732,238.128M18.519,205.562c1.879,0.631,2.916,2.647,2.315,4.509c-0.601,1.858-2.631,2.898-4.525,2.323c-1.899-0.575-2.937-2.594-2.318-4.51C14.615,205.97,16.637,204.931,18.519,205.562M30.925,174.19c1.79,0.841,2.616,2.978,1.835,4.768c-0.783,1.793-2.894,2.603-4.712,1.812c-1.817-0.791-2.641-2.924-1.836-4.77C27.019,174.158,29.125,173.347,30.925,174.19M46.983,144.521c1.687,1.043,2.214,3.233,1.183,4.892c-1.071,1.636-3.161,2.26-4.9,1.252c-1.696-0.979-2.362-3.252-1.267-4.938C43.065,144.019,45.297,143.478,46.983,144.521M66.25,116.834c1.556,1.227,1.857,3.479,0.667,5.033c-1.192,1.55-3.446,1.848-5.038,0.665c-1.593-1.184-1.892-3.436-0.666-5.031C62.437,115.904,64.692,115.607,66.25,116.834M88.521,91.497c1.409,1.397,1.396,3.616,0.085,5.069c-1.33,1.431-3.585,1.492-5.031,0.136c-1.45-1.356-1.51-3.648-0.14-5.118C84.784,90.089,87.112,90.102,88.521,91.497M113.577,68.914c1.24,1.545,1.012,3.795-0.51,5.02c-1.521,1.233-3.807,0.985-5.075-0.507c-1.303-1.53-1.063-3.766,0.499-5.03C110.059,67.131,112.334,67.366,113.577,68.914M140.979,49.238c1.056,1.677,0.591,3.909-1.043,4.985c-1.634,1.073-3.851,0.608-4.956-1.038c-1.104-1.646-0.639-3.879,1.043-4.985C137.701,47.092,139.921,47.557,140.979,49.238M170.472,32.866c0.86,1.791,0.113,3.896-1.645,4.745c-1.73,0.914-3.87,0.224-4.78-1.535c-0.908-1.763-0.203-3.952,1.575-4.894C167.432,30.306,169.615,31.083,170.472,32.866M201.643,19.974c0.648,1.873-0.318,3.921-2.161,4.573c-1.844,0.649-3.908-0.329-4.611-2.182c-0.701-1.855,0.266-3.901,2.163-4.573C198.932,17.123,200.994,18.1,201.643,19.974M234.067,10.668c0.43,1.937-0.761,3.886-2.659,4.351c-1.898,0.464-3.831-0.717-4.315-2.64c-0.484-1.923,0.707-3.87,2.662-4.35C231.706,7.551,233.638,8.732,234.067,10.668M267.359,5.229c0.207,1.985-1.212,3.684-3.151,3.922c-1.936,0.275-3.716-1.099-3.977-3.062c-0.26-1.968,1.142-3.79,3.133-4.071C265.362,1.773,267.154,3.27,267.359,5.229M301.053,3.631c-0.02,1.983-1.62,3.573-3.577,3.554c-1.954-0.023-3.567-1.657-3.604-3.611c-0.034-2.01,1.566-3.593,3.575-3.573C299.461,0.02,301.072,1.644,301.053,3.631M334.717,5.785c-0.244,1.966-2.018,3.388-3.958,3.168c-1.94-0.219-3.365-1.997-3.179-3.971c0.188-1.975,1.956-3.395,3.956-3.17C333.535,2.041,334.959,3.818,334.717,5.785M367.93,11.686c-0.466,1.927-2.395,3.156-4.306,2.742c-1.908-0.412-3.124-2.32-2.715-4.26c0.409-1.942,2.338-3.168,4.306-2.742C367.178,7.848,368.396,9.757,367.93,11.686M400.215,21.46c-0.686,1.86-2.72,2.808-4.547,2.116c-1.859-0.605-2.855-2.616-2.229-4.497c0.631-1.879,2.694-2.903,4.605-2.281C399.929,17.511,400.9,19.6,400.215,21.46M431.177,34.848c-0.893,1.771-3.038,2.503-4.789,1.635c-1.751-0.869-2.485-3.033-1.645-4.826c0.841-1.797,2.986-2.527,4.786-1.633C431.329,30.917,432.069,33.079,431.177,34.848M460.446,51.622c-1.093,1.657-3.319,2.162-4.981,1.127c-1.656-1.033-2.154-3.243-1.114-4.929c1.046-1.687,3.27-2.192,4.979-1.125C461.033,47.761,461.534,49.966,460.446,51.622M487.531,71.727c-1.27,1.521-3.512,1.731-5.001,0.469c-1.491-1.263-1.8-3.439-0.56-5.012c1.211-1.54,3.544-1.866,5.082-0.566C488.589,67.916,488.804,70.205,487.531,71.727M512.205,94.732c-1.433,1.369-3.709,1.343-5.072-0.055c-1.366-1.399-1.339-3.677,0.052-5.086c1.4-1.409,3.669-1.383,5.072,0.055C513.665,91.089,513.64,93.364,512.205,94.732M534.141,120.356c-1.57,1.188-3.789,0.882-5.04-0.624c-1.223-1.522-0.964-3.765,0.582-5.004c1.544-1.243,3.822-0.978,5.085,0.588C536.05,116.87,535.734,119.152,534.141,120.356M552.941,148.364c-1.707,1.008-3.896,0.462-4.891-1.22c-0.988-1.689-0.448-3.901,1.211-4.946c1.696-1.07,3.901-0.533,4.917,1.204C555.205,145.135,554.652,147.354,552.941,148.364M568.516,178.286c-1.811,0.808-3.95,0.028-4.781-1.742c-0.826-1.773-0.047-3.903,1.738-4.766c1.785-0.858,3.928-0.077,4.778,1.746C571.107,175.347,570.328,177.48,568.516,178.286M580.531,209.809c-1.916,0.602-3.824-0.459-4.492-2.297c-0.651-1.844,0.343-3.864,2.214-4.513c1.874-0.648,3.938,0.363,4.606,2.26C583.547,207.152,582.398,209.223,580.531,209.809M588.805,242.511c-1.945,0.371-3.827-0.882-4.197-2.798c-0.372-1.922,0.905-3.825,2.831-4.252c1.945-0.432,3.822,0.823,4.202,2.797C592.022,240.233,590.75,242.137,588.805,242.511M593.337,275.935c-1.976,0.148-3.726-1.312-3.901-3.258c-0.175-1.947,1.282-3.688,3.255-3.896c1.971-0.203,3.719,1.256,3.901,3.261C596.771,274.043,595.319,275.786,593.337,275.935M594.086,309.663c-1.979-0.078-3.575-1.726-3.551-3.679c0.02-1.95,1.647-3.521,3.63-3.502c1.987,0.021,3.575,1.662,3.549,3.675C597.694,308.169,596.068,309.737,594.086,309.663"/>
</svg>

</div>

script.js

var zen = function(){
 
  var logo = Snap.select('.logo');
  logo.attr({
    fill:'#fff'
  });
  logo.select('.zenman').transform('s.2,t98,105');
  logo.text(20, 10, "Good Design is Obvious, Great Design is Zenman").attr({
    'fill': '#fc8e3b',
    'font-family': 'Varela Round',
    'text-transform': 'uppercase',
    'text-shadow': '0 0 5px #000'
  }).transform('t-19,89.5');
  
  var circle = Snap.select('.circle');

  var svgs = [circle];

  var rot = function(thisCircle, per, dir){
    var dots = thisCircle.select('.dots');
    var scale = dots.transform().localMatrix.d;
    dots.stop().animate(
      {
         transform: 's'+scale+', t0,0r' + (360 * dir)
      },
      100000 * (per / 100),
      function(){
        dots.transform('s'+scale+',t0,0r0');
        rot(thisCircle,per);
      }
    ); 
  }
  
  var rings = 5;
  for (var i = 0; i <= rings; i++) {
    svgs.push(circle.clone());
    var per = i/rings;
    var pos = 300 - (300 * per);
    var speed = Math.floor(Math.random() * 100) + 25;
    var dir = Math.random() < 0.5 ? -1 : 1;
    var scale =  per * .9;
    svgs[i].attr({
      fill: '#fff'
    });
    svgs[i].select('.dots').transform('s'+scale+',t0,0r0');
    
    rot(svgs[i], speed, dir);
  }
}
zen();

style.scss

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ccc;
  text-align: center;
  background: url("http://tcmulder.com/codepen/zen-spin/zen-bg.jpg") center no-repeat;
  background-size: cover;
}
.svg-animation {
  display: inline-block;
  position: relative;
  width: 90%;
  height: 90%;
  margin-top: 3%;
  max-width: 600px;
  max-height: 600px;
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
   height: 100%;
  width: 100%;
  padding-bottom: 2.5em;
  font-size: .22em;
}
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

Zenman-Intro-Loader.markdown

Zenman Intro Loader

This is an example of what snap.svg could do for the Zenman website's hero overlay. Inspired by http://codepen.io/dominicmagnifico/details/orepf

A Pen by tcmulder on CodePen.

License.