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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
face.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="392.211px" height="601.879px" viewBox="0 0 392.211 601.879" enable-background="new 0 0 392.211 601.879"
xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="20" stroke-miterlimit="10" d="M354.042,114.151
C302.007,6.538,196.276,14.396,145.464,18.177c-10.524,0.783-20.466,1.521-24.357,0.699C68.966,7.853,53.671,7.286,46.722,16.122
c-3.049,3.875-3.499,9.055-1.205,13.852c1.588,3.32,4.055,6.846,6.575,10.312c-5.743-0.895-10.831-0.637-15.177,0.777
c-6.263,2.037-10.863,6.418-12.954,12.332c-4.202,11.89,2.812,26.715,15.316,32.375c2.18,0.986,7.745,3.504,9.321,4.992
c-0.098,0.764-0.579,2.853-2.892,7.205c-6.235,11.738-9.564,24.378-11.103,31.576c-11.996,4.806-18.883,8.629-19.513,8.982
c-4.808,2.706-6.51,8.792-3.811,13.604c2.699,4.812,8.792,6.526,13.608,3.833c2.288-1.279,5.429-2.847,9.303-4.573l3.867,20.214
c-0.543,2.583-0.077,5.373,1.536,7.721c1.939,2.821,5.067,4.337,8.25,4.337c1.373,0,2.755-0.289,4.058-0.871l0,0
c0,0-24.423,21.354-26.423,53.604c-1.657,26.723,14.386,45.167,19.938,50.71c-3.055-2.212-7.232-2.601-10.743-0.641
c-4.821,2.693-6.547,8.786-3.853,13.606c0.282,0.505,2.557,4.445,7.235,9.471l-0.86-0.689c0.547,0.497,0.858,0.688,0.861,0.689
c0,0.001,0,0.001,0.001,0.001c-0.001,0.009-4.52,37.933,15.42,66.954c0.118,0.188,0.238,0.373,0.369,0.554
c0.001,0,0.001,0.001,0.001,0.001l0,0c0.55,0.753,1.209,1.444,1.985,2.041c1.634,1.255,3.283,2.467,4.944,3.642
c-7.879,44.286-12.985,82.462,20.587,108.797c14.67,11.508,14.879,26.695,13.026,36.371l0.001,0.001c0,0-0.003,0.013-0.004,0.016
c-0.184,0.955-0.385,1.854-0.597,2.693c-0.966,5.529-1.74,18.075,9.446,23.64c40.519,20.232,78.311,32.438,112.429,36.285
c7.953,0.896,15.716,1.345,23.275,1.345c20.531,0,39.558-3.303,56.785-9.876c40.911-15.611,57.351-44.237,58.029-45.448
l0.744-1.327l0.316-1.487c0.153-0.725,15.465-73.358,23.057-160.48C388.154,255.291,380.134,168.114,354.042,114.151z"/>
<g>
<path d="M116.967,148.146c-5.023-2.296-10.955-0.084-13.25,4.939c-0.246,0.537-24.878,54.002-49.813,72.552
c-10.598,7.884-12.649,17.157-12.504,23.55c0.515,22.565,29.711,42.927,33.038,45.174c1.716,1.159,3.662,1.715,5.588,1.715
c3.21,0,6.363-1.543,8.296-4.404c3.091-4.576,1.887-10.793-2.689-13.885c-9.656-6.521-24.037-20.266-24.237-29.056
c-0.025-1.101-0.084-3.677,4.446-7.047c29.061-21.618,54.979-77.905,56.068-80.29C124.203,156.37,121.99,150.439,116.967,148.146z
"/>
<circle cx="112.511" cy="258.896" r="10.304"/>
<path d="M354.042,114.151C302.007,6.538,196.276,14.396,145.464,18.177c-10.524,0.783-20.466,1.521-24.357,0.699
C68.966,7.853,53.671,7.286,46.722,16.122c-3.049,3.875-3.499,9.055-1.205,13.852c1.588,3.32,4.055,6.846,6.575,10.312
c-5.743-0.895-10.831-0.637-15.177,0.777c-6.263,2.037-10.863,6.418-12.954,12.332c-4.202,11.89,2.812,26.715,15.316,32.375
c2.18,0.986,7.745,3.504,9.321,4.992c-0.098,0.764-0.579,2.853-2.892,7.205c-6.235,11.738-9.564,24.378-11.103,31.576
c-11.996,4.806-18.883,8.629-19.513,8.982c-4.808,2.706-6.51,8.792-3.811,13.604c2.699,4.812,8.792,6.526,13.608,3.833
c4.364-2.44,11.805-5.921,21.593-9.583c0.263-0.085,0.52-0.181,0.772-0.287c4.149-1.537,8.706-3.1,13.623-4.629
c-3.642,8.166-9.522,17.643-18.706,23.955c-4.551,3.129-5.704,9.354-2.576,13.905c1.939,2.821,5.067,4.337,8.25,4.337
c1.952,0,3.925-0.571,5.655-1.761c19.556-13.442,27.791-35.571,30.834-46.668c7.743-1.716,15.977-3.212,24.59-4.337
c20.484-2.676,41.026-3.099,61.353-1.285c1.275,4.908,3.665,11.556,8.153,19.438c11.76,20.653,32.24,40.57,60.872,59.197
c1.685,1.096,3.574,1.619,5.444,1.619c3.27,0,6.475-1.603,8.392-4.548c3.013-4.63,1.7-10.823-2.93-13.835
c-37.274-24.25-51.937-46.043-57.692-58.971c1.525,0.262,3.05,0.528,4.57,0.816c36.191,6.839,71.445,21.023,104.781,42.158
c1.66,1.053,3.514,1.555,5.346,1.555c3.311,0,6.551-1.643,8.455-4.646c2.957-4.664,1.572-10.844-3.092-13.801
c-35.661-22.607-73.465-37.758-112.358-45.027c-31.155-5.824-63.047-6.625-94.789-2.383c-18.431,2.465-34.608,6.326-47.996,10.379
c1.484-4.533,3.428-9.49,5.936-14.211c3.44-6.475,7.031-14.953,4.248-23.112c-3.063-8.981-12.111-13.077-20.094-16.688
c-3.491-1.581-5.098-5.895-4.75-7.346c0.781-0.403,3.744-0.977,9.694,0.572c6.013,1.564,18.524,4.822,24.455-3.902
c5.79-8.52-0.901-17.744-7.43-26.672c9.555,0.827,25.436,3.582,47.477,8.241c6.674,1.411,16.448,0.684,29.977-0.321
c49.969-3.713,142.978-10.631,189.089,84.735c56.479,116.804,4.306,381.809-0.443,405.102
c-5.615,8.825-21.781,26.082-48.281,35.842c-20.551,7.567-44.272,9.832-70.504,6.732c-28.546-3.373-60.11-13.146-94.026-29.05
c-8.764-4.512-7.841-16-7.841-16l-0.003-0.004c1.417-15.696-2.577-35.061-21.227-49.688C71.54,458.4,72.248,434.81,79.171,393.786
c7.979,4.005,16.195,7.149,24.598,9.428c0.43,0.149,0.87,0.268,1.319,0.356c10.456,2.714,21.193,4.085,32.107,4.085
c7.48-0.001,15.049-0.646,22.661-1.941c29.72-5.062,59.541-20.279,81.815-41.75c26.896-25.923,36.125-54.129,23.517-71.858
c-9.863-13.868-24.934-19.262-44.793-16.03c-15.653,2.546-32.768,9.906-50.886,17.697c-19.541,8.404-39.748,17.094-57.989,19.471
c-45.685,5.949-62.474-21.623-63.273-22.989c-2.71-4.774-8.77-6.472-13.572-3.791c-4.821,2.693-6.547,8.786-3.853,13.606
c0.71,1.271,13.979,24.254,46.646,31.712l14.1,45.75c-8.143-3.745-16.019-8.517-23.55-14.302
c-4.38-3.362-10.658-2.54-14.022,1.839c-3.364,4.38-2.541,10.656,1.839,14.021c1.634,1.255,3.283,2.467,4.944,3.642
c-7.879,44.286-12.985,82.462,20.587,108.797c14.67,11.508,14.879,26.695,13.026,36.371l0.001,0.001c0,0-0.003,0.013-0.004,0.016
c-0.184,0.955-0.385,1.854-0.597,2.693c-0.966,5.529-1.74,18.075,9.446,23.64c40.519,20.232,78.311,32.438,112.429,36.285
c7.953,0.896,15.716,1.345,23.274,1.345c20.531,0,39.559-3.303,56.785-9.876c40.912-15.611,57.352-44.237,58.03-45.448
l0.744-1.327l0.317-1.487c0.152-0.725,15.465-73.358,23.056-160.48C388.154,255.291,380.134,168.114,354.042,114.151z
M248.891,303.698c6.754,9.494-4.791,29.513-19.494,44.285l-16.273-49.644C230.014,293.332,241.792,293.719,248.891,303.698z
M177.412,312.146c5.984-2.572,11.603-4.947,16.874-7.062l18.635,56.846c-10.413,7.494-21.912,13.598-33.819,17.972L160.43,319.32
C166.126,316.995,171.795,314.562,177.412,312.146z M99.111,334.094c4.716-0.013,9.706-0.329,14.994-1.019
c9.128-1.189,18.352-3.61,27.571-6.701l18.177,58.981c-1.118,0.224-2.236,0.451-3.354,0.643
c-14.154,2.41-28.124,2.141-41.612-0.716L99.111,334.094z"/>
</g>
</g>
</svg>
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