<?xml version="1.0" encoding="utf-8"?>
    <svg id="badge" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">

    <!-- Original pattern size: width: "26" & height: "23" -->
    <pattern  width="16.25" height="14.375" patternUnits="userSpaceOnUse" id="multi-dots" viewBox="12.5 -34 26 23" style="overflow:visible;">
        <g>
            <rect x="12.5" y="-34" width="26" height="23"/>
            <g>
                <circle class="color1" cx="45" cy="-7.5" r="7.5"/>
            </g>
            <g>
                <circle class="color1" cx="19" cy="-7.5" r="7.5"/>
                <circle class="color2" cx="29.5" cy="-10" r="7.5"/>
            </g>
            <g>
                <circle class="color3" cx="39.5" cy="-26" r="7.5"/>
                <circle class="color1" cx="45" cy="-30.5" r="7.5"/>
                <circle class="color4" cx="42.5" cy="-17" r="7.5"/>
            </g>
            <g>
                <circle class="color3" cx="13.5" cy="-26" r="7.5"/>
                <circle class="color1" cx="19" cy="-30.5" r="7.5"/>
                <circle class="color1" cx="33.5" cy="-16" r="7.5"/>
                <circle class="color2" cx="23.5" cy="-12" r="7.5"/>
                <circle class="color2" cx="29.5" cy="-33" r="7.5"/>
                <circle class="color4" cx="16.5" cy="-17" r="7.5"/>
                <circle class="color5" cx="37.5" cy="-26" r="7.5"/>
                <circle class="color3" cx="27.5" cy="-23" r="7.5"/>
            </g>
            <g>
                <circle class="color1" cx="7.5" cy="-16" r="7.5"/>
                <circle class="color5" cx="11.5" cy="-26" r="7.5"/>
            </g>
            <g>
                <circle class="color4" cx="42.5" cy="-40" r="7.5"/>
            </g>
            <g>
                <circle class="color1" cx="33.5" cy="-39" r="7.5"/>
                <circle class="color2" cx="23.5" cy="-35" r="7.5"/>
                <circle class="color4" cx="16.5" cy="-40" r="7.5"/>
            </g>
            <g>
                <circle class="color1" cx="7.5" cy="-39" r="7.5"/>
            </g>
        </g>
    </pattern>
    <g id="pattern">
        <circle class="color3" cx="103.5" cy="112.5" r="7.5"/>
        <circle class="color0" cx="109" cy="108" r="7.5"/>
        <circle class="color0" cx="123.5" cy="122.5" r="7.5"/>
        <circle class="color2" cx="113.5" cy="126.5" r="7.5"/>
        <circle class="color2" cx="119.5" cy="105.5" r="7.5"/>
        <circle class="color4" cx="106.5" cy="121.5" r="7.5"/>
        <circle class="color4" cx="127.5" cy="112.5" r="7.5"/>
        <circle class="color3" cx="117.5" cy="115.5" r="7.5"/>
    </g>
    <g id="circle">
        <circle class="circle" cx="128" cy="128" r="120"/>
    </g>
    <g id="batman">
        <path class="st6" d="M92.2 100.5c-3.4 13.7 24 16.9 24 16.9 6.7 2.2 5.8-12.3 5.8-12.3l2.6 6.7c.2-.7 3.4-1.1 3.4-1.1v64.8c-11.9-43.8-75.2-34.1-75.2-34.1 10.4-37.1-38-40.9-38-40.9m149 0c3.4 13.7-24 16.9-24 16.9-6.7 2.2-5.8-12.3-5.8-12.3l-2.6 6.7c-.2-.7-3.4-1.1-3.4-1.1v64.8c11.9-43.8 75.2-34.1 75.2-34.1-10.4-37.1 38-40.9 38-40.9"/>
        <path class="st6" d="M91.3 100.6C89 112 104.9 116 113.2 117.5c2.4.4 5.1 1.2 7.2-.6 2.9-2.6 2.8-8.4 2.6-12-.6.2-1.3.3-1.9.5.9 2.2 1.7 4.5 2.6 6.7.2.6 1.6 0 1.9-.3 2.2-2.1 1.5-.3 1.5 1.6v62.3c.6-.2 1.3-.3 1.9-.5-7.7-26.9-35.8-35.1-60.9-35.2-3.9 0-7.9.2-11.8.5-.5.1-2.4.6-2.9.3-1-.5.7 1.2.2-.4.1.3 1-2.6 1.1-2.8.2-1.1.4-2.2.5-3.3 1.2-12.3-5.6-22-16.2-27.6-7.1-3.8-15.4-6.1-23.4-6.8-.5 0-2.2.8-1.2.9 7.5.6 15.3 2.8 22 6.2 13.8 6.9 19.6 19.5 15.6 34.4-.1.4.6.3.8.3 28.1-4.2 65.6 2.7 74.4 33.9.2.6 1.9.1 1.9-.5v-64.8c0-.3-.7-.2-.8-.2-1.6.2-3.2.5-4.4 1.6.6-.1 1.2-.2 1.9-.3-.9-2.2-1.7-4.5-2.6-6.7-.2-.6-2-.1-1.9.5.2 2.9.4 7.4-1.3 10-1.7 2.5-4.9 1.4-7.5.8-7.6-1.6-21.2-5.5-19.1-15.8-.1-.4-2-.1-2.1.4z"/>
        <path class="st6" d="M162.8 100.8c2.1 10.5-11.8 14.2-19.6 15.7-2.7.5-5.3 1.2-7-1.5-1.6-2.6-1.5-7-1.3-10 0-.7-1.7-.2-1.9.3-.9 2.2-1.7 4.5-2.6 6.7.6-.2 1.2-.3 1.9-.5-1-.9-2.4-1.1-3.7-1.2-.4-.1-1.6.1-1.6.7v64.8c0 .5 1.8 0 1.9-.4 8.8-30.9 45.7-37.7 73.7-33.5.3 0 1.7-.2 1.6-.7-3.9-14.5 1.3-27 14.7-33.9 6.6-3.4 14.9-5.7 21.9-6.3.6-.1 2.1-1.1.8-1-8.2.7-16.6 3.1-23.9 6.8-13.7 7.1-19.5 19.8-15.5 34.8.5-.2 1-.5 1.6-.7-28.8-4.3-67.7 2.7-76.8 34.7.6-.1 1.3-.3 1.9-.4v-64.8c-.5.2-1 .5-1.6.7 1 .1 2.3.3 3.1 1 .4.4 1.7 0 1.9-.5.9-2.2 1.7-4.5 2.6-6.7-.6.1-1.3.2-1.9.3-.2 3.5-.5 9.6 2.6 12 2.1 1.7 5.9.4 8.3-.1 8.1-1.7 23.1-5.8 20.9-16.9-.2-.5-2.1 0-2 .6z"/>
    </g>
</svg>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #010D38;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}


/* Some colors */

.color0 {
    fill: none;
}
 .color1 {
    fill: #8EABE5;
}

.color2 {
    fill: #BCACF3;
}

.color3 {
    fill: #FAA9B2;
}

.color4 {
    fill: #F8FCA8;
}

.color5 {
    fill: #B5DFC8;
}

#badge {
    width: 50vh;
    max-height: 50vh;
}



.circle {
    fill: url(#multi-dots);
}

#batman {
    fill: #010D38;
}
var body=$("body"),
    badge=$("#badge"),
    color1=$(".color1"),
    color2=$(".color2"),
    color3=$(".color3"),
    color4=$(".color4"),
    color5=$(".color5");

TweenMax.set( badge, { transformStyle: 'preserve-3d'  });

body.mousemove(function(e) {

    // cursor axis
    var sxPos =  e.pageX / body.width()  * 100 - 50;
    var syPos =  e.pageY / body.height() * 100 - 50;


    // tilt the badge
    TweenMax.to( badge, 1, {
        rotationY: 0.25 * sxPos,
        rotationX: 0.20 * syPos,
        rotationZ: 0.10,
        transformPerspective:500,
        transformOrigin:'center center'
    });


    // If cursor goes right or top
    if (sxPos >= 0 || syPos >= 0) {
        var tl1 = new TimelineMax();

        tl1.to( color1, 0.3, {fill: "#8EABE5"})
            .to( color2, 0.3, {fill: "#BCACF3"}, 0.2)
            .to( color3, 0.3, { fill: "#FAA9B2"}, 0.15)
            .to( color4, 0.3, { fill: "#F8FCA8"}, 0.1)
            .to( color5, 0.3, { fill: "#B5DFC8"}, 0.1);
    }

    // If cursor goes left or bottom
    if (sxPos < 0 || syPos < 0)  {
        var tl2 = new TimelineMax();

        tl2.to( color1, 0.3, {fill: "#F8FCA8"})
            .to( color2, 0.3, {fill: "#8EABE5"}, 0.2)
            .to( color3, 0.3, { fill: "#B5DFC8"}, 0.15)
            .to( color4, 0.3, { fill: "#FAA9B2"}, 0.1)
            .to( color5, 0.3, { fill: "#BCACF3"}, 0.1);
    }
});



// RESSOURCES:

// Tilt effect by jim: https://codepen.io/jimthornton/pen/mErGgB

// Orginal badge: https://twitter.com/guyomtibor/status/873079434437197825
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js