Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <label class="egg-switch">
    <input type="checkbox" checked>
    <div>
        <div class="flipper">
            <svg>
                <use xlink:href="#flipper">
            </svg>
        </div>
        <div class="egg">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
</label>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 18" id="flipper" fill="currentColor">
        <path d="M0.0244740693,1.75473835 C0.00818305726,1.86197078 0,1.97036486 0,2.07892575 L0,15.921377 C0,17.0693688 0.8954305,18 2,18 C2.10445462,18 2.20874874,17.9914953 2.31192515,17.9745638 L17.3119251,15.5130366 C18.2840292,15.3535125 19,14.4826852 19,13.4598497 L19,12.6377416 C19.6666667,11.5984301 20.3333333,11.0787744 21,11.0787744 L39,11.0787744 L39,6.92152835 L21,6.92152835 C20.3333333,6.92152835 19.6666667,6.4018726 19,5.36256109 L19,4.540453 C19,3.51761755 18.2840292,2.64679022 17.3119251,2.48726617 L2.31192515,0.0257389154 C1.2208723,-0.153304839 0.196745571,0.620794577 0.0244740693,1.75473835 Z M12.2049236,12.279252 C12.6185695,12.2575737 12.9714694,12.5753263 12.9931477,12.9889722 C13.0130194,13.3681476 12.747675,13.6962795 12.3847003,13.7650328 L12.2834275,13.7771963 L3.79507644,14.2220519 C3.38143055,14.2437302 3.02853059,13.9259776 3.00685233,13.5123317 C2.98698059,13.1331563 3.25232501,12.8050244 3.61529975,12.7362711 L3.71657251,12.7241076 L12.2049236,12.279252 Z M16.75,5 C16.8683467,5 16.9674868,5.08223341 16.9933973,5.19267729 L17,5.25 L17,12.75 C17,12.8880712 16.8880712,13 16.75,13 C16.6316533,13 16.5325132,12.9177666 16.5066027,12.8073227 L16.5,12.75 L16.5,5.25 C16.5,5.11192881 16.6119288,5 16.75,5 Z M13.7339356,9.6630893 C14.1480861,9.65586028 14.4896817,9.9857353 14.4971398,10.3998858 C14.5035373,10.7795237 14.2269029,11.0981954 13.8617498,11.1542391 L13.7601142,11.1628608 L3.26171343,11.3461111 C2.84756295,11.3533401 2.50596738,11.0234651 2.49850922,10.6093146 C2.49211175,10.2296767 2.76874618,9.91100505 3.13389925,9.85496129 L3.23553482,9.84633957 L13.7339356,9.6630893 Z M3.26171343,6.6630893 L13.7601142,6.84633957 C14.1742647,6.8535686 14.5041397,7.19516417 14.4971402,7.60931465 C14.4902841,7.98895258 14.2026967,8.29777572 13.8358102,8.34104168 L13.7339356,8.34611112 L3.23553482,8.16286085 C2.82138434,8.15563182 2.49150933,7.81403625 2.49850889,7.39988577 C2.50536496,7.02024784 2.79295235,6.7114247 3.15983888,6.66815874 L3.26171343,6.6630893 Z M3.79507644,3.77925197 L12.2834275,4.2241076 C12.6970734,4.24578586 13.0148259,4.59868582 12.9931477,5.01233171 C12.9732759,5.39150712 12.675086,5.69010548 12.306913,5.72054092 L12.2049236,5.7220519 L3.71657251,5.27719627 C3.30292661,5.25551801 2.98517406,4.90261805 3.00685233,4.48897215 C3.02672407,4.10979675 3.32491404,3.81119839 3.69308704,3.78076294 L3.79507644,3.77925197 Z"></path>
    </symbol>
</svg>

<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/9934807-Egg-Switch" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
              
            
!

CSS

              
                .egg-switch {
    --background: #171827;
    --shadow: rgba(246, 248, 255, .08);
    --shadow-inner: rgba(13, 15, 24, .8);
    --egg: #fff;
    --egg-back: #f4d2ad;
    --egg-yellow: linear-gradient(135deg, rgba(239,202,51, 1) 50%, rgba(237,139,2, 1) 100%);
    --egg-shadow: rgba(13, 15, 24, .25);
    --flipper: #F6F8FF;
    --flipper-hand: #8A91B4;
    --flipper-shadow: #646B8C;
    perspective: 160px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    input {
        display: none;
        & + div {
            width: 64px;
            height: 32px;
            border-radius: 16px;
            position: relative;
            background: var(--background);
            box-shadow: inset 0 1px 3px 0 var(--shadow-inner), 0 1px 0 0 var(--shadow);
            .egg {
                position: absolute;
                left: 4px;
                top: 4px;
                z-index: 1;
                animation: egg 2s linear forwards;
                transform-style: preserve-3d;
                .front:before,
                .front:after,
                .back:before,
                .back:after {
                    content: '';
                }
                .front:before,
                .front:after,
                .back:before,
                .back:after,
                .back {
                    position: absolute;
                    border-radius: var(--border-radius, 50%);
                    width: var(--width, var(--size, 24px));
                    height: var(--height, var(--size, 24px));
                    left: var(--left, var(--spacing, 0));
                    top: var(--top, var(--spacing, 0));
                    background: var(--background, var(--egg));
                }
                .front {
                    width: 24px;
                    height: 24px;
                    transform: rotateY(180deg);
                    backface-visibility: hidden;
                    &:before {
                        --background: var(--egg);
                    }
                    &:after {
                        --size: 12px;
                        --spacing: 6px;
                        --background: var(--egg-yellow);
                        transform: translateZ(0);
                        box-shadow: 1px 1px 3px var(--egg-shadow);
                    }
                }
                .back {
                    --background: none;
                    &:before,
                    &:after {
                        --height: 14px;
                        --background: var(--egg-back);
                    }
                    &:before {
                        --border-radius: 12px 12px 0 0;
                        clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
                    }
                    &:after {
                        --border-radius: 0 0 12px 12px;
                        --top: 10px;
                        clip-path: polygon(0 0, 25% 20%, 50% 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);
                    }
                }
            }
            .flipper {
                position: absolute;
                display: flex;
                align-items: center;
                top: 7px;
                left: 100%;
                opacity: 0;
                transform-origin: 20px 50%;
                transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(.8);
                animation: flipper 2s linear;
                &:after {
                    content: '';
                    width: 20px;
                    height: 6px;
                    border-radius: 2px 1px 1px 2px;
                    display: block;
                    background: var(--flipper-hand);
                    box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
                }
                svg {
                    width: 39px;
                    height: 18px;
                    display: block;
                    color: var(--flipper);
                }
            }
        }
        &:checked {
            & + div {
                .flipper {
                    animation: none;
                }
                .egg {
                    animation: crack 2s linear forwards;
                    .front {
                        &:before {
                            animation: egg-white .8s linear forwards 1.4s;
                        }
                    }
                    .back {
                        &:before,
                        &:after {
                            --animate-y: -16px;
                            transform: translateZ(-2px);
                            animation: egg-crack .8s linear forwards 1.4s;
                        }
                        &:after {
                            --animate-y: 16px;
                        }
                    }
                }
            }
        }
    }
}

@keyframes egg {
    0%,
    40% {
        transform: rotateY(180deg) translateX(-32px);
    }
    50% {
        transform: rotateY(180deg) translateX(-33px);
    }
    75% {
        transform: translateZ(32px);
    }
    90% {
        transform: scaleX(.9);
    }
    100% {
        transform: scaleX(.8);
    }
}

@keyframes egg-white {
    0% {
        opacity: .4;
        transform: scale(.4);
    }
    60%,
    100% {
        transform: scale(1);
    }
    100% {
        opacity: 1;
    }
}

@keyframes egg-crack {
    0% {
        transform: translateZ(-2px);
    }
    70% {
        transform: translateZ(-2px) scale(.8) rotate(4deg) translateY(var(--animate-y));
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateZ(-2px) scale(.8) rotate(8deg) translateY(calc(var(--animate-y) * 1.5));
    }
}

@keyframes crack {
    0% {
        transform: rotateY(180deg) scaleX(.8);
    }
    30% {
        transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) translateZ(-24px) scaleX(.8);
    }
    40% {
        transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) scaleX(.8);
    }
    60%,
    80% {
        transform: rotateY(180deg) translateX(-32px) scaleX(.8);
    }
    100% {
        transform: rotateY(180deg) translateX(-32px);
    }
}

@keyframes flipper {
    30% {
        transform: translateX(-4px);
    }
    40% {
        transform: translateX(-16px);
    }
    50% {
        transform: translateX(-24px);
    }
    60% {
        transform: translateX(-32px) rotateY(50deg) translateZ(16px);
    }
    70% {
        transform: translateX(14px);
    }
    85%,
    100% {
        transform: translateX(60px);
    }
    15%,
    80% {
        opacity: 1;
    }
    95%,
    100% {
        opacity: 0;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// dribbble & twitter
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2B3044;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            width: 76px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 112px;
        bottom: 14px;
        svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
    }
}
              
            
!

JS

              
                // Some issues with Safari & mobile - damn 3D - any suggestions?
              
            
!
999px

Console