Navigator

SVG, SwD

by Julien Etienne

HTML

<svg>
    <circle cx='500' cy='250' r='250' fill='rgba(60,30,230,0.1)' />
    <!-- Styling elements -->
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(0,255,255);
      stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
        </radialGradient>
    </defs>
    <use x="500" y="10" xlink:href="#tri-cortex" style="fill:blue;" />
</svg>
<div id='html' style='top: 0; position: absolute; display: none'>
    <p>Hello HTML</p>
</div>
<div id='restore-view'><u>Restore viewport</u>  <strong> X</strong>

</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #222 url(../visuals/hex.png) repeat;
}
html div:nth-child(2) {
    position: fixed;
    top: 0;
    left: 0;
    background: #c8e6ff;
    font-family: sans-serif;
    font-size: 1.3vmax;
    margin: 1em;
    padding: 0.4em 0.5em 0.4em 0.5em;
    border-radius: 0.3em;
    text-shadow: 1px 1px 1px white;
    line-height: 1em;
    display: none;
    cursor: pointer;
    z-index: 1000;
    letter-spacing: 0.2em;
}
p, text {
    font-size: 1em;
    font-family: times;
    line-height: 0;
}
#restore {
    font-size: 1px;
    fill: blue;
    cursor: pointer;
    display: none;
}
@-webkit-keyframes blinker {
    0% {
        background-color: rgba(240, 240, 255, 0.95);
    }
    50% {
        background-color: rgba(0, 255, 255, 0.6);
    }
    100% {
        background-color: rgba(240, 240, 255, 0.95);
    }
}
@keyframes blinker {
    0% {
        background-color: rgba(240, 240, 255, 0.95);
    }
    50% {
        background-color: rgba(0, 255, 255, 0.6);
    }
    100% {
        background-color: rgba(240, 240, 255, 0.95);
    }
}
div#restore-view.fade-in-restore-notification {
    display: block;
    -webkit-animation-name: blinker;
    animation-name: blinker;
    -webkit-animation-duration: 2.6s;
    animation-duration: 2.6s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
div#restore-view.fade-in-restore-notification:hover {
    text-shadow: 1px 1px 1px white;
}
div#restore-view.fade-in-restore-notification strong {
    margin-left: 0.3em;
}
::-moz-selection {
    background: #f5da55;
    color: #CC0000;
}
::selection {
    background: #f5da55;
    color: #CC0000;
}
::-moz-selection {
    background: #f5da55;
    color: #CC0000;
}
::selection {
    background: #f5da55;
    color: #CC0000;
}
.something {
    tansform: rotate(20deg);
    -webkit-backface-visibility:...

JavaScript

// A quick demo of a "navigator", 
//Code is not refacotred, don't slay me!
// http://codepen.io/undefined_/

var svg = document.getElementsByTagName('svg')[0],
    html = document.getElementById('html');


(function () {
    function removeElement(el) {
        el.innerHTML = '';
        el.parentNode.removeChild(el);
    }

    if (true) {
        removeElement(html);
    } else {
        removeElement(svg);
        html.style.display = 'block';
    }
}());
var ut = ut || {};

// Create element with name space
ut.createNS = function (type) {
    var namespace = 'http://www.w3.org/2000/svg';
    return document.createElementNS(namespace, type);
};

var attr = attr || {};
if (!Object.prototype.hasOwnProperty('attr')) {
    Object.prototype.attr = function (attrObj) {
        if (typeof attrObj == 'object') {
            var attributes;

            for (attributes in attrObj) {
                if (attributes === 'attr') {
                    ///
                } else {
                    this.setAttributeNS(null, attributes, attrObj[attributes]);
                }
            }
        } else if (typeof arguments[0] === 'string' && typeof arguments[1] === 'string' || 'number') {
            this.setAttributeNS(null, arguments[0], arguments[1]);
        } else {
            console.log('utilitiess "attr" error');
        }
        return this;
    };
}



// Escape
var
esc = esc || {

    viewBox: {
        x: 0,
        y: 0,
        width: 1000,
        height: 500
    },

    preserveAspectRatio: {
        align: 'xMidYMid',
        meetOrSlice: 'meet'
    },

    backgroundColor: 'rgba(17,47,61,0.8)'

};


// Grid
esc.grid = {

    development: 0,
    horizontal: 10,
    vertical: 20,
    coordinates: true
    // Need to add metric options 
};

var escape = escape || {};
var shuffle = shuffle || {};








escape = (function (esc, gridOptions) {

    // ViewBox Defaults
    esc.viewBox.x = esc.viewBox.x || 0;
    esc.viewBox.y = esc.viewBox.y || 0;
   ...