Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <a href="https://twitter.com/exah"
   target="_blank"
>
<svg
  	id="canvas"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
				  preserveAspectRatio="xMidYMid meet"
>
		  <defs>
		    <clipPath	 id="myMask">
				      <rect 
        id="rect" 
					        transform="rotate(60 55 55)"
        x="110" 
        y="110" 
        width="220"
        height="220" 
      />
		    </clipPath>
		    
		    <path 	
      id="logo"
      fill-rule="evenodd" 
      transform="translate(0, 110)"
      d="M480.016,185.664 C480.016,185.664 473.723,221.924 473.723,221.924 C473.723,221.924 450.450,221.924 450.450,221.924 C450.450,221.924 456.598,186.395 456.598,186.395 C458.208,177.330 452.353,174.553 447.523,174.553 C442.254,174.553 435.081,177.330 433.618,186.103 C433.618,186.103 427.324,221.924 427.324,221.924 C427.324,221.924 404.052,221.924 404.052,221.924 C404.052,221.924 416.054,153.791 416.054,153.791 C416.054,153.791 439.326,153.791 439.326,153.791 C439.326,153.791 437.423,164.464 437.423,164.464 C441.375,155.838 452.792,152.037 458.793,152.037 C477.089,152.037 483.676,164.464 480.016,185.664 ZM407.252,104.955 C407.252,104.955 383.979,104.955 383.979,104.955 C383.979,104.955 390.127,69.427 390.127,69.427 C391.737,60.362 385.882,57.584 381.052,57.584 C375.783,57.584 368.611,60.362 367.147,69.135 C367.147,69.135 360.853,104.955 360.853,104.955 C360.853,104.955 337.581,104.955 337.581,104.955 C337.581,104.955 349.583,36.823 349.583,36.823 C349.583,36.823 372.855,36.823 372.855,36.823 C372.855,36.823 370.953,47.496 370.953,47.496 C374.904,38.870 386.321,35.068 392.322,35.068 C410.618,35.068 417.205,47.496 413.546,68.696 C413.546,68.696 407.252,104.955 407.252,104.955 ZM331.598,152.037 C349.894,152.037 356.627,164.464 352.822,185.664 C352.822,185.664 346.528,221.924 346.528,221.924 C346.528,221.924 323.255,221.924 323.255,221.924 C323.255,221.924 329.403,186.395 329.403,186.395 C330.866,178.354 325.158,174.553 320.328,174.553 C315.059,174.553 307.887,177.477 306.423,186.103 C306.423,186.103 300.129,221.924 300.129,221.924 C300.129,221.924 276.857,221.924 276.857,221.924 C276.857,221.924 303.768,69.427 303.768,69.427 C305.232,61.386 299.524,57.584 294.694,57.584 C289.424,57.584 282.252,60.508 280.789,69.135 C280.789,69.135 274.495,104.955 274.495,104.955 C274.495,104.955 251.222,104.955 251.222,104.955 C251.222,104.955 269.665,1.002 269.665,1.002 C269.665,1.002 292.937,1.002 292.937,1.002 C292.937,1.002 284.594,47.496 284.594,47.496 C288.546,38.870 299.963,35.068 305.964,35.068 C324.260,35.068 330.993,47.496 327.187,68.696 C327.187,68.696 310.229,164.464 310.229,164.464 C314.181,155.838 325.597,152.037 331.598,152.037 ZM271.411,175.576 C271.411,175.576 249.602,175.576 249.602,175.576 C250.334,171.336 248.285,169.435 243.894,169.435 C240.967,169.435 237.893,170.605 237.454,173.237 C237.161,174.991 237.747,176.453 241.699,177.623 C241.699,177.623 253.408,180.986 253.408,180.986 C269.948,185.810 269.362,197.215 268.630,201.601 C265.996,216.660 248.578,223.240 234.087,223.240 C219.597,223.240 205.839,214.759 208.620,199.115 C208.620,199.115 230.428,199.115 230.428,199.115 C229.696,202.039 231.306,206.133 237.015,206.133 C240.820,206.133 244.333,204.379 244.919,201.601 C245.358,199.554 244.333,198.969 239.503,197.653 C239.503,197.653 231.306,195.314 231.306,195.314 C211.108,189.612 213.450,177.330 214.328,172.359 C216.084,162.125 230.575,152.037 245.797,152.037 C260.141,152.037 274.778,157.885 271.411,175.576 ZM198.959,106.271 C179.785,106.271 165.148,92.235 168.953,70.743 C172.905,49.104 192.226,35.068 211.400,35.068 C230.867,35.068 245.650,49.104 241.698,70.743 C237.893,92.235 218.426,106.271 198.959,106.271 ZM207.741,56.561 C199.983,56.561 192.372,62.994 190.908,70.743 C189.445,78.492 194.860,84.925 202.618,84.925 C210.375,84.925 217.840,78.492 219.304,70.743 C220.768,62.994 215.498,56.561 207.741,56.561 ZM104.801,142.969 C99.842,142.969 60.485,142.533 58.854,142.533 C43.485,142.533 29.434,155.546 26.507,171.628 C23.726,187.419 33.093,201.016 48.462,201.016 C60.318,201.016 70.271,196.922 73.930,187.565 C73.930,187.565 45.681,187.565 45.681,187.565 C45.681,187.565 49.194,167.973 49.194,167.973 C49.194,167.973 104.082,167.973 104.082,167.973 C97.349,206.572 73.637,223.240 44.656,223.240 C15.529,223.240 -3.206,199.993 1.771,171.628 C6.893,142.972 33.679,119.871 62.806,119.871 C81.567,119.871 101.964,120.015 108.753,120.015 C115.193,120.015 118.560,114.751 119.731,108.318 C119.731,108.318 138.047,4.219 138.047,4.219 C138.047,4.219 162.783,4.219 162.783,4.219 C162.783,4.219 144.613,108.318 144.613,108.318 C141.247,127.033 129.244,142.969 104.801,142.969 ZM140.211,153.791 C140.211,153.791 137.138,170.605 137.138,170.605 C142.992,157.593 153.238,152.037 162.020,152.037 C164.947,152.037 168.314,152.183 171.680,153.937 C171.680,153.937 162.166,175.868 162.166,175.868 C157.629,174.114 153.970,174.114 151.921,174.114 C143.139,174.114 136.845,179.085 133.186,199.554 C133.186,199.554 129.380,221.924 129.380,221.924 C129.380,221.924 106.108,221.924 106.108,221.924 C106.108,221.924 118.110,153.791 118.110,153.791 C118.110,153.791 140.211,153.791 140.211,153.791 ZM181.607,131.129 C182.925,123.672 190.536,117.970 198.147,117.970 C205.904,117.970 210.881,123.672 209.564,131.129 C208.246,138.439 201.074,144.434 193.317,144.434 C185.706,144.434 180.290,138.439 181.607,131.129 ZM203.416,153.791 C203.416,153.791 191.414,221.924 191.414,221.924 C191.414,221.924 168.142,221.924 168.142,221.924 C168.142,221.924 180.144,153.791 180.144,153.791 C180.144,153.791 203.416,153.791 203.416,153.791 ZM376.681,131.129 C377.998,123.672 385.609,117.970 393.221,117.970 C400.978,117.970 405.955,123.672 404.637,131.129 C403.320,138.439 396.148,144.434 388.390,144.434 C380.779,144.434 375.364,138.439 376.681,131.129 ZM398.490,153.791 C398.490,153.791 386.488,221.924 386.488,221.924 C386.488,221.924 363.215,221.924 363.215,221.924 C363.215,221.924 375.217,153.791 375.217,153.791 C375.217,153.791 398.490,153.791 398.490,153.791 Z"  
    />
		  </defs>
		  
		  <use 	
    xlink:href="#logo"
    fill="#fff" 
    stroke="#fff"
    stroke-width="2" 
   />
		  		
		  <use 	
    xlink:href="#rect" 
    fill="#24292c" 
    stroke="rgba(255,255,255,.3)" 
    stroke-width="2" 
  />
		  		
		  <use 
    xlink:href="#logo"
    fill="#24292c"	
    stroke="#fff" 
    stroke-width="2" 
    clip-path="url(#myMask)" 
  />
		</svg>
</a>
            
          
!
            
              html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	
	background: #24292c;
}

#canvas {
	width: 100%;
	height: 100%;
	
	margin-bottom: -10px;
	
	opacity: 0;
	transition: all 1s;
}
            
          
!
            
              var $canvas = document.getElementById('canvas'), 
    s = Snap($canvas),
    logo = Snap('#logo'),
    rect = Snap('#rect');

$canvas.style.opacity = 1;

// Sizes
logo.size = logo.getBBox();
rect.size = rect.attr();

// Center elements
(centerEls = function() {
//	Store centers of elements
	logo.center = getElementCenter(logo),
	rect.center = getElementCenter(rect);
	
	rect.attr({x: rect.center.ecX, y: rect.center.ecY});
	rect.transform('rotate(60 '+ rect.center.wcX +' '+rect.center.wcY+')');
	
	logo.transform('translate('+logo.center.ecX+','+logo.center.ecY+') ');
})();

// Center elements on window resize
window.onresize = function(){ 
	centerEls();
};

// Move logo inside mask
// With device orientation changes 
if (('ontouchstart' in window || 
	navigator.msMaxTouchPoints > 0) && 
	window.DeviceOrientationEvent) {
	
	window.addEventListener("deviceorientation", function(event) {
		handleOrientationEvent(event);
	}, true);
	
	handleOrientationEvent = function(e) {
		switch (window.orientation) {  
		//	Landscape
			case -90:
			case 90:			
				logo.transform(
					'translate('+((e.beta)+logo.center.ecX)+
					','+logo.center.ecY+')');
			break; 
		//	Portrait
			default:
				logo.transform(
					'translate('+((e.gamma)+logo.center.ecX)+
					','+logo.center.ecY+')');				
			break;
		}
	}
// Or with mouse
} else {	
	s.mousemove(function(e){
		logo.transform(	'translate('+(e.pageX/8+(logo.center.wcX)-(logo.size.width/1.5))+ // Align to X
						','+logo.center.ecY+')');	// Align to center Y
	});
}

function getElementCenter(el) {
	var windowX = window.innerWidth / 2,
		windowY = window.innerHeight / 2;
		
	return {
		'wcX'	: windowX,
		'wcY'	: windowY,
		'ecX'	: windowX - (el.size.width / 2),
		'ecY'	: windowY - (el.size.height / 2)
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console