Skip to content

Instantly share code, notes, and snippets.

@thisislawatts

thisislawatts/index.html

Created January 7, 2013 13:49
Show Gist options
  • Save thisislawatts/4475129 to your computer and use it in GitHub Desktop.
Save thisislawatts/4475129 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by LA Watts.
Raw
index.html
<button class="switch">Reverse this mother!</button>
<div class="svg-container">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
width="520" height="650" viewBox="0 0 520 650" enable-background="new 0 0 520.562 650.435"
xml:space="preserve">
<g>
<path fill="#FF0000" d="M520.496,488.999c-1.104-11.037-10.346-20.31-27.508-27.636c0.765-13.233,0.962-25.827,1.143-37.207
c0.277-18.015,0.596-37.772,3.914-48.329c2.126-1.796,3.648-4.229,4.32-6.972c0.148-0.087,0.281-0.228,0.44-0.302
c3.949-1.81,6.763-5.437,7.533-9.711c0.771-4.277-0.604-8.657-3.671-11.729c-4.888-4.893-14.114-7.534-20.317-7.534
c-1.379,0-2.748,0.217-4.062,0.635c-7.975,2.567-13.974,6.636-18.494,11.631c-4.896-8.173-16.188-10.444-22.053-10.444
c-10.333,0-16.882,4.174-20.065,9.512c-1.497-0.271-3.009-0.409-4.514-0.409c-9.77,0-19.097,5.726-25.72,12.528
c-2.21-0.455-4.567-0.69-7.055-0.69c-9.849,0-16.543,4.022-19.892,9.346c-3.463-0.992-7.118-1.497-10.938-1.497
c-2.134,0-4.337,0.162-6.55,0.475c-0.193,0.031-0.38,0.061-0.569,0.098c-0.669,0.125-1.332,0.268-1.985,0.428
c1.066-2.063,2.025-3.631,2.812-4.652c2.768-1.896,4.756-4.791,5.481-8.147c0.952-4.404-0.397-9-3.581-12.188
c-4.58-4.574-10.823-7.092-17.603-7.092c-2.633,0-5.246,0.386-7.823,1.103c2.546-2.36,4.75-5.087,6.5-8.093
c6.927-5.865,11.882-14.295,11.882-23.879c0-1.85-0.244-5.113-1.589-8.617c6.827,3.667,14.636,5.598,23.34,5.598
c16.318,0,31.334-8.724,42.727-24.661c3.801-3.784,7.335-8.207,10.525-13.277c9.614-15.271,15.13-34.521,15.13-52.815
c0-36.263-19.861-59.702-50.597-59.702c-4.646,0-9.065,0.741-13.146,2.114c-0.517-20.2-14.664-29.421-27.824-29.421
c-10.004,0-18.938,6.724-25.363,13.883c-3.188-1.341-6.612-2.047-10.142-2.047c-6.425,0-15.159,2.279-20.606,12.987
c-0.096,0.067-0.192,0.136-0.29,0.199c-2.231-0.35-4.159-0.439-5.507-0.439c-2.053,0-4.061,0.149-6.009,0.439
c1.264-3.646,1.979-7.568,1.979-11.751c0-13.328-9.031-22.893-22.301-24.075c6.251-14.485,9.559-29.655,9.559-45.119
C262.008,37.134,237.442,0,197.757,0c-27.938,0-54.083,17.487-67.991,32.463c-0.093,0.103-0.19,0.205-0.28,0.311
c-2.066,2.37-4.018,4.776-5.871,7.22c-0.549,0.559-1.111,1.119-1.626,1.672c-0.089,0.1-0.188,0.206-0.278,0.308
c-32.396,37.167-38.134,82.917-41.6,151.732c-9.848,2.09-19.301,2.938-26.198,2.938c-6.818,0-10.873-0.583-13.162-1.127
c0.021-0.354,0.029-0.713,0.029-1.076v-1.818c0-4.274-2.052-8.278-5.511-10.771c-2.292-1.646-5.009-2.502-7.764-2.502
c-1.405,0-2.823,0.224-4.197,0.679c-5.438,1.814-9.814,6.088-12.297,11.503C4.967,195.561,1,202.884,1,210.923
c0,11.354,9.315,30.568,44.228,30.568c8.504,0,20.545-0.969,32.721-3.056c-0.736,21.824-2.202,41.965-6.207,62.007
c-19.231,0.132-34.317,10-44.205,24.241c-13.562,13.162-21.071,33.199-21.071,52.845c0,51.503,53.938,86.103,104.312,86.103
c0.116,0,0.232-0.004,0.35-0.007c26.812-0.704,50.744-10.51,68.224-27.238c1.246,10.829,1.913,23.313,1.913,36.732
c0,47.279-6.063,80.594-9.676,96.252c-1.252,5.417,1.009,11.033,5.656,14.082c2.212,1.448,4.746,2.17,7.272,2.17
c2.78,0,5.56-0.871,7.898-2.606l24.584-18.209c2.347-1.736,3.984-4.213,4.791-6.988l2.982-2.21
c2.764-2.048,4.625-5.089,5.188-8.482c3.228-19.357,6.138-35.631,9.134-49.91c6.153,8.696,14.817,11.936,20.985,11.936
c1.515,0,2.985-0.259,4.361-0.738c-14.069,18.044-22.18,40.706-22.18,63.03c0,27.456,12.883,49.528,37.271,63.831
c19.06,11.179,41.483,15.16,56.118,15.16c1.991,0,3.894-0.069,5.649-0.221c42.524-3.693,78.52-22.992,104.147-55.807
c0.094-0.119,0.178-0.252,0.269-0.37c2.584-2.837,5.104-5.751,7.509-8.831c16.67-21.342,28.466-48.037,34.35-77.08
c1.697,0.869,3.441,1.803,5.254,2.857c2.064,1.211,4.377,1.81,6.687,1.81c2.498,0,4.994-0.704,7.177-2.104
c2.946-1.896,4.941-4.841,5.717-8.147c0.704-0.296,1.397-0.631,2.057-1.055C518.662,498.787,520.993,493.964,520.496,488.999z"/>
</g>
<g>
<path fill="#FFFFFF" class="svg-white" d="M303.365,171.68c0,16.384-3.644,38.237-3.644,48.25c0,4.551,2.731,3.644,4.554,3.644
c10.011-5.464,15.475-39.148,15.475-51.894c0-2.732,0-6.371,0-6.371c0.911-3.646,7.283-9.103,11.837-9.103c0,0,4.549,0,4.549,5.458
c0,9.108-6.372,30.042-6.372,53.714c0,28.221,7.283,67.37,41.884,67.37c28.217,0,47.338-37.325,47.338-68.281
c0-19.119-7.279-46.433-37.325-46.433c-13.658,0-26.402,10.019-26.402,27.312c0,0.916,0,2.734,2.734,2.734
c1.817,0,9.104-15.48,22.753-15.48c14.57,0,23.673,20.943,23.673,40.062c0,34.593-18.208,53.711-33.68,53.711
c-13.656,0-27.319-14.568-27.319-49.16c0-25.491,11.839-44.613,11.839-69.19c0-12.747-7.278-17.295-14.566-17.295
c-9.104,0-20.028,13.653-22.759,20.027c-3.646-6.374-9.104-8.19-12.746-8.19c-6.373,0-8.191,4.55-9.104,6.368h2.73
C302.454,158.933,303.365,163.488,303.365,171.68L303.365,171.68z M375.281,395.639c-8.187-12.747-20.023-12.747-26.393-11.838
c-14.571,2.734-24.583,19.117-24.583,40.97c0,32.774,30.041,31.862,36.409,17.298c1.825,4.552,9.109,8.194,11.835,6.376
c-3.637-9.106-1.812-20.943-0.902-27.312C373.465,408.385,376.196,402.918,375.281,395.639L375.281,395.639z M357.081,435.694
c-8.192,9.105-16.392,4.552-18.216-5.461c-2.729-13.656,2.734-32.775,11.843-35.508c3.639-1.817,8.192-0.909,11.832,1.824
C362.54,404.744,357.081,414.755,357.081,435.694L357.081,435.694z M395.315,380.161c-1.819-3.642-7.282-4.554-10.926-4.554
c-6.374,0-9.108,2.733-9.108,4.554h0.915c4.549,0,6.373,4.554,6.373,12.747c0,14.566-4.554,34.593-4.554,43.694
c0,0,0,4.558,2.729,5.467c11.842,4.551,16.389-48.252,16.389-51.896v-4.551c0.911-1.822,8.199-8.194,10.926-8.194
c1.821,0,5.464,0,5.464,5.464c0,8.193-5.464,15.477-5.464,36.414c0,15.479,10.017,19.118,13.654,17.296
c-3.639-28.218,9.104-36.415,9.104-57.353c0-10.015-7.284-15.476-13.652-15.476C408.059,363.775,398.044,373.785,395.315,380.161
L395.315,380.161z M166.804,220.841c0-5.464-4.554-11.833-10.927-11.833c-22.758,0-31.86,21.847-31.86,46.432
c0,13.65,9.104,28.22,23.67,28.22c12.748,0,20.94-17.296,20.94-27.313c0-8.192-3.543-10.882-8.092-10.882
c-1.826,0-2.836-0.953-2.836,5.419v8.197c0,10.011-0.906,18.208-9.104,18.208c-7.283,0-9.101-20.031-9.101-27.312
C153.147,244.51,166.804,238.138,166.804,220.841L166.804,220.841z M139.494,243.598c0-5.46,6.37-23.668,13.652-23.668
c1.821,0,2.729,4.551,2.729,5.461C155.877,231.764,151.326,239.958,139.494,243.598L139.494,243.598z M250.563,203.544
c0,14.564,3.641,28.22,17.299,28.22c18.208-0.909,28.22-29.131,28.22-45.518c0-12.749-4.552-20.938-17.3-20.938
C259.664,165.309,250.563,183.515,250.563,203.544L250.563,203.544z M277.871,176.232c2.734,0,4.558,3.644,4.558,11.831
c0,11.836-6.375,34.6-13.659,34.6c-3.639,0-4.554-5.464-4.554-12.747C264.216,197.17,267.862,178.052,277.871,176.232
L277.871,176.232z M301.545,323.717c1.82,1.823,4.55,3.642,7.283,3.642c9.104,0,20.025-9.106,20.025-19.119
c0-7.285-5.459-10.016-15.476-10.016c-8.193,0-14.566,2.73-23.676,8.194c1.826-9.106,10.02-10.928,17.3-22.76
c6.376-9.108,9.104-20.033,9.104-25.494c0-4.549-0.909-8.188-10.922-8.188c-12.748,0-25.488,21.848-29.133,44.604l-6.372,3.646
c-3.642,2.73-9.106,3.642-13.657,3.642c-1.819,0-3.643,0-4.55-0.911l-0.91,0.911c0,4.553,3.641,7.282,10.011,7.282
c5.466,0,9.106-0.909,14.563-2.729l-1.819,7.281l-10.922,8.191c-1.822-7.282-6.373-11.834-17.3-11.834
c-19.118,0-28.22,18.209-28.22,39.15c0,14.566,2.73,30.042,18.208,30.042c17.296-1.822,28.225-30.952,28.225-47.34
c2.729-3.643,6.371-4.551,9.102-6.369v20.934c0,16.386,0,32.775,3.644,49.164l7.281-17.298c0-17.297,0-36.416,3.643-60.088
c6.372-3.643,13.659-4.552,16.389-4.552c2.73,0,3.638,0.909,3.638,2.73C307.003,320.985,305.186,322.805,301.545,323.717
L301.545,323.717z M248.739,333.726c-3.643,5.464-5.462,8.198-5.462,10.928v0.914l5.462-4.558
c-1.82,11.84-6.372,28.226-13.653,28.226c-2.732,0-4.552-5.461-4.552-13.653c0-12.748,4.552-32.777,14.562-33.689
c2.729,0,3.643,3.648,3.643,10.931C248.739,332.823,248.739,332.823,248.739,333.726L248.739,333.726z M248.739,175.321
c-21.85,0-27.312,26.401-27.312,43.698c0,14.569,7.282,23.675,13.658,23.675c9.104,0,12.999-5.228,12.999-10.689
c0-1.823-0.728-7-2.987-7.524c-0.485,3.481-2.914,5.142-4.736,5.142c-4.551,0-5.274-9.692-5.274-14.245
C235.085,195.347,246.005,175.321,248.739,175.321L248.739,175.321z M479.074,470.288c4.549-56.438-3.646-103.785,18.203-113.797
c-1.818-1.822-7.282-3.641-10.926-3.641c-25.489,8.192-22.755,40.058-22.755,60.083c-5.462,4.552-10.017,5.465-11.837,4.552
c-2.729-1.815,0-16.383,0-16.383l1.82-15.479c1.817-11.838,1.817-22.763-0.91-26.401c-0.909-2.729-7.284-4.552-10.928-4.552
c-7.281,0-9.102,2.731-9.102,4.552h0.911c3.639,0,6.371,4.555,6.371,13.658c0,13.655-5.463,36.411-5.463,45.52
c0,4.553,0.909,6.372,2.729,9.103c7.286,6.376,19.118,1.821,27.315-2.73c0,7.285,0.911,24.579,0,41.882
c-14.565-3.644-37.33-7.285-55.533-7.285c-38.235,0-76.476,9.102-101.059,28.228c0-71.924,24.583-129.285,31.865-132.012
c-6.373-6.374-20.03-3.642-29.132,11.835l-42.787,81.027l-0.915-68.284c-20.941,3.64-40.969,66.459-45.521,81.933
c-0.908-30.95-1.818-61.906-17.295-84.665c7.28-22.759,7.28-47.341,7.28-71.009v-31.869c44.61-18.205,73.742-28.22,98.325-34.593
l1.822-7.28c-30.954,3.639-67.372,15.476-100.147,29.128v-34.592c0-19.119,5.465-33.688,10.925-39.149h-2.729
c-6.375,0-12.746,6.377-15.477,10.017c-0.911-0.911-2.731-0.911-6.374-0.911c-19.121,0-27.313,20.029-27.313,35.508
c0,19.12,9.104,27.311,18.207,27.311c4.552,0,5.461-1.822,9.106-3.643v12.745c-23.674,10.019-46.432,20.027-61.908,29.135
l-25.488,15.477l2.729-26.4c2.73-18.21,2.73-43.702,4.55-80.112c71.92-22.764,131.099-73.743,131.099-135.653
c0-29.13-20.029-58.267-50.98-58.267c-23.674,0-46.432,15.48-58.264,28.227c-30.956,35.506-35.506,79.204-39.148,160.229
c-17.299,6.373-35.508,8.193-46.433,8.193c-23.669,0-27.31-6.373-27.31-11.835c0,0,0.905-1.818,0.905-3.64v-1.818
c-2.727,0.903-5.463,4.547-5.463,9.101c0,7.285,7.283,17.298,30.958,17.298c10.923,0,30.042-1.822,46.432-6.374
c-0.91,42.793-2.733,77.386-16.39,115.621c-12.747,10.017-21.85,20.94-21.85,27.313c0,10.012,6.371,12.743,12.745,12.743
c20.028,0,31.865-28.221,31.865-29.135c27.312-22.759,56.441-40.966,91.949-56.443v23.672c0,20.94,0,44.613-4.556,61.906
c-9.104-8.192-26.399-8.192-35.503-2.731c13.655,0.909,22.758,6.373,30.951,18.207c-15.478,31.869-47.34,50.076-71.011,50.076
c-38.235,0-67.366-30.959-67.366-66.459c0-39.15,25.487-45.525,28.219-50.985c0-1.821-2.73-2.73-6.37-2.73
c-30.954,0-44.612,31.868-44.612,54.625c0,45.523,50.073,72.834,91.043,72.834c34.595-0.913,61.904-18.208,75.56-45.521
c6.377,18.21,8.199,46.431,8.199,68.278c0,40.97-4.554,75.561-10.019,99.232l24.584-18.207
c10.012-60.087,17.295-93.771,35.504-128.366l3.643,60.999c4.551,9.101,11.839,9.101,11.839,9.101s15.22-40.577,28.46-64.289
c-3.644,20.943-8.438,45.173-4.792,75.214c-18.212,17.3-28.221,41.877-28.221,64.639c0,55.536,62.815,67.374,84.669,65.547
c83.752-7.278,125.63-78.292,130.181-149.302c8.192,1.816,18.214,5.464,29.131,11.833
C506.382,481.215,489.994,473.932,479.074,470.288L479.074,470.288z M120.373,154.382c5.463-77.381,36.42-133.83,81.026-133.83
c22.759,0,29.134,18.206,29.134,37.331c0,48.25-34.596,82.846-50.076,98.324c-27.311,26.395-50.979,36.417-62.815,40.057
C117.642,182.601,119.463,164.396,120.373,154.382L120.373,154.382z M193.202,249.977c-7.283,0-9.103-14.566-9.103-20.027v-2.734
c3.641-19.119,10.012-21.85,16.389-21.85C198.668,209.008,195.938,249.977,193.202,249.977L193.202,249.977z M283.335,563.148
c0-13.652,2.734-26.397,15.478-43.699c7.282,26.404,30.95,50.983,52.807,50.983c0,0,1.817,0,5.463-0.911
c-20.944-11.834-39.149-33.688-46.433-62.82c33.682-28.217,71.92-36.414,104.697-36.414c13.649,0,29.131,1.823,49.16,5.464
c3.151,0.579-5.937,48.257-7.162,52.727c-8.776,32.09-31.613,63.601-62.266,77.817c-26.771,12.417-60.457,13.769-86.672-0.841
c-6.123-3.415-13.142-9.001-16.965-14.977C286.715,583.098,283.335,571.958,283.335,563.148z M211.412,174.412
c0,1.82,0.912,1.82,5.465,1.82c2.73,0,4.55,0,4.55,0c5.463,0,40.058-12.744,40.058-35.504c0-9.105-7.28-10.928-11.833-10.928
C242.366,147.099,228.709,167.132,211.412,174.412z"/>
</g>
</svg>
</div>
Raw
script.js
$(".switch").click(function(){
$("html").toggleClass('reverse')
});
var SVGContainers = document.querySelectorAll('.svg-container'),
SVGElements = document.getElementsByTagName('svg');
/**
* Resize all .svg-containers so that they match current viewport dimensions
*
* @requires global SVGContainers
* @returns void
*/
function resizeSVGContainers() {
for (var i = 0; i < SVGContainers.length; i++) {
var container = SVGContainers[i];
container.style.height = window.innerHeight + "px";
};
repositionSVGElements();
}
function repositionSVGElements() {
for (var i = 0; i < SVGElements.length; i++) {
var el = SVGElements[i];
el.style.top = (window.innerHeight - el.offsetHeight) / 2;
};
}
window.addEventListener('resize', resizeSVGContainers );
resizeSVGContainers();
Raw
style.scss
@import "compass";
* { margin: 0; padding: 0 }
html { background: black; color: white;}
.switch { cursor: pointer }
.reverse { background: white; color: black; }
.reverse .svg-white { fill: black; }
button {
position: absolute;
top: 0;
left: 0;
}
/* SVG */
.svg-container { outline: 1px solid red; width: 100% }
.svg-container svg {
max-width: 100%;
height: auto;
max-height: 100%;
display: block;
position: relative;
margin: 0 auto;
outline: 1px solid blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment