cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!-- Nothing here needed for app  -->
<span>
<p><b><i>Apple Watch style Mickey Mouse clock</i></b></p>
 <sup>
<p>Style 2: Thin case with date window</p>
</sup> 
</span>
<br>
            
          
!
            
              /* Nothing here needed for app */

body{
    background-color:#99ccff;
    text-align: center;
}
sup{
    font-size: 55%;
}
span{
    display:inline-block;
    position:relative;
    margin:10px;
    padding:4px;
    width:700px;
    line-height: 18px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
    background-color:#ee0000;
    border-radius:5px;
    font: 26px verdana;
    color: #fff; 
    text-align: center;
}
p {
    margin: 5px;
}

ul {
    padding-left:10px; 
    list-style:none;
    list-style-type: none;
}

li {
    text-align:left;
    padding-top:5px;
}
            
          
!
            
              (function () {

    /*
    Apple Watch style Mickey Mouse Clock

    Style 2: Thin case with date window
    
    Static in Internet Explorer re poor SVG support!

    kurt.grigg@yahoo.co.uk
    */

    /* ^^^^^^^^^^^^^^ Config below ^^^^^^^^^^^^^^ */

    var clockSize = 250;
    var caseColour = 'rgb(230,205,107)';
    var dialColour = 'rgb(0,0,0)';
    var digitColour = 'rgb(255,255,255)';
    var caseShadow = 'rgba(0,0,0,0.5)';

    /* ^^^^^^^^^^^^^^^^ End config ^^^^^^^^^^^^^^ */

    var d = document;
    var rnd = 'id'+Math.random() * 1;
    var idx = d.getElementsByTagName('div').length;
    d.write('<div id = "'+rnd+'" style="display:inline-block;line-height:0px;"></div>');
    var dum = '';
    var mhBez = '.975s cubic-bezier(0.405,0,0.570,1)';
    var sBez = '.8s cubic-bezier(0.405,0,0.570,1)';
    var vBox = '<svg xmlns="http://www.w3.org/2000/svg" width="'+xy(100)+'" height="'+xy(100)+'" viewBox="0 0 200 200">';    
    var mls = 100;
    var then = performance.now();
    var secThen, minThen, sincr, mincr, hincr;
    var dgts = [];
    var degr = 0;
    var nums = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
    var radi = Math.PI / 180;
    var syncFoot = 0;
    var cnt = -1;
    var tmr;
    var bcnt = 0;  
    var ecnt = -1;
    var etmr = null;
    var isItMoz = ('MozUserSelect' in d.body.style);
    var mozAdj = (isItMoz)?'50%':'0%';

    function iniTime() {
        var now = new Date();
        sincr = now.getSeconds();
        mincr = now.getMinutes();
        hincr = now.getHours();
    }
    iniTime();
    mincr--;
    sincr--;

    function xy(v) {
        return (v * clockSize / 100);
    }

    function bodyAni() {
        var bodyFrames = '@keyframes bodyJig {'
        +'0%   {transform: rotateX(-16deg) skew(-1deg,0deg);}'
        +'50%  {transform: rotateX(12deg) skew(1deg,0deg);}'
        +'100% {transform: rotateX(-16deg) skew(-1deg,0deg);}}';  
        var bodyGenFrames = document.createElement( 'style' );
        bodyGenFrames.innerHTML = bodyFrames;
        d.getElementsByTagName('head')[0].appendChild(bodyGenFrames);
    }

    function headAni() {
        var headFrames = '@keyframes headJig {'
        +'0%   {transform: rotateX(-14deg) skew(-1deg,0deg);}'
        +'50%  {transform: rotateX(12deg) skew(1deg,.5deg);}'
        +'100% {transform: rotateX(-14deg) skew(-1deg,0deg);}}';  
        var headGenFrames = document.createElement( 'style' );
        headGenFrames.innerHTML = headFrames;
        d.getElementsByTagName('head')[0].appendChild(headGenFrames);
    }

    function tailAni() {
        var frames = '@keyframes swing {'
        +'0%   {transform:rotate(-30deg); animation-timing-function: ease-in-out;}'
        +'50%  {transform:rotate(30deg); animation-timing-function: ease-in-out;}'
        +'100%  {transform:rotate(-30deg); }}';  
        var genFrames = d.createElement( 'style' );
        genFrames.innerHTML = frames;
        d.getElementsByTagName('head')[0].appendChild(genFrames);
    }

    var MickeyTail = '<path d="M100.168 192.708c15.69-24.815-19.94-51.486-.627-79.54l5.047.007c-20.69 27.666 13.324 55.474-4.08 79.953-.5.64-.92.592-.34-.42z"/>';

    var MickeyHourHand = '<path d="M100.713 57.474l6.73-.556s4.79 14.61 4.052 22.047c-.732 7.388-8.247 20.69-8.247 20.69-1.39 2.273-2.896 4.122-5.884.486 0 0 7.248-13.318 7.84-20.66.604-7.463-4.49-22.006-4.49-22.006z" fill-rule="evenodd"/><path d="M95.947 40.97c-3.19.827-4.874 4.503-4.39 7.442.297 3.53 2.507 7.17 6.032 8.212 2.907 5.698 12.15 1.136 12.248-3.06 2.248-1.524 2.76-4.372 2.32-6.7 2.766-2.56 1.925-8.893-2.42-8.147-1.32-2.87-4.19-3.085-5.575-2.75.094-3.48.382-8.35-1.726-11.337-1.054-1.63-3.505-1.632-4.527-.298-2.71 3.538.195 10.155-1.963 16.637z" fill-rule="evenodd"/><path d="M96.88 41.8c-1.09-.065-2.165.34-3.216 1.806-4.322 5.32 1.992 16.706 10.578 11.2-1.512 1.395-3.16 2.7-5.6 2.177 1.54 3.062 9.328 1.55 10.334-2.9-.718.26-1.483.456-2.023.3 2.665-1.568 5.277-2.005 4.533-6.954-1.068.435-1.983.228-2.755-.58-.76.215-1.082.627-2.488.31-.22.282-.653.684-1.11 1.025 1.675 1.83 2.62-.21 3.51-.846-.5 2.458-2.39 2.998-4.357 1.31-1.647.704-4.458.488-7.02-2.333 1.82.798 6.144 3.928 8.665-.132 1.69-4.3-2.647-2.644-4.778-3.07-1.443-.373-2.87-1.232-4.273-1.315zm12.94-2.408c.694 2.69.33 4.88-.566 6.82 3.757 3.3 5.775-7.64.566-6.82zm-5.556-2.453l-.422 5.377c2.054-.065 4.104.498 2.91 4.155 2.577.61 2.705-3.362 2.578-5.643-.14-2.52-1.877-4.617-5.066-3.89zM99.428 24.11c-3.012.597-1.673 8.17-1.938 12.295-.1 1.565-.257 3.138-.71 4.545 1.728-.29 1.983 1.238 6.267 1.363.396-3.362.42-6.886.504-10.81.062-2.82-.973-7.925-4.122-7.393z" fill="#f9f9f9" fill-rule="evenodd"/></g>';

    var MickeyBody = '<path d="M124.494 141.873c.557-3.02.64-5.74.184-8.633 3.284-1.53 9.732-6.788 12.06-12.45 1.63-4.378-.64-3.053-2.574-4.864-.006-10.77-2.622-19.648-12.362-22.912-4.16-3.274-8.842-6.027-15.067-7.237-4.358 3.05-12.606 7.41-12.606 7.41.366-.23 2.344 4.862-.55 9.147-7.248 6.956-4.055 17.474-.28 22.326-3.66 3.784-2.43 5.6.89 7.855-.01.548-9.33 10.217-12.338 12.882-.205 3.678.043 7.077 5.958 6.99 5.263-4.932 9.5-10.788 13.53-16.112 4.54-.003 11.754 1.95 11.928-2.16.224-1.526 1.857-1.635 2.29-.12.147 1.683 1.372.434 1.952 1.116.793 1.325-1.833 9.395-2.743 10.51 3.25.994 5.798-.063 8.41-1.138.54-.55.223-2.228 1.317-2.61z"/><path d="M101.983 135.192c3.105.507 10.554 1.05 9.12.17-.503-.312-5.104-1.97-6.703-3.505zm10.714-2.465c.092-.138.91-.53 2.065-.748 4.51-.843 8.56-2.884 11.693-4.242-.002.092-.46.51-1.015.93-3.14 1.9-5.704 2.832-8.985 3.975-.01.493-.023.985-.034 1.478 5.64.782 12.59-4.195 15.994-8.115 2.065-2.444 4.52-7.037 4.078-7.788-1.01-.603-2.094-.584-3.33-1.898.724-8.183-1.833-19.426-10.312-22.206-.714-.16-.833.028-1.22 1.91-4.662 13.753-19.785 13.418-28.213 7.91-7.192 9.736-.732 17.49.925 20.692-.898.528-1.617 1.883-2.01 2.525-1.846 1.743.376 3.307 2.648 4.602l2.945-3.68c-.16-.304-2.666-1.186-4.38-1.375 4.345-.44 7.954 2.206 10.397 3.878 3.672 2.41 6.57 3.97 7.605 4.095 1.186-.364 1.045-1.107 1.15-1.943z" fill="#bd0303" fill-rule="evenodd"/><path d="M128.434 115.89c.89-.852 1.137-2.546.68-4.697-.563-2.66-2.008-4.965-3.492-5.57-.756-.31-.884-.314-1.413-.055-1.588.776-1.685 4.33-.204 7.437 1.306 2.74 3.252 4.01 4.428 2.885zm-9.29 6.12c.873-.425 1.475-1.675 1.61-3.337.32-4-2.235-8.365-4.936-8.426-2.788-.062-3.735 4.575-1.758 8.608 1.34 2.733 3.37 3.994 5.085 3.156z" fill="#f2f2f2" stroke="#000" stroke-width=".8"/><path d="M154.73 161.765c-7.19 7.343-16.268 7.426-24.78 5.627l-9.375-2.02c-.725 3.414-13.214-.97-14.334-3.964-.693-1.055.02-4.134.776-4.994-.71-3.378-.952-6.866 4.79-9.85 1.223-1.738 1.974-2.357 4.03-3.033-1.702 4.07 10.512.217 6.698-1.53 6.31-2.083 8.21 2.532 7.005 4.49 4.29-3.362 8.187-5.692 15.817-4.564 11.708 2.56 10.274 10.77 8.953 14.185 1.258 1.204 1.8 4.064.42 5.655z"/><path d="M153.856 157.297c1.128.79.96 2.623.133 3.4-6.504 6.102-13.834 7.38-22.765 5.75 7.96-.583 15.808-1.02 22.63-9.15zm-45.992.224c4.776 5.132 8.125 5.956 11.596 7.288-1.186 2.636-11.448-2.18-12.055-3.886-.63-.956-.226-2.622.46-3.4zm16.384-15.054c4.053 2.643-9.828 7.36-8.988 2.42-6.075 2.173 2.99 7.646 5.363 6.923-1.384.954-5.278.984-8.25-4.057-5.762 2.19-5.307 7.995-2.893 10.34 11.027 10.706 34.972 8.984 42.515-.42 3.45-4.302 3.57-13.023-7.68-14.868-9.378-1.386-13.538 4.246-19.09 8.008 1.296-1.66 3.427-3.17 3.68-5.162.248-1.966-1.663-4.202-4.657-3.184z" fill="#fc0" fill-rule="evenodd"/><circle id="shoulder" cx="100" cy="100" r=".5" fill="none" />';

    var MickeyHead = '<path fill="none" d="M51.328 26.755h108.754v145.343H51.328z"/><path d="M86.418 29.082c-7.248.198-12.963 6.233-12.766 13.48.19 6.806 5.55 12.338 12.346 12.74-2.933 2.947-5.57 6.175-7.063 9.383-2.038-5.107-7.043-8.403-12.54-8.258-7.248.197-12.963 6.232-12.766 13.48.197 7.248 6.232 12.963 13.48 12.766 4.28-.12 8.232-2.318 10.59-5.89.645 2.43 1.472 5.006 2.672 7.185 2.138 3.807 5.15 6.675 9.705 9.245 9.578 5.566 18.985 2.238 24.992-3.57 7.393-.94 14.876-5.51 16.186-14.834-.072-1.188-.05-1.267.58-2.133 1.333-1.834 1.875-3.862 1.524-5.705-.48-2.515-1.958-3.828-3.85-3.42-1.306.282-2.788 2.013-3.62 4.227l-.382 1.013c-1.123-.08-2.218-.285-3.408.013-.063-.003-.268-.616-.455-1.363-1.606-6.41-6.145-11.904-12.166-14.723-3.273-1.532-5.855-2.096-9.865-2.155l-2.696-.04c2.003-2.44 3.06-5.52 2.978-8.677-.197-7.247-6.232-12.963-13.48-12.766z" fill-rule="evenodd"/><path d="M101.68 90.32c-1.062-1.323-1.17-2.16-.442-2.63 1.193-.77 5.774 1.148 4.57 2.833-1.4 1.96-7.304 1.924-9.79-.44-2.08-1.98-5.47-9.506 1.445-4.283 1.712 1.292 3.134 3.208 4.22 4.52z" fill="#cc0000" fill-rule="evenodd"/><path d="M90.17 73.976c-.715.046-1.68.027-1.828.642.99 2.887 3.98 6.542 7.34 8.915 5.423 3.83 10.64 5.55 15.663 5.165 6.177-.474 10.588-1.903 13.692-4.434 3.175-3.145 5.247-6.332 5.087-10.518-4.218.647-4.697-1.102-4.84-3.874-1.995-.732-6.14.295-8.268 3.2-.953 1.3-1.632.982-.865-.05 1.08-1.785 2.482-3.16 4.388-3.866-.51-5.35-3.837-10.366-7.324-12.575-1.397-.858-.438 1.82-.78 1.293-18.862-13.723-20.21 2.764-13.272 15.805-4.903-5.566-19.787-8.843-19.67 3.482.57 7.213 6.35 12.636 11.762 15.08 1.416.638-.368-1.815-.007-2.2 2.05 7.133 15.988 5.194 21.59.154l.82-.814-1.76.16c-1.53.137-1.86.226-2.54.686-2.813 1.908-7.163 2.92-10.197 2.373-1.25-.226-2.907-.97-3.828-1.717-1.576-1.278-2.924-3.78-4.077-7.563-.407-1.34-1.01-2.816-1.57-3.837-.5-.914-1.144-2.29-1.432-3.058-.29-.768-.593-1.47-.677-1.558-.44-.222-1.214.327-1.928.755 1.075-1.116 2.647-1.99 4.522-1.646z" fill="#f9f9f9"/>';

    /* Mickey Eyes*/

    var e1 = '<rect fill="none" width="108.75352" height="145.34349" x="51.327602" y="29.755001"/><path d="M116.525 72.374c.72-.983 1.615-1.758 2.562-2.324.478-2.73-.424-6.517-1.904-8.725-1.063-1.527-2.163-1.522-2.853.012-.2.442-.403 1.222-.455 1.733-.048.477-.063.717.022.92l2.354 2.027-1.616 2.144c.482 1.76.894 2.738 1.89 4.214zm-7.333-13.895c-.67.018-1.296.678-1.55 1.633-.33 1.23-.45 3.233-.217 3.635l3.1 2.756-2.18 2c-.124.348.61 2.457 1.307 3.755.603 1.12 1.518 2.18 2.063 2.382.623.233.984.16 1.41-.292 1.727-1.823.864-9.433-1.55-13.682-.67-1.178-1.79-2.205-2.383-2.19z"/>';
    var e2 = '<rect fill="none" width="108.75352" height="145.34349" x="51.327602" y="29.755001"/><path d="M113.058 63.068c-.587-.078-1.176-.15-1.767-.215-.505-.058-1.012-.117-1.524-.164-1.23-.117-2.13-.156-3.366-.246l.983.114c-.014.546.008 1.014.104 1.18l3.1 2.756-2.18 1.998c-.087.245.26 1.362.71 2.45l-1.143.346c1.353-.332 1.815-.398 3.15-.763.99-.25 1.968-.512 2.93-.8l.36-.13-.355.064c-.272-2.33-.66-4.588-1.343-6.57zm.872.174c-.013.226-.026.605.03.736l2.353 2.03-1.617 2.142c.098.36.246.926.344 1.23l-.24.103.286-.056c1.653-.486 3.302-1.14 4.7-1.806l-.538.17c-.07-1.242-.327-2.536-.723-3.732l.717.096c-1.968-.442-3.87-.762-5.6-1.007z"/>';
    var e3 = '<rect fill="none" width="108.75352" height="145.34349" x="51.327602" y="29.755001"/><path d="M109.034 66.622c1.683-.18 3.362-.328 5.036-.438m1.36-.08c1.272-.07 2.543-.113 3.81-.13" fill="#fc0" fill-rule="evenodd" stroke="#000" stroke-width=".2" stroke-linecap="round"/>';
    var ea = [e1,e2,e3,e2,e1];

    function blnk(){ 
        var tmp = d.getElementById('peepers');
        ecnt++;        
        tmp.innerHTML = ea[ecnt]; 
        etmr = setTimeout(blnk,60);
        if (ecnt > 4) {
            clearTimeout(etmr);
            ecnt = 0;tmp.innerHTML = ea[0]; 
        }
    }

    var f1 = '<path d="M48.207 162.868c7.103 8.125 16.706 8.812 25.84 7.498l10.06-1.485c.532 3.606 14.052-.138 15.443-3.183.806-1.053.263-4.31-.477-5.254.98-3.496 1.34-8.04-4.183-9.446-.65-2.888-2.07-3.85-4.268-4.56.848 4.927-10.75-1.974-6.678-1.832-6.536-2.586-9.17 1.89-8.028 4.01-4.31-3.786-8.274-6.47-16.428-5.8-12.567 1.895-11.613 10.544-10.45 14.19-1.414 1.17-2.184 4.114-.83 5.863z"/><path d="M49.552 158.52c-1.248.746-1.196 2.668-.374 3.53 6.463 6.79 14.133 8.605 23.698 7.496-8.384-1.133-16.66-2.106-23.324-11.027zm48.662 3.268c-5.407 5.03-9.01 5.67-12.774 6.827 1.074 2.825 12.267-1.516 13.026-3.253.73-.955.42-2.717-.252-3.574zm-15.72-16.465c-1.704.92 6.68 6.683 9.74 2.963 4.407 2.815-2.708 7.086-4.848 6.14 2.475 1.338 4.888-.718 7.308-2.362 3.004.7 6.407 2.94 2.346 9.695-11.966 11.18-40.27 7.04-45.544-2.728-3.356-4.71-2.884-13.804 9.15-14.983 10.02-.827 14.037 5.316 19.653 9.603-1.258-1.815-3.41-3.53-3.54-5.622-.127-2.064 2.636-3.965 5.735-2.707z" fill="#fc0">';

    var f2 = '<path d="M46.916 155.42c5.577 8.724 14.93 10.984 24.174 11.187l11.504.252c-.11 3.443 12.575 2.154 14.485-.455.98-.85 1.018-3.97.454-4.972 1.283-3.096 2.104-7.27-1.97-9.478-.133-2.795-1.856-3.92-3.9-4.94-3.5 2.03-7.407-2.657-6.267-2.793-5.992-3.47-8.558.518-7.805 2.676-3.587-4.227-7.847-7.618-16.01-8.318-12.734-.28-13.318 7.93-12.812 11.516-1.602.86-2.88 3.476-1.854 5.325z"/><path d="M49.01 151.59c-1.363.493-1.65 2.29-.992 3.23 5.18 7.37 12.43 10.31 22.062 10.833-8.072-2.42-16.07-4.672-21.07-14.064zm47.44 10.957c-6.223 3.806-8.492 3.568-12.41 4.035.56 2.805 10.973.828 12.028-.666.89-.77.893-2.462.382-3.37zm-12.608-17.892c-.395.506 3.024 5.03 8.17 3.737 2.577 2.093 3.033 3.24 2.172 4.755-1.18 2.077-4.517 1.78-7.12.78 3.97 2.358 6.12 1.107 8.613-.105 1.637 1.46 2.68 2.076.442 7.93-13.78 8.468-41.802.587-45.283-9.37-2.48-4.93-.412-13.324 11.67-12.466 9.68.962 12.68 6.837 18.52 11.483 1.62 1.287-3.427-3.535-2.252-5.32.238-1.943 2.23-3.1 5.067-1.425z" fill="#fc0">';

    var f3 = '<path d="M50.05 140.723c-5.17.228-4.74 1.805.437 8.488 5.183 6.656 12.798 13.955 21.453 13.06 1.81.695 5.85 1.212 7.758 1.61.586 1.3.007 2.337 1.587 2.646 4.17 2.25 11.484 2.91 10.938-2.164 3.803-1.878 5.11-6.197 2.88-11.765.71-5.966-4.534-5.382-6.724-7.64-2.65-2.732-8.057-7.366-8.902-2.266-5.754-8.45-23.554-17.447-29.427-1.967z" fill-rule="evenodd"/><path d="M49.56 142.147c-1.812-.653-2.09.66-1.844 1.382 5.2 7.383 13.504 18.098 23.184 17.497-8.148-3.13-16.498-10.86-21.34-18.88zm41.775 22.678l-9.903-1.27-.17 1.3c3.3 1.49 9.436 4.007 10.073-.03zm-10.68-18.047c-2.008-3.74-3.22-6.05-5.893-8.065-8.818-6.648-20.162-8.94-24.3 2.915 6.4 9.817 14.294 16.362 23.2 19.73 5.01 1.13 11.463 1.85 17.506 2.444 6.395-3.785 3.294-7.87 3.224-10.62-1.586.306-4.16.89-5.9-.512 9.298 1.184 4.894-4.424 2.792-5.09-1.683-.536-4.1-2.324-5.97-4.41-1.612-1.8-3.85-2.25-4.77-1.238-1.21 1.335 1.134 4.227.112 4.846z" fill="#fc0"/>';

    var f4 = '<path d="M51.405 136.018c-3.113.64-3.457 1.665-2.23 3.79 6.033 7.29 13.87 16.845 21.472 20.625 2.395 1.136 3.97 1.772 6.32.793.934.376 2.47.984 3.474 1.257.516.9.67 2.096 1.034 3.022 3.814 2.793 11.886 5.15 8.748-1.45 6.983-3.224 3.242-8.304 3.466-10.42 2.81-4.307-8.853-16.93-12.772-12.32-7.122-10.114-23.98-20.398-29.51-5.297z"/><path d="M51.823 137.738c-1.738-.894-2.405.105-2.254.877 7.11 7.34 17 21.482 26.453 22.177-7.088-3.05-13.882-11.58-24.2-23.054zM89.16 164.77l-7.592-2.08.54 2.202c3.205 1.948 10.313 4.55 7.053-.12zm-7.37-18.804c-1.522-4.087-3.762-6.46-6.186-8.858-7.994-7.91-17.647-12.562-23.418-.902 10.053 11.285 17.058 20.61 22.682 22.837 4.9 1.777 7.88 3.303 13.893 4.658 6.3-2.845 4.985-5.054 4.093-8.955-.967-.216-2.614-2.366-4.252-3.983 11.03 10.708.212-12.72-6.86-8.455-1.4 1.22 1.164 3.15.05 3.66z" fill="#fc0"/>';

    var f5 = '<path d="M52.97 130.952c-4.032.877-4.7 3.92-3.62 6.4 1.915 5.28 5.266 7.975 8.315 11.48 3.33 3.65 7.84 7.348 10.638 7.272 1.66 1.235 6.017 3.296 7.148 3.248-.36.754-.77 1.19-.593 1.823 1.672 3.59 13.576 9.436 12.98 2.668 4.534-3.103 4.388-8.24 3.37-11.26 2.298-5.428-5.327-14.692-9.98-12.338-10.43-15.426-22.58-18.656-28.256-9.293z"/><path d="M67.176 154.84c-9.593-10.16-10.093-15.473-17.258-21.116l-.37 1.993c1.542 3.97 3.914 7.524 7.036 10.705 3.7 3.704 7.464 7.75 10.592 8.417zm11.942 6.57l-.832 2.067-2.74-2.14.666-1.477zm-25.653-28.894c-1.557-1.183-2.5.155-2.487.94 7.554 5.155 13.428 21.393 23.154 24.417-6.395-4.76-12.14-17.634-20.667-25.357zm33.144 31.918l-6.678-2.543-.742 1.743c2.514 2.015 8.47 3.916 7.42.8zm-4.71-19.548c-.784-4.286-3.69-6.62-5.73-9.352-6.617-8.865-17.61-12.903-22.486-3.797 9.6 7.4 11.862 18.032 23 27.096 3.166 1.705 6.278 2.733 10.31 4.422 6.41-5.367 4.37-10.357-.258-14.38 8.4 8.425 3.556-8.29-4.392-8.335-1.595.956.743 4.04-.445 4.346z" fill="#fc0"/>';

    var f6 = '<path d="M55.617 126.54c-2.056-.153-3.775.758-4.09 2.51-2.593 2.312-.93 7.713.407 10.593 3.387 9.482 10.928 17.27 19.888 21.554.242.774.238 1.14.057 1.938 3.075 3.82 9.446 5.718 13.69 3.15.27-.448.39-1.48.386-2.028 3.736-1.712 5.945-6.033 3.36-11.363 4.668-4.205-4.267-13.935-7.576-12.55-3.573-8.963-17.532-25.257-26.122-13.805z"/><path d="M78.104 163.537l-4.546-.148c2.84 2.627 6.013 4.007 8.945 3.032zm-.745-3.32c-6.028-5.7-8.256-7.254-10.888-11.7l-7.86-13.273c-1.72-3.046-6.413-8.487-7.347-3.113-.51 2.9 3.36 12.436 6.687 16.034C59.42 151.646 70.495 159.51 72.478 160c.818.204 3.972-.102 4.88.218zm.285.77l-.047 1.58-4.846.047.25-1.83zm-24.8-32.076c6.983 1.074 9.95 15.804 20.553 26.216-1.407-1.31-8.425-14.538-13.162-22.976-2.563-4.565-7.01-5.99-7.39-3.24zm32.1 35.652l-6.244-3.568-.113 1.85c2.22 1.52 7.005 4.864 6.358 1.718zm-3.038-19.29c-.24-4.36-2.806-7.04-4.47-10.01-5.404-9.64-15.39-16.277-21.306-7.83 8.04 3.468 10.56 19.948 22.635 32.304 2.9 2.09 2.85 1.625 6.6 3.807 6.845-3.98 4.79-7.916.8-13.704 6.7 7.625 3.994-7.818-3.802-8.834-1.685.753.75 4.108-.456 4.266z" fill="#fc0"/>';

    var f7 = '<path d="M58.41 123.642c-1.953-.516-3.668.02-4.108 1.592-3.36.81-4.143 8.132-3.007 11.167 2.304 10.327 9.54 18.067 17.78 23.595l.804.663c-2.488 4.5 6.784 10.35 13.983 5.422.293-.368.49-1.305.53-1.817 3.707-.914 6.163-4.533 4.117-9.964 4.797-3.065-2.965-13.745-6.237-13.06-2.7-8.99-14.74-26.693-23.863-17.598z"/><path d="M76.947 162.164l-6.388.515c2.068 4.697 8.426 4.743 11.512 3.545zm-.447-3.224c-5.305-6.4-7.31-8.253-9.47-12.87l-6.453-13.782c-1.4-3.148-6.438-8.736-7.76-3.905-1.76 1.754-.374 12.798 3.878 17.864 3.39 4.466 7.326 9.61 13.39 13.535zm.212.767l-.17 1.464-5.788.642.222-1.328zm-21.14-34.362c6.587 2.27 9.316 17.504 18.617 29.123-1.24-1.476-6.837-16.638-11.814-24.764-2.677-4.37-5.078-5.997-6.804-4.36zm27.83 38.69l-5.682-4.13-.256 1.702c2 1.818 6.306 5.473 5.938 2.427zm-1.363-18.177c.12-4.1-2.12-7.063-3.475-10.13-4.394-9.952-13.408-17.946-19.735-11.16 7.9 3.483 9.498 18.053 19.052 34.18l6.498 4.414c6.383-3.66 4.266-8.487 1.117-14.088 4.5 8.593 5.42-3.82-2.682-7.103-1.67.395.388 3.96-.776 3.888z" fill="#fc0"/>';

    var f8 = '<path d="M62.042 121.892c-2.317-.66-5.008.153-6.064 2.07-4.662 2.466-4.355 9.274-4.302 13.924.12 9.612 7.714 17.108 15.03 22.732l-.262 2.213c3.734 4.622 11.47 7.985 15.092 3.878 1.286-.384 2.348-1.98 2.39-2.57 4.055-1.544 4.74-6.687 4.167-9.09 4.038-3.758.098-11.29-5.506-13.524-2.6-9.25-8.4-25.062-20.545-19.632z"/><path d="M77.544 161.137l-8.83 1.8c2.264 3.93 9.836 6.3 12.363 2.702zm-.052-3.21c-5.14-6.156-6.21-8.207-7.788-13.14l-4.49-14.045c-.93-3.748-8.21-9.036-10.47-3.988-2.064 1.826-2.933 13.587-.26 18.142.574 3.69 10.623 13.723 12.45 14.683.755.395 9.743-2.183 10.558-1.653zm.09.95l-.516 1.283-9.398 2.203-.04-1.686zM57.55 123.922c5.5.53 7.4 3.247 8.99 8.074 2.45 7.456 5.012 16.596 7.286 19.522-.394-.566-1.9-5.405-3.42-10.797-1.26-4.475-2.41-9.285-3.998-12.763-2.155-4.724-7.796-6.57-8.858-4.036zm25.054 39.888L78.47 159l-.426 1.375c1.805 2 4.41 6.6 4.56 3.433zm-.997-17.645c-.312-4.183-.75-8.12-1.897-10.67-4.24-9.447-8.84-16.076-16.583-12.852 7.637 4.654 6.358 16.94 13.353 31.82 2.365 2.713 5.02 5.785 7.136 8.797 5.37-2.827 3.94-7.383 1.776-12.09 4.686 8.944 5.147-5.346-2.27-8.245-1.846.303-.29 3.39-1.515 3.24z" fill="#fc0"/>';

    var f9 = '<path d="M62.61 121.975c-2.216-.662-4.79.152-5.8 2.07-4.462 2.466-4.168 9.273-4.118 13.923.116 9.612 7.382 17.11 14.383 22.732l-.252 2.213c3.572 4.62 10.974 7.984 14.44 3.877 1.23-.384 2.247-1.98 2.286-2.57 3.88-1.544 4.535-6.686 3.987-9.09 3.864-3.758.094-11.29-5.268-13.523-2.49-9.252-8.04-25.063-19.66-19.632z"/><path d="M77.69 161.3l-8.57 1.72c2.165 3.928 8.958 6.422 11.375 2.824zm-.173-3.085c-4.92-6.157-6.065-8.412-7.575-13.347l-4.296-14.044c-.89-3.748-7.855-9.036-10.02-3.988-1.973 1.827-2.805 13.588-.247 18.142.548 3.69 10.69 15.28 12.652 14.93zm.21.746l-.66 1.53-9.114 1.873.496-1.275zm-19.414-34.957c5.263.528 7.08 3.246 8.6 8.073 2.347 7.456 4.797 16.596 6.973 19.522-.377-.566-1.818-5.404-3.27-10.796-1.207-4.475-2.31-9.285-3.828-12.763-2.062-4.725-7.46-6.572-8.475-4.037zm23.93 39.93l-3.667-5.138-.654 1.662c1.727 2 4.18 6.64 4.322 3.475zm-.624-17.852c-.3-4.182-1.007-7.955-2.103-10.506-4.06-9.446-8.46-16.074-15.868-12.85 7.306 4.652 6.083 16.937 12.775 31.82 2.263 2.712 4.804 5.784 6.83 8.795 5.136-2.828 3.975-7.753 1.903-12.46 3.736 7.914 4.688-5.02-2.377-7.876-1.765.303.01 3.225-1.16 3.077z" fill="#fc0"/>';

    var ar = [f1,f2,f3,f4,f5,f6,f7,f8,f9,f9,f8,f7,f6,f5,f4,f3,f2,f1];

    function tap(){ 
        cnt++;        
        d.getElementById('tooties').innerHTML = ar[cnt]; 
        tmr = setTimeout(tap,40);

        if (cnt > 16) {
            clearTimeout(tmr);
            cnt = -1;
        }
    }

    var mh1 = '<path d="M113.75 26.6c-1.223-1.284-2.33-1.793-3.77-2.023-1.515-2.64-4.095-3.412-6.567-3.254-.1-1.8-.038-4.616.083-6.308-.093-4.426-3.99-3.827-6.195-1.273-2.32 3.017-1.634 5.944-1.277 8.883.25 1.88.344 3.67.33 5.583-.032 1.374-.254 2.94-.646 3.983-.877-.737-1.96-1.46-2.878-1.967-3.457-1.474-6.006-.63-7.744 2.5-.866 1.84.18 3.006 1.68 3.747 1.704.765 3.33.912 4.933 1.275 2.3 1.473 3.206 3.163 4.985 4.867-.603 1.76.492 3.364 1.83 4.168.693.404 1.833.73 3.22.92 1.764.25 2.762.208 4.394.028 2.354-.276 3.994-1.91 3.553-4.082 2.492-2.472 4.38-5.537 5.057-8.296.515-2.916.81-5.8-.99-8.75z"/><path d="M97.538 14.96c-1.43 1.976-.923 4.87-.65 6.806.36 3.024.436 4.013.432 5.617-.004 1.61-.127 2.746-.437 4.016-.168.69-.508 1.682-.633 1.85-.58.257-.716-.01-1.066-.235-.39-.317-1.064-.814-1.474-1.087-3.2-2.805-6.932-1.57-8.044 1.367-.583 1.54 1.054 2.25 2.005 2.588.94.365 2.268.69 3.55.863.513.07.71.137 1.117.38 2.203 1.577 3.41 3.503 5.54 5.17 4.416 2.37 10.113 2.608 13.315-1.57 2.415-3.754 3.604-6.998 2.96-10.467-.328-2.67-1.664-4.494-3.932-4.625.15 1 .314 2.006.542 2.988-.79-.89-1.19-2.26-1.527-3.186-.785-2.8-3.406-3.457-5.82-3.073.01 2.032.23 4.032.74 5.8-.992-1.476-1.525-3.35-1.662-4.762-.16-2.733-.055-5.818.104-8.045.364-4.148-3.766-2.804-5.056-.397zm8.673 19.636c-.053.748-.145 1.357-.246 2.168-.155 1.684-.525 3.168-.918 4.542-.55.204-.72-.047-.795-.383.388-1.75.676-3.643.843-5.004.185-1.53.19-1.555.353-1.676.593-.267.803.305.766.35zm-3.755 2.398c.015 1.21.003 2.63-.083 3.617-.102.836-.886.584-.96-.117.13-1.655-.136-3.3.234-4.34.832-.053.72.293.81.842zm6.865-.367c-.407 1.67-1.175 3.456-1.856 4.693-.463.11-.866-.177-.773-.52.29-1.073 1.39-2.916 1.793-4.486.514-.334.74.07.837.313zm-11.836 6.646c-1.49 4.5 12.353 5.66 11.456.84-3.83 1.06-8.034 1.128-11.456-.84z" fill="#fff"/><circle id="wrist" cx="102.5" cy="45" r=".1" fill="none" /><circle id="elbow" cx="110" cy="78" r=".5" fill="none" />';

    var mh2 = '<path d="M110.07 35.553c-5.27-8.254-.82-18.358-6.45-20.887-2.247-4.417-5.422-3.074-6.418.55-2.008 1.386-3.846 7.574-4.678 10.776-1.843 7.696.03 10.438 1.425 12.613-3.883 5.79 6.87 11.812 10.017 7.01 4.1-.763 4.445-2.2 6.542-2.55 3.825.962 6.928 5.676 8.66 2.06 3.2-6.693-3.278-10.146-9.1-9.572z"/><path d="M118.555 39.59c-1.642-2.957-6.374-4.128-8.863-3.045-5.71-8.278-1.644-18.992-6.078-21.023.954 3.24-.393 6.03-.064 13.974-2.045-3.376 2.014-15.406-2.76-16.887-1.18-.367-2.916 1.492-2.688 2.665 3.525 1.067 4.463 7.274.188 12.786 1.177-3.694 3.254-5.567 1.635-10.417-1.753-2.997-2.928-1.364-3.404-.328-2.115 4.096-2.56 7.086-3.305 9.867-1.234 4.598-1.09 8.364 3.745 14.37-.914-.374-2.01-1.835-2.514-2.44-2.795 4.683 6.555 9.862 8.72 6.148-.86-.107-1.697-.23-2.146-.67 4.44.933 6.503-.87 8.94-2.393 2.766-1.03 8.166 7.727 9.13.29.142-1.1-.076-2.067-.535-2.896zm-15.404-3.81c1.36 2.853-.192 5.7-.186 5.128.05-4.967.003-4.513-3.885-9.73-.51-.68 2.94 2.226 4.07 4.603z" fill="#fff"/><circle id="wrist" cx="97.5" cy="45" r=".1" fill="none" /><circle id="elbow" cx="90" cy="78" r=".5" fill="none" />';

    var MickeyMinuteHand = [mh1,mh2];

    /* Clock dial and case etc */

    var outerRim = d.createElement('div');
    outerRim.setAttribute('style', 'display:inline-block;'
        +'position: relative;'
        +'height: '+xy(116)+'px;'
        +'width: '+xy(116)+'px;'
        +'background-color: '+caseColour+';'
        +'border-radius: 50%;'
        +'box-shadow: inset -'+xy(0.5)+'px -'+xy(0.5)+'px '+xy(1.2)+'px -'+xy(0.7)+'px rgba(0,0,0,0.9),'
        +'inset '+xy(0.5)+'px '+xy(0.5)+'px '+xy(1.2)+'px -'+xy(0.2)+'px rgba(255,255,255,0.4),'
        +' '+xy(4)+'px '+xy(4)+'px '+xy(5)+'px -'+xy(1)+'px '+caseShadow+';'
        +'overflow: hidden;');
    d.getElementById(rnd).appendChild(outerRim);

    var shine = '<svg id="shn'+idx+'" xmlns="http://www.w3.org/2000/svg"'+ 
        'viewBox="0 0 200 200" width="100%" height="100%">'+
        '<defs>'+
        '<filter id="blur" color-interpolation-filters="sRGB">'+
        '<feFlood result="flood" flood-color="#fff" flood-opacity="1"/>'+
        '<feComposite result="composite1" operator="in" in2="SourceGraphic" in="flood"/>'+
        '<feGaussianBlur result="blur" stdDeviation="0.15" in="composite1"/>'+
        '<feOffset result="offset" dy="1" dx="0"/>'+
        '<feComposite result="composite2" operator="atop" in2="offset" in="offset"/>'+
        '</filter>'+
        '</defs>'+
        '<g transform="translate(2.6,1.5)" filter="url(#blur)">'+
         '<path fill="#fff" d="M 25.29439,28.704127 C 11.980013,42.659887 2.6767873,60.453438 0,79.99824 6.4643264,45.022412 31.776599,14.993444 65.504601,3.8936567 69.662254,2.3217769 77.023949,0.560584 79.50959,0 58.514565,3.0100943 39.604309,13.680346 25.29439,28.704127 Z"/>'+
        '</g></svg>';
    outerRim.innerHTML = shine;

    var centreRim = d.createElement('div');
    centreRim.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'margin: auto; top: 0; bottom: 0; left: 0; right: 0;'
        +'height: '+xy(110)+'px;'
        +'width: '+xy(110)+'px;'
        +'background-color: transparent;'
        +'border-radius: 50%;'
        +'box-shadow: -'+xy(0.5)+'px -'+xy(0.5)+'px '+xy(0.8)+'px 0 rgba(0,0,0,0.6), '
        +' '+xy(0.5)+'px '+xy(0.5)+'px '+xy(0.5)+'px -'+xy(0.4)+'px rgba(255,255,255,0.9);'
        +'overflow: hidden;');
    outerRim.appendChild(centreRim);

    var innerRim = d.createElement('div');
    innerRim.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(110)+'px;'
        +'width: '+xy(110)+'px;'
        +'background-color: '+dialColour+';'
        +'background-image: radial-gradient(ellipse farthest-corner at center, rgba(255,255,255,0.9) 2%, transparent 70%);'
        +'margin: auto; top: 0;bottom: 0;left: 0;right: 0;' 
        +'box-shadow: inset 0 0 0 '+xy(1.5)+'px rgba(0,0,0,0.4),'
        +'inset '+xy(5)+'px '+xy(5)+'px '+xy(5)+'px '+xy(1.0)+'px rgba(0,0,0,0.2),'
        +'0 0 '+xy(1.5)+'px '+xy(0.3)+'px rgba(220,220,220,0.2);'
        +'border-radius: 50%;');
    outerRim.appendChild(innerRim);

    var dial = d.createElement('div');
    dial.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(100)+'px;'
        +'width: '+xy(100)+'px;'
        +'margin: auto; top: 0; bottom: 0;left: 0;right: 0;' 
        +'border-radius: 50%;');
    innerRim.appendChild(dial);

    /* Date window */

    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var n = new Date();
    dy = days[n.getDay()];
    dt = n.getDate();

    var cntnr = d.createElement('div');
    cntnr.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(6)+'px;'
        +'width: '+xy(15)+'px;'
        +'margin: auto; top: 0; bottom: 0;' 
        +'left: '+xy(70)+'px;'
        +'border:'+xy(0.1)+'px solid '+digitColour+';'
        +'background:#fff;'
        +'font: '+xy(3.8)+'px tahoma,sans-serif;'
        +'color: #444;'
        +'line-height: '+xy(6)+'px;'
        +'box-shadow: inset '+xy(.7)+'px '+xy(.7)+'px '+xy(.7)+'px 0 rgba(0,0,0,0.8);'
        +'padding:0;');
    dial.appendChild(cntnr);

    var day = d.createElement('div');
    day.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(5.5)+'px;'
        +'width: '+xy(8.1)+'px;'
        +'top: '+xy(.5)+'px;'
        +'left: '+xy(1)+'px;'
        +'border-right: .2px solid #555;'
        +'padding:0;');
    cntnr.appendChild(day);
    day.appendChild(d.createTextNode(dy));

    var date = d.createElement('div');
    date.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(5.5)+'px;'
        +'width: '+xy(5)+'px;'
        +'top: '+xy(.5)+'px;'
        +'left: '+xy(9.5)+'px;'
        +'padding:0;');
    cntnr.appendChild(date);
    date.appendChild(d.createTextNode(dt));

    /* Clock markers  */

    for (var i = 0; i < 12; i++) {
        var spac = (i > 8) ? xy(2.0) : 0;
        var ofst = (spac) ? xy(3.0) : 0;
        dgts[i] = d.createElement('div');
        dgts[i].setAttribute('style', 'display: block;'
            +'position: absolute;'
            +'width: '+xy(15)+'px;'
            +'height: '+xy(15)+'px;padding:0;'
            +'margin: auto;top: 0;bottom: 0; right: 0;left: 0;'
            +'text-indent: -'+ofst+'px;'
            +'text-shadow: '+xy(0.8)+'px '+xy(0.8)+'px 1px '+caseShadow+';'
            +'text-align: center;'
            +'font: bold '+xy(15)+'px arial,sans-serif;'
            +'letter-spacing:-'+spac+'px;'
            +'line-height: '+xy(15)+'px;'
            +'color: '+digitColour+';');
        dgts[i].innerHTML = nums[i];
        dial.appendChild(dgts[i]);
        degr += 30;
        dgts[i].style.top = xy(0) + xy(86) * Math.sin(-(60 * radi) + (360/12) * i * radi) + 'px';
        dgts[i].style.left= xy(0) + xy(86) * Math.cos(-(60 * radi) + (360/12) * i * radi) + 'px';
    }

    /* Generic containers */

    var containers = 'display: block;'
        +'position: absolute;'
        +'height: 100%;'
        +'width: 100%;'
        +'font-size: 0px; line-height: 0px; padding: 0;'
        +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;'
        +'overflow:hidden;transform-origin: center center;'

    /* Seconds (tail) */

    var secContainer = d.createElement('div');
    secContainer.setAttribute('style',containers + 'transform-origin: 50% 90%;animation: bodyJig 1s ease-in-out infinite reverse;animation-delay:.3s;');
    secContainer.style.zIndex = 48;
    dial.appendChild(secContainer);
    var secHand = d.createElement('div');
    var secsvg =  vBox + '<g style="transform-origin: 50% '+mozAdj+';animation: swing 2s infinite reverse;animation-delay:.3s;">'+MickeyTail+'</g></svg>';
    secHand.innerHTML = secsvg;
    secContainer.appendChild(secHand);

    /* Hour hand */

    var houContainer = d.createElement('div');
    houContainer.setAttribute('style', containers);
    houContainer.style.zIndex = 50;
    dial.appendChild(houContainer);
    var houHand = d.createElement('div');
    var housvg = vBox + '<g style="transform-origin: 50% 0%;animation: bodyJig 2s ease-in-out infinite reverse;animation-delay:.3s;">'+MickeyHourHand+'</g></svg>';
    houHand.innerHTML = housvg;
    houContainer.appendChild(houHand);

    /* Mickey body */

    var bodyContainer = d.createElement('div');
    bodyContainer.setAttribute('style',containers+'');
    bodyContainer.style.zIndex = 52;
    dial.appendChild(bodyContainer);
    var bdiv = d.createElement('div');
    var bdy =  vBox + '<g style="transform-origin: 50% 90%;animation: bodyJig 1s ease-in-out infinite;animation-delay:.3s;">'+ MickeyBody+'</g></svg>';
    bdiv.innerHTML = bdy;
    bodyContainer.appendChild(bdiv);

    /* Mozilla hack. getBoundingClientRect() in Mozilla 'still' can't read SVG positions altered by CSS transforms. */

    var shoulderContainer = d.createElement('div');
    shoulderContainer.setAttribute('style',containers+'transform-origin: 50% 90%;animation: bodyJig 1s ease-in-out infinite;animation-delay:.3s;');
    dial.appendChild(shoulderContainer);
    var mozShoulder = d.createElement('div');
    mozShoulder.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(0.1)+'px;'
        +'width: '+xy(0.1)+'px;'
        +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;');
    shoulderContainer.appendChild(mozShoulder);

    /* Mickey Head */

    var headContainer = d.createElement('div');
    headContainer.setAttribute('style',containers+'');
    headContainer.style.zIndex = 54;
    dial.appendChild(headContainer);
    var hdiv = d.createElement('div');
    var hd =  vBox + '<g style="transform-origin: 5% 90%;animation: headJig 1s ease-in-out infinite;animation-delay:.3s;">'+MickeyHead+'</g></svg>';
    hdiv.innerHTML = hd;
    headContainer.appendChild(hdiv);

    /* Mickey Eyes */

    var eyeContainer = d.createElement('div');
    eyeContainer.setAttribute('style',containers+'');
    eyeContainer.style.zIndex = 56;
    dial.appendChild(eyeContainer);
    var ediv = d.createElement('div');
    var ed =  vBox + '<g id="peepers" style="transform-origin: 5% 90%;animation: headJig 1s ease-in-out infinite;animation-delay:.3s;">'+ea[0]+'</g></svg>';
    ediv.innerHTML = ed;
    eyeContainer.appendChild(ediv);

    /* Mickey Foot */

    var footContainer = d.createElement('div');
    footContainer.setAttribute('style',containers+'');
    footContainer.style.zIndex = 58;
    var svgFoot = vBox + '<g id="tooties" style="transform-origin: 50% 90%;animation: bodyJig 1s ease-in-out infinite;animation-delay:.3s;">'+f1+'</g></svg>';
    footContainer.innerHTML = svgFoot;
    dial.appendChild(footContainer);

    /* Mickey Arm */

    var armContainer = d.createElement('div');
    armContainer.setAttribute('style',containers);
    armContainer.style.zIndex = 59;

    /* Mickey Hand */

    var minContainer = d.createElement('div');
    minContainer.setAttribute('style',containers + 'transition: '+mhBez+';');
    minContainer.style.zIndex = 60;
    dial.appendChild(minContainer);
    var minHand = d.createElement('div');
    var minsvg =  vBox + '<g style="transform-origin: 50% 10%;animation: headJig 1s ease-in-out infinite reverse;animation-delay:.3s;">'+MickeyMinuteHand[0]+'</g></svg>';
    minHand.innerHTML = minsvg;
    minContainer.appendChild(minHand);

    /* Clock glass */

    var glass = d.createElement('div');
    glass.setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'height: '+xy(110)+'px;'
        +'width: '+xy(110)+'px;'
        +'margin: auto; top: 0; bottom: 0; left: 0;right: 0;'
  	+'border-radius:50%;'
  	+'box-shadow: inset 0 0 '+xy(1)+'px '+xy(1)+'px rgba(0,0,0,0.1),'
        +'inset 0 -'+xy(20)+'px '+xy(50)+'px rgba(0,0,0,0.5);'
        +'transform: rotate(-45deg);'
        +'z-index: 62;');

    var shine = d.createElement('div');
    shine.setAttribute('style', 'display: block;'
	+'position: absolute;'
        +'margin: auto;'
        +'top: 2%;'
        +'left: 0; right: 0;'
	+'border-radius:50%;'
	+'width: 74%;'
	+'height: 54%;'
	+'background-image: linear-gradient(to bottom, rgba(250, 250, 255, 1) 2%, '
        +'rgba(250, 250, 255, 0.7) 30%, transparent 100%);'
	+'z-index: 64;');
    glass.appendChild(shine);
    innerRim.appendChild(glass);

    function rot(e, d) {
        return e.style.transform = 'rotate(' + d + 'deg) translateZ(0)';
    }

    function minHandSwap(a, e, w) {
        var hand;
        minsvg = '';
        if (a == 0) {
            if (e) {
                hand = MickeyMinuteHand[1];
            }
            else {
                hand = MickeyMinuteHand[0];
            }   
        }
        if (a == 180) {
            if (w) {
                hand = MickeyMinuteHand[1];
            }
            else {
                hand = MickeyMinuteHand[0];
            }   
        }
        minsvg =  vBox + '<g style="transform-origin: 50% 10%;animation: headJig 1s ease-in-out infinite reverse;animation-delay:.3s;">'+hand+'</g></svg>';
        minHand.innerHTML = minsvg;
        minContainer.appendChild(minHand);
    }

    function armAni() {
        var tmp = (isItMoz)?mozShoulder:shoulder;
        var m = dial.getBoundingClientRect(),
        a = tmp.getBoundingClientRect(),
        b = wrist.getBoundingClientRect(),
        c = elbow.getBoundingClientRect(),
        pos = {};
        pos.ay = a.top - m.top,
        pos.ax = a.left - m.left,
        pos.by = b.top - m.top,
        pos.bx = b.left - m.left,
        pos.cy = c.top - m.top,
        pos.cx = c.left - m.left;
        var s = pos.ax+','+pos.ay;
        var e = pos.bx+','+pos.by;
        var cu = pos.cx+','+pos.cy;
        var armSvg =  '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">'
        +'<path d="M'+s+' Q'+cu+' '+e+'" '
        +'fill="none" stroke="#000" stroke-linecap="round" stroke-width="'+xy(3.5)+'"/></svg>';
        armContainer.innerHTML = armSvg;
        dial.appendChild(armContainer);
        setTimeout(armAni,30);  
    }

    function ew(adj) {
        var r = "rotateY("+adj+"deg)";
        secContainer.style.transform = r;
        bodyContainer.style.transform = r;
        houHand.style.transform = r;
        headContainer.style.transform = r;
        minHand.style.transform = r;
        secHand.style.transform = r;
        footContainer.style.transform = r;
        eyeContainer.style.transform = r;
        shoulderContainer.style.transform = r;
    }

    function MickeyClock() {
        var tm = new Date();
        var secNow = tm.getSeconds();
        var minNow = tm.getMinutes();
        var houNow = tm.getHours();
        var hours = (houNow * 30) + (minNow / 2);
        if (houNow > 11) {
            houNow -= 12;
        }
        var adj = (houNow >= 0 && houNow <= 5)?0:180;
        var minEadj = (minNow > 37 && minNow < 55);
        var minWadj = (minNow > 4 && minNow < 23);

        if (secNow !== secThen) {
            sincr++;
            syncFoot++;
            bcnt++;
            if (syncFoot > 1) {
                tap();
            }
            if (bcnt == 5) {
                blnk();
            }
        }
        if (bcnt > 5) {
            bcnt = 0;
        }
        if (minNow !== minThen) {
            mincr++;
            ew(adj);
            minHandSwap(adj, minEadj, minWadj);
        }
        secThen = secNow;
        minThen = minNow;
        rot(minContainer, mincr * 6);
        rot(houContainer, hours);
    }

    function draw() {
        var now = performance.now(); 
        if ((now - then) > (mls)) {
            MickeyClock();
            then = performance.now();
        }
        window.requestAnimationFrame(draw);
        if (syncFoot == 2) {
            headAni();
            bodyAni();
            tailAni();
        }
    } 
    armAni();
    window.addEventListener("load", draw, false);
    window.addEventListener("focus", iniTime, false);
})();
            
          
!
999px
Loading ..................

Console