Skip to content

Instantly share code, notes, and snippets.

@albertodelax

albertodelax/.DS_Store

Last active March 19, 2016 18:36
Show Gist options
  • Save albertodelax/bd33773d259b9df0dff2 to your computer and use it in GitHub Desktop.
Save albertodelax/bd33773d259b9df0dff2 to your computer and use it in GitHub Desktop.
Download ZIP
Circular Rotating Nav Bar
Display the source blob
Display the rendered blob
Raw
bubble.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="450.781px" height="390.037px" viewBox="0 0 450.781 390.037" enable-background="new 0 0 450.781 390.037"
xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="20" stroke-miterlimit="10" d="M10,151.866
c0,32.241,15.787,62.546,45.654,87.641c24.275,20.398,57.195,36.184,94.008,45.266c9.178,2.465,14.018,8.816,18.792,16.412
c6.459,10.275,12.755,20.712,20.567,30.04c14.193,16.944,32.603,29.309,52.97,37.666c17.376,7.129,36.507,11.147,55.341,11.147
c10.426,0,19.872-1.256,27.328-3.631c12.782-4.071,16.273-10.613,16.951-15.383c0.889-6.261-1.743-14.793-19.33-19.896
c-27.41-7.952-39.918-25.403-45.629-39.382c-4.417-11.221,5.074-12.872,5.074-12.872c93.227-16.42,159.057-72.158,159.057-137.01
c0-38.746-22.997-74.848-64.755-101.658C335.643,24.279,282.146,10,225.392,10c-56.753,0-110.25,14.279-150.634,40.207
C32.999,77.017,10.002,113.119,10,151.866z"/>
<path fill="#FFFFFF" d="M167.762,278.601v0.002c51.117,129.371,207.883,88.63,151.006,72.13
c-56.875-16.5-57.633-69.072-57.633-69.072l0,0c96.037-11.052,168.92-64.957,168.92-129.795C430.055,79.037,338.1,20,224.665,20
C111.231,20,19.274,79.037,19.274,151.865C19.274,212.021,82.01,262.76,167.762,278.601z"/>
<path d="M10.001,151.865c0,32.241,15.787,62.546,45.654,87.641c24.276,20.399,57.194,36.185,94.008,45.267
c0.003,0,0.005,0.002,0.009,0.002c11.389,3.059,16.035,12.098,16.035,12.098v-0.002c30.596,60.98,86.916,83.168,131.625,83.168
c0.003,0,0.003,0,0.006,0c10.42,0,19.866-1.256,27.322-3.631c12.782-4.071,16.273-10.613,16.951-15.383
c0.889-6.261-1.743-14.793-19.33-19.896c-27.41-7.952-39.918-25.403-45.629-39.382c-4.417-11.221,5.074-12.872,5.074-12.872
l-0.002-0.002c93.229-16.418,159.059-72.156,159.059-137.008c0-38.746-22.997-74.848-64.755-101.658
C335.643,24.279,282.146,10,225.392,10c-56.753,0-110.25,14.279-150.634,40.207C32.999,77.017,10.002,113.119,10.001,151.865z
M31.139,159.427c-0.39-2.421-1.138-5.111-1.138-7.562c0-31.699,19.732-61.825,55.562-84.828C122.764,43.152,172.422,30,225.392,30
c52.971,0,102.629,13.152,139.831,37.037c35.83,23.003,55.561,53.129,55.561,84.828c0,27.924-15.802,55.307-44.495,77.106
c-27.767,21.094-65.813,35.791-107.81,41.754c-0.543,0.123-1.194,0.217-1.98,0.277c-0.082,0.006-0.156,0.02-0.236,0.025
c-0.604,0.082-1.205,0.164-1.809,0.24c-13.088,2.315-12.123,16.088-12.123,16.088c0.758,5.957,2.752,16.033,8.008,26.979
c7.178,14.957,21.935,34.465,51.74,44.547c-3.926,0.674-8.85,1.154-14.738,1.154c-12.533,0-37.404-2.244-63.26-17.273
c-5.261-3.058-10.326-6.83-15.145-10.536c-8.879-6.83-16.643-14.874-23.103-24.029c-3.313-4.695-6.294-9.615-9.082-14.637
c-2.067-3.727-3.911-7.539-5.771-11.371c-1.318-2.717-3.374-5.483-5.573-7.547c-4.546-4.264-10.373-6.549-16.36-8.318
c-3.715-1.098-7.492-1.996-11.061-3.047c-10.262-3.019-20.463-6.243-30.396-10.229c-12.793-5.132-25.147-11.392-36.565-19.134
c-10.193-6.912-19.718-14.962-27.759-24.315c-7.106-8.265-12.905-17.6-16.665-27.853c-1.766-4.814-3.083-9.777-4.108-14.797
C31.982,164.453,31.542,161.943,31.139,159.427z"/>
<g>
<path d="M133.517,137.891c-0.607,0-1.224-0.057-1.842-0.172c-5.43-1.012-9.011-6.232-8-11.662
c0.387-2.225,0.894-9.623-1.894-13.591c-3.175-4.519-2.086-10.757,2.433-13.932c4.52-3.175,10.757-2.085,13.932,2.433
c8.104,11.532,5.514,27.023,5.192,28.752C142.441,134.529,138.239,137.891,133.517,137.891z"/>
</g>
<path d="M247.039,134.99c0,0-5.122-5.156-12.872-2.281s-3.467,13.816-3.467,13.816s-0.058-0.072-0.146-0.215
c0.055,0.088,1.325,2.176,0.709,4.55c-0.51,1.97-2.272,4.077-5.048,6.111c-4.379,2.964-5.259-2.933-5.259-2.933l0,0
c-0.309-3.876-0.238-8.796,0.417-13.613c0.751-5.467-3.068-10.51-8.535-11.266c-5.476-0.763-10.521,3.062-11.277,8.533
c-0.039,0.281-0.951,6.971-0.723,14.49c0.379,12.521,3.641,20.715,9.972,25.046c1.969,1.347,5.216,2.922,9.64,2.922
c3.353-0.001,7.381-0.905,12.037-3.499c10.197-5.684,16.359-12.92,18.316-21.508C253.283,144.252,247.686,135.906,247.039,134.99z"
/>
<path d="M181.192,145.02c-1.69-0.867-3.46-1.529-5.301-1.995c-1.264-0.319-2.538-0.494-3.838-0.573
c-0.577-0.034-1.367,0.057-1.838-0.354c-0.441-0.384-0.246-1.015,0.119-1.386c0.471-0.48,1.095-0.764,1.66-1.111
c0.606-0.373,1.21-0.743,1.839-1.078c1.303-0.695,2.656-1.293,4.024-1.847c0.629-0.255,1.265-0.493,1.909-0.708
c5.236-1.732,8.083-7.378,6.359-12.619c-1.726-5.246-7.379-8.1-12.624-6.375c-13.438,4.42-28,14.695-24.811,29.104
c0.546,2.467,1.487,5.075,2.849,7.212c1.136,1.781,2.658,3.306,4.336,4.579c1.444,1.097,3.025,1.938,4.726,2.562
c1.479,0.543,3.017,1.008,4.575,1.258c1.767,0.285,3.538,0.51,5.301,0.826c0.881,0.158,1.925,0.426,2.208,1.403
c0.266,0.915-0.417,1.798-1.13,2.298c-1.082,0.758-2.379,1.236-3.597,1.729c-2.411,0.978-4.832,1.899-7.283,2.771
c-1.758,0.627-3.548,1.179-5.333,1.724c-5.282,1.612-8.256,7.202-6.644,12.484c1.316,4.31,5.277,7.083,9.561,7.082
c0.967,0,1.951-0.142,2.924-0.438c23.784-7.262,34.346-15.002,35.315-25.877C197.225,157.561,192.075,150.606,181.192,145.02z"/>
<path d="M309.626,129.621c-4.267-4-11.38-5.363-21.146-4.055c-3.77,0.506-13.237,2.204-19.715,7.033
c-7.658,5.71-7.699,13.314-5.377,18.211c1.771,5.568,0.971,33.42-0.902,56.146c-0.453,5.504,3.642,10.334,9.146,10.788
c0.28,0.022,0.558,0.034,0.833,0.034c5.15,0,9.523-3.954,9.955-9.18c0.045-0.545,1.107-13.516,1.65-27.788
c0.003-0.058,0.004-0.111,0.007-0.169c0-0.007,0.001-0.011,0.001-0.018c0-0.013,0.001-0.023,0-0.036
c0.009-0.233,0.016-0.452,0.023-0.683c0.186-1.871,1.396-2.526,2.094-2.748c0.149-0.033,0.291-0.07,0.438-0.104
c0.031-0.005,0.054-0.007,0.054-0.007v-0.006c20.16-4.689,26.463-16.141,28.429-22.781
C317.775,145.275,315.518,135.144,309.626,129.621z M286.146,156.436c-2.088,0.461-2.104-2.143-2.299-3.521
c-0.113-0.792-0.234-1.586-0.312-2.383c-0.102-1.025-0.186-2.178,0.506-3.031c0.77-0.95,2.094-1.129,3.209-1.394
c1.451-0.345,2.923-0.615,4.402-0.806c1.613-0.209,4.22-0.678,4.395,1.67c0.046,0.623-0.008,1.506-0.242,2.088
c-1.201,2.99-4.003,4.914-6.813,6.232C288.104,155.707,287.105,156.223,286.146,156.436z"/>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
face.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Circle Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<style type="text/css">
body{
background-color: #212121;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.container{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
padding: 0;
position: relative;
width: 100%;
height: 100%;
}
h1{
font-family: 'Roboto Slab', serif;
color: white;
font-size: 11.5vmin;
font-weight: 300;
-webkit-animation-name: turn;
-webkit-animation-direction: reverse;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: turn;
animation-direction: reverse;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-name: turn;
-o-animation-direction: reverse;
-o-animation-duration: 30s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
h2{
font-family: 'Anonymous Pro', 'Courier New', monospace;
color: #d3d3d3;
font-size: 5vmin;
font-weight: 400;
-webkit-animation-name: turn;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: turn;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes turn{
0%{-webkit-transform: rotate(0);}
100%{-webkit-transform: rotate(360deg);}
}
@keyframes turn{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
a{
text-decoration: none;
color: #d3d3d3;
}
a:hover{
color: white;
}
#face{
position: fixed;
top: 50%;
left: 50%;
max-width: 25vmin;
transform: translate(-45%, -50%);
-webkit-transform: translate(-45%, -50%);
-moz-transform: translate(-45%, -50%);
-ms-transform: translate(-45%, -50%);
-o-transform: translate(-45%, -50%);
}
#bubble{
max-width: 25vmin;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-110%, -120%);
-webkit-transform: translate(-110%, -120%);
-moz-transform: translate(-110%, -120%);
-ms-transform: translate(-110%, -120%);
-o-transform: translate(-110%, -120%);
display: none;
}
</style>
</head>
<body>
<div class="container">
<img id= "face" src="face.svg">
<img id= "bubble" src="bubble.svg">
<h1 id="name">Designer &bigstar; Alberto Guillermo de la Cruz &bigstar;&nbsp;</h1>
<h2 id="links">About &mdash; Projects &mdash; R&eacute;sum&eacute; &mdash; Twitter &mdash; Github &mdash; LinkedIn &mdash;&nbsp;</h2>
</div>
<script type="text/javascript">
$('h1').circleType();
$('h2').circleType();
// FOR ABOUT
var aboutLink = document.createElement('a');
aboutLink.href="http://albertogui.com";
for(i=1; i<6; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
aboutLink.appendChild(linkDiv);
};
document.getElementById('links').appendChild(aboutLink);
// FOR PROJECTS
var projectsLink = document.createElement('a');
projectsLink.href="http://bl.ocks.org/agdelax";
for(i=9; i<18; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
projectsLink.appendChild(linkDiv);
};
$(projectsLink).insertAfter("h2 .char8");
// FOR RESUME
var resumeLink = document.createElement('a');
resumeLink.href="http://albertogui.com/resume";
for(i=20; i<26; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
resumeLink.appendChild(linkDiv);
};
$(resumeLink).insertAfter("h2 .char19");
// FOR TWITTER
var twitterLink = document.createElement('a');
twitterLink.href="http://twitter.com/agdelax";
for(i=29; i<36; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
twitterLink.appendChild(linkDiv);
};
$(twitterLink).insertAfter("h2 .char28");
// FOR GITHUB
var githubLink = document.createElement('a');
githubLink.href="http://github.com/agdelax";
for(i=39; i<45; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
githubLink.appendChild(linkDiv);
};
$(githubLink).insertAfter("h2 .char38");
// FOR LINKEDIN
var linkedinLink = document.createElement('a');
linkedinLink.href="http://linkedin.com/in/agdelax";
for(i=48; i<56; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
linkedinLink.appendChild(linkDiv);
};
$(linkedinLink).insertAfter("h2 .char47");
$("#face").hover(function () {
document.getElementById('bubble').style.display="block";
}, function(){
document.getElementById('bubble').style.display="none";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment