cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              <div id="doughnuts">
    <div class="doughnuts-out">
        <div class="ounch-logo-pieces piece-1 blue"></div>
        <div class="ounch-logo-pieces piece-2 blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
        <div class="ounch-logo-top-piece"></div>
    </div>
    <div class="doughnuts-mid">
        <div class="ounch-logo-pieces piece-1 blue"></div>
        <div class="ounch-logo-pieces piece-2 blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
    </div>
    <div class="doughnuts-in">
        <div class="ounch-logo-pieces piece-1  blue"></div>
        <div class="ounch-logo-pieces piece-2  blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
    </div>
</div>
<div id="labels">
    <div class="label blue" id="piece-1">Reflection</div>
    <div class="label blue" id="piece-2">Big-picture thinking</div>
    <div class="label blue" id="piece-3">Learning orientation</div>
    <div class="label blue" id="piece-4">Developing ideas</div>
    <div class="label green" id="piece-5">Competency-oriented</div>
    <div class="label green" id="piece-6">Consensus</div>
    <div class="label green" id="piece-7">Conflict resolution</div>
    <div class="label green" id="piece-8">Emotional intelligence</div>
    <div class="label green" id="piece-9">And another
        <br />fifth variable</div>
    <div class="label red" id="piece-10">Goal setting</div>
    <div class="label red" id="piece-11">Coordination</div>
    <div class="label red" id="piece-12">Pragmatic
        <br />approach</div>
    <div class="label red" id="piece-13">Pro-activity</div>
    <div class="label red" id="piece-14">Planning</div>
    <div class="label blue" id="piece-15">Critical and analytic thinking</div>
</div>
<div id="dialog" class="ui-corner-all" title="Category">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p id="caution">
        <img src="https://dl.dropboxusercontent.com/u/55179154/caution.png" /><span id="text">Contributed by 0 out of 7 members</span>
    </p>
</div>
            
          
!
            
              /* Doughnut layers */
 .doughnuts-out {
    margin: 150px;
    width: 500px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}
.doughnuts-mid {
    margin: 150px;
    width: 450px;
    height: 450px;
    position: absolute;
    left: 25px;
    top: 25px;
    background: #f0f0f0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}
.doughnuts-in {
    margin: 150px;
    width: 320px;
    height: 320px;
    position: absolute;
    left: 90px;
    top: 90px;
    background: #f0f0f0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}

/* Doughnut composition */
 .ounch-logo-pieces {
    position: absolute;
    top:0%;
    left: 50%;
    bottom:50%;
    right:0%;
    width: 50%;
    height: 50%;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    -moz-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    -ms-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
}
.ounch-logo-top-piece {
    background-image:url("https://dl.dropboxusercontent.com/u/55179154/TMlogo.png");
    background-position:45% 40%;
    position: absolute;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    -ms-border-radius: 100%;
    width:calc(50% - 4px);
    height: calc(50% - 4px);
    left:50%;
    top:50%;
    margin: -25% 0 0 -25%;
    z-index: 20;
    border: 4px solid #a6aac5;
}

/* Doughnut pieces */
 .piece-1 {
    z-index: 2;
}
.piece-2 {
    -webkit-transform: rotate(24deg);
    -moz-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
    z-index: 3;
}
.piece-3 {
    -webkit-transform: rotate(48deg);
    -moz-transform: rotate(48deg);
    -ms-transform: rotate(48deg);
    transform: rotate(48deg);
    z-index: 4;
}
.piece-4 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg);
    z-index: 5;
}
.piece-5 {
    -webkit-transform: rotate(96deg);
    -moz-transform: rotate(96deg);
    -ms-transform: rotate(96deg);
    transform: rotate(96deg);
    z-index: 6;
}
.piece-6 {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    z-index: 7;
}
.piece-7 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    transform: rotate(144deg);
    z-index: 8;
}
.piece-8 {
    -webkit-transform: rotate(168deg);
    -moz-transform: rotate(168deg);
    -ms-transform: rotate(168deg);
    transform: rotate(168deg);
    z-index: 9;
}
.piece-9 {
    -webkit-transform: rotate(192deg);
    -moz-transform: rotate(192deg);
    -ms-transform: rotate(192deg);
    transform: rotate(192deg);
    z-index: 10;
}
.piece-10 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    transform: rotate(216deg);
    z-index: 11;
}
.piece-11 {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
    z-index: 12;
}
.piece-12 {
    -webkit-transform: rotate(264deg);
    -moz-transform: rotate(264deg);
    -ms-transform: rotate(264deg);
    transform: rotate(264deg);
    z-index: 13;
}
.piece-13 {
    -webkit-transform: rotate(288deg) skewY(-24deg);
    -moz-transform: rotate(288deg) skewY(-24deg);
    -ms-transform: rotate(288deg) skewY(-24deg);
    transform: rotate(288deg) skewY(-24deg);
    z-index: 14;
}
.piece-14 {
    -webkit-transform: rotate(312deg) skewY(-55deg);
    -moz-transform: rotate(312deg) skewY(-55deg);
    -ms-transform: rotate(312deg) skewY(-55deg);
    transform: rotate(312deg) skewY(-55deg);
    z-index: 15;
}
.piece-15 {
    -webkit-transform: rotate(336deg) skewY(-66deg);
    -moz-transform: rotate(336deg) skewY(-66deg);
    -ms-transform: rotate(336deg) skewY(-66deg);
    transform: rotate(336deg) skewY(-66deg);
    z-index: 16;
}

/* Pieces colors */
.bluemid {
    background: #0081c8;
}
.bluein {
    background: #80c0e3;
}
.blueout {
    background: #015ca1;
}
.blue {
    color: #0081c8;
}
.redmid {
    background: #e53ba5;
}
.redin {
    background: #f29dd2;
}
.redout {
    background: #a02a85;
}
.red {
    color: #e53ba5;
}
.greenmid {
    background: #3ab300;
}
.greenin {
    background: #9dd980;
}
.greenout {
    background: #288000;
}
.green {
    color: #3ab300;
}
.empty {
    background: #ffd28a;
}
.grey {
    background: #edeef3;
}
.greyout {
    background: #f7f8fa;
}
.label {
    position: absolute;
    font-size: 20px;
}

/* Label positions */
 #piece-1 {
    top: 120px;
    left: 450px;
}
#piece-2 {
    top: 170px;
    left: 570px;
}
#piece-3 {
    top: 260px;
    left: 640px;
}
#piece-4 {
    top: 360px;
    left: 680px;
}
#piece-5 {
    top: 470px;
    left: 670px;
}
#piece-6 {
    top: 560px;
    left: 620px;
}
#piece-7 {
    top: 620px;
    left: 550px;
}
#piece-8 {
    top: 660px;
    left: 410px;
}
#piece-9 {
    top: 640px;
    left: 200px;
}
#piece-10 {
    top: 560px;
    left: 100px;
}
#piece-11 {
    top: 460px;
    left: 40px;
}
#piece-12 {
    top: 350px;
    left: 50px;
}
#piece-13 {
    top: 260px;
    left: 60px;
}
#piece-14 {
    top: 180px;
    left: 150px;
}
#piece-15 {
    top: 120px;
    left: 120px;
}

/* jQuery dialog */
 #dialog {
    display: none;
    position: relative;
}
.ui-dialog-title {
    padding-top: 20px;
    color: #e53ba5;
    font-size: 22px;
}
.ui-widget-content {
    font-size: 12px;
    padding-top: 0px;
    margin-top: 0px;
}
#dialog p {
    margin-top: 0px;
    color: #015ca1;
}
.ui-dialog {
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    -ms-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}
.ui-button-icon-primary {
    left: 0 !important;
    top: 0 !important;
}

/* Dialog content */
#caution {
    margin-top: 0;
    padding-top: 0;
}
#caution #text {
    font-weight: bold;
}
#caution img {
    vertical-align: middle;
}
            
          
!
            
              $(document).ready(function () {
    /* The data of our chart */
    var data = {
        1: 3,
        2: 1,
        3: 3,
        4: 2,
        5: 2,
        6: 1,
        7: 3,
        8: 1,
        9: 3,
        10: 2,
        11: 2,
        12: 3,
        13: 1,
        14: 2,
        15: 2
    };
    setDoughnut(data);

    /* Function that fills the doughtnut with our data */
    function setDoughnut(data) {
        for (key in data) {
            var piece = ".piece-" + key;

            var color;
            if (key < 5 || key >= 15) {
                color = "blue";
            } else if (key >= 5 && key < 10) {
                color = "green";
            } else {
                color = "red";
            }

            if (data[key] > 1) {
                $(".doughnuts-in").find(piece).addClass(color + "in");
                if (data[key] >= 2) {
                    $(".doughnuts-mid").find(piece).addClass(color + "mid");
                    if (data[key] == 3) {
                        $(".doughnuts-out").find(piece).addClass(color + "out");
                    } else {
                        $(".doughnuts-out").find(piece).addClass("grey");
                    }
                } else {
                    $(".doughnuts-mid").find(piece).addClass("grey");
                    $(".doughnuts-out").find(piece).addClass("greyout");
                }
            } else {
                $(".doughnuts-in").find(piece).addClass("empty");
                $(".doughnuts-mid").find(piece).addClass("grey");
                $(".doughnuts-out").find(piece).addClass("greyout");
            }
        }
    }

    /* Hovering a piece */
    $(".ounch-logo-pieces").hover(function () {
        var piece = $(this).attr('class').split(' ')[1];
        $("." + piece).darken(30);
    }, function () {
        var piece = $(this).attr('class').split(' ')[1];
        $("." + piece).darken(-44);
    });

    /* Clicking a piece */
    $('.ounch-logo-pieces').click(function () {
        var piece = $(this).attr('class').split(' ')[1];
        var title = $("#labels #" + piece).html();
        $('#dialog').dialog();
        $("#dialog").dialog( "option", "title", title);
        $("#dialog").dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header');
    });

    /* jQuery darkener */
    jQuery.fn.darken = function (darkenPercent) {
        $(this).each(function () {
            var rgb = $(this).css('background-color');
            rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
            var red = $.trim(rgb[0]);
            var green = $.trim(rgb[1]);
            var blue = $.trim(rgb[2]);

            // darken
            red = parseInt(red * (100 - darkenPercent) / 100);
            green = parseInt(green * (100 - darkenPercent) / 100);
            blue = parseInt(blue * (100 - darkenPercent) / 100);
            // lighten
            /* red = parseInt(red * (100 - darkenPercent) / 100);
		green = parseInt(green * (100 - darkenPercent) / 100);
		blue = parseInt(blue * (100 - darkenPercent) / 100); */

            rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

            $(this).css('background-color', rgb);
        });
        return this;
    }
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console