Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
<head>
  <meta charset="UTF-8" />
  <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
  <title>Get Social</title>
</head>
<body>
  <!-- add svg icons -->
  <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
    <symbol id="fb" viewBox="0 0 430.113 430.114">
      <path d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805   c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354   c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"></path>
    </symbol>

    <symbol id="twitter" viewBox="0 0 430.117 430.117">
      <path d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876   c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404   c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067   c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769   C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192   c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178   c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947   c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828   c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39   C414.973,206.142,393.023,203.486,381.384,198.639z"></path>
    </symbol>

    <symbol id="google" viewBox="0 0 90 90">
      <path d="M74.499,0H50.144c-6.382,0-14.421,0.942-21.158,6.49c-5.09,4.374-7.566,10.392-7.566,15.828   c0,9.211,7.094,18.546,19.625,18.546c1.182,0,2.477-0.12,3.787-0.235c-0.592,1.413-1.189,2.594-1.189,4.605   c0,3.662,1.893,5.902,3.547,8.029c-5.314,0.353-15.249,0.942-22.583,5.428c-6.975,4.143-9.107,10.16-9.107,14.414   C15.499,81.846,23.778,90,40.923,90c20.336,0,31.098-11.22,31.098-22.33c0-8.143-4.729-12.164-9.932-16.534l-4.258-3.305   c-1.295-1.065-3.068-2.479-3.068-5.08c0-2.597,1.773-4.254,3.307-5.789c4.964-3.896,9.933-8.03,9.933-16.77   c0-8.979-5.68-13.704-8.396-15.947h7.334L74.499,0z M64.103,72.279c0,7.322-6.033,12.753-17.385,12.753   c-12.648,0-20.809-6.024-20.809-14.405c0-8.393,7.568-11.218,10.166-12.164c4.969-1.656,11.352-1.891,12.414-1.891   c1.184,0,1.775,0,2.725,0.115C60.202,63.064,64.103,66.257,64.103,72.279z M54.642,34.249c-1.893,1.886-5.088,3.305-8.045,3.305   c-10.164,0-14.772-13.113-14.772-21.023c0-3.072,0.592-6.258,2.598-8.74c1.893-2.362,5.201-3.899,8.277-3.899   c9.812,0,14.899,13.229,14.899,21.73C57.599,27.752,57.358,31.528,54.642,34.249z"></path>
    </symbol>

    <symbol id="vimeo" viewBox="0 0 430.118 430.118">
      <path d="M367.243,28.754c-59.795-1.951-100.259,31.591-121.447,100.664c10.912-4.494,21.516-6.762,31.858-6.762   c21.804,0,31.455,12.237,28.879,36.776c-1.278,14.86-10.911,36.482-28.879,64.858c-18.039,28.423-31.513,42.61-40.464,42.61   c-11.621,0-22.199-21.958-31.857-65.82c-3.239-12.918-9.031-45.812-17.324-98.765c-7.775-49.046-28.32-71.962-61.727-68.741   C112.15,34.873,90.98,47.815,62.726,72.308C42.113,91.032,21.228,109.761,0,128.471l20.225,26.112   c19.303-13.562,30.595-20.311,33.731-20.311c14.802,0,28.625,23.219,41.488,69.651c11.53,42.644,23.158,85.23,34.744,127.812   c17.256,46.466,38.529,69.708,63.552,69.708c40.473,0,90.028-38.065,148.469-114.223c56.537-72.909,85.725-130.352,87.694-172.341   C432.498,58.764,411.613,30.028,367.243,28.754z"></path>
    </symbol>
    
  </svg>
  
  <h1>TRY YOUR LUCK!</h1>
  <section class="main">
    <div class="buttons">
      <div class="button button--fb">
        <a href="#">
          <svg width="25" height="25">
            <use xlink:href="#fb" width="100%" height="100%" fill="currentColor"></use>
          </svg>
        </a>
      </div>
      <div class="button button--tw">
        <a href="https://twitter.com/mr_bambule" target="blank">
          <svg width="25" height="25">
            <use xlink:href="#twitter" width="100%" height="100%" fill="currentColor"></use>
          </svg>
        </a>
      </div>
      <div class="button button--gp">
        <a href="#">
          <svg width="25" height="25">
            <use xlink:href="#google" width="100%" height="100%" fill="currentColor"></use>
          </svg>
        </a>
      </div>
      <div class="button button--vm">
        <a href="https://vimeo.com/karstenbuckstegge" target="blank">
          <svg width="25" height="25">
            <use xlink:href="#vimeo" width="100%" height="100%" fill="currentColor"></use>
          </svg>
        </a>
      </div>
    </div>
    
    <div class="all">
      <div class="all__corner all--fb">
        <svg width="25" height="25">
          <use xlink:href="#fb" width="100%" height="100%" fill="currentColor"></use>
        </svg>
      </div>
      <div class="all__corner all--tw">
        <svg width="25" height="25">
          <use xlink:href="#twitter" width="100%" height="100%" fill="currentColor"></use>
        </svg>
      </div>
      <div class="all__corner all--gp">
        <svg width="25" height="25">
          <use xlink:href="#google" width="100%" height="100%" fill="currentColor"></use>
        </svg>
      </div>
      <div class="all__corner all--vm">
        <svg width="25" height="25">
          <use xlink:href="#vimeo" width="100%" height="100%" fill="currentColor"></use>
        </svg>
      </div>
    </div>
    <div class="stopper1"></div>
    <div class="stopper2"></div>
  </section>
</body>
</html>
              
            
!

CSS

              
                @import "compass/css3";

// TODO: Clean up code

// ------------------ Variables ----

$social-colors: #162221, #d34836, #4099FF, #3B5998;

$duration: 3;
$socials: vm, gp, tw, fb;
$social-margin: 80%;

// ------------------ Mixins --------

// Dynamically create gradients for the wheel
@mixin social--gradients ($color) {
  $lighter: lighten($color, 10%);
  
  background: $color;
  background: -webkit-linear-gradient(left top, #{$lighter} 0%, #{$color} 70%);
  background: linear-gradient(left top, $lighter 0%, $color 70%);
}

// ------------------ Main SCSS -------

html {
  width: 100% ;
  height: 100% ;
  background: #d1d4d6;
}

body {
  font-size: 25px;
  text-align: center;
  color: #FFF;
  overflow: hidden;
}

section {
  width: 201px;
  margin: 50px auto;
}

h1 {
  margin-top: 50px;
  font-size: 40pt;
  font-family: 'Josefin Slab', serif;
  color: #3B5998;
}

a, a:hover, a:visited {
  text-decoration: none;
  color: #fff;
}

.stopper1 {
  width: 10px;
  height: 51px;
  background: linear-gradient(45deg, rgba(32,124,202,0) 50%, rgba(165,165,165,1) 50%) no-repeat;
  position: absolute;
  margin-top: -25px;
  z-index: 12;
  margin-left: 90px;
}

.stopper1:before {
  content: " ";
  width: 10px;
  height: 51px;
  background: linear-gradient(45deg, rgba(32,124,202,0) 50%, rgba(235,235,235,0.5) 50%, rgba(235,235,235,0.5) 60%) no-repeat;
  position: absolute;
  top: 3px;
  left: 0px;
}

.stopper2 {
  width: 10px;
  height: 51px;
  background: linear-gradient(-45deg, rgba(32,124,202,0) 50%, rgba(165,165,165,1) 50%) no-repeat;
  position: absolute;
  margin-top: -25px;
  z-index: 12;
  margin-left: 100px;
}

.stopper2:before {
  content: " ";
  width: 10px;
  height: 51px;
  background: linear-gradient(-45deg, rgba(32,124,202,0) 50%, rgba(235,235,235,0.2) 50%, rgba(235,235,235,0.5) 60%) no-repeat;
  position: absolute;
  top: 3px;
  left: 0px;
}

// -- The wheel --
.all {
  width: 200px;
  height: 200px;
  margin-top: -10px;
  -webkit-transition: all #{$duration}s cubic-bezier(0.05, 0.95, 0.95, 0.95);
  transition: all #{$duration}s cubic-bezier(0.05, 0.95, 0.94, 0.95);
  z-index: 10;
  position: absolute;
  cursor: pointer;
}

.all:after {
  content: " ";
  width: 20%;
  height: 20%;
  top: 40%;
  left:40%;
  background: #FFF;
  z-index: 11;
  display: block;
  position: relative;
  border-radius: 50%;
}

.all__corner {
  position: relative;
  width: 50%;
  height: 50%;
  float: left;
  z-index: 5;

  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    -webkit-transition: all #{$duration*0.7}s ease;
    transition: all #{$duration*0.7}s ease;
  }
}

.all--fb {
  border-radius: 100% 0 0 0;
  @include social--gradients (nth($social-colors, 4));
}

.all--tw {
  border-radius: 0 100% 0 0;
  @include social--gradients (nth($social-colors, 3));
}

.all--gp {
  border-radius: 0 0 0 100%;
  @include social--gradients (nth($social-colors, 2));
}

.all--vm {
  border-radius: 0 0 100% 0;
  @include social--gradients (nth($social-colors, 1));
}

// -- Those tiny fun buttons --

.buttons {
  z-index: -1;
}

.button {
  width: 150px;
  height: 50px;
  margin-top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  float: left;
  opacity: 0;
  position: absolute;
  z-index: -1;
  -webkit-transition: all #{($duration/5)*2}ss ease;
  transition: all #{($duration/5)*2}s ease;
}

.button.active {
  -webkit-transition: all #{($duration/5)*2}s ease #{$duration}s;
  transition: all #{($duration/5)*2}s ease #{$duration}s;
}

.button svg {
  font-size: 30px;
  margin-top: 10px;
}

// create styles for the small buttons
@for $i from 1 through 4 {
  $button__duration: $duration*0.4;
  
  .button--#{nth($socials, $i)}{
    background: #{nth($social-colors, $i)};
    border-radius: 8px;
  }
  
  .button--#{nth($socials, $i)}.active{
    margin-top: 220px;
    opacity: 1;
  }
}
              
            
!

JS

              
                $(".all").click(function(){
  
  // how many times should the wheel rotate at max (calculate + 1) 
  var maxRotations = 6;
  // how many times at min
  var minRotations = 2;
  // calculate degree values
  var maxDeg = 360 * maxRotations;
  var minDeg = 360 * minRotations;
  
  if ($(".all").hasClass("active")){
    $(this).css('transform', 'rotate(0deg)');
    $(this).removeClass("active");
    $('.button').removeClass("active");
  }
  else {   
    // create random number
    var randomNum = Math.ceil(Math.random() * maxDeg) + minDeg;
    // add random rotation to wheel
    $(this).css('transform', 'rotate(' + randomNum + 'deg)');
    // add active class
    $('.all').addClass("active");
    
    var fullRotations = Math.floor(randomNum/360);
    var partRotation = (randomNum/360) - fullRotations;
    
    // determin active social network
    if (partRotation >= 0.5 && partRotation < 0.75){
      $('.button--vm').addClass("active");
    }
    else if ( partRotation >= 0.75 && partRotation < 1){
      $('.button--tw').addClass("active");
    }
    else if (partRotation >= 0 && partRotation < 0.25){
      $('.button--fb').addClass("active");
    }
    else {
      $('.button--gp').addClass("active");
    }
  }
});
              
            
!
999px

Console