A Bandeira do Brasil

dabblet.css

/**
 * A Bandeira do Brasil
 */

body { margin: 0 }
html { background: #111111 }

.brasil {
    /* Adjust for larger/smaller flag */
    font-size: 20px;
    width: 15em;
    height: 8em;
    margin: 2em auto;
    position: relative;
    background-color: #008303;
    box-shadow: 0 .5em 2em rgba(0, 0, 0, .5);
    background-image:
        linear-gradient( -65deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)  1em),
        linear-gradient(  15deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) .5em),
        linear-gradient(  65deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 20%),
        linear-gradient(-145deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 35%);
}

.brasil::before {
    left: 5em;
    width: 5em;
    top: 1.5em;
    z-index: 2;
    content: "";
    height: 5em;
    display: block;
    position: absolute;
    background: #020288;
    border-radius: 100%;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,.2) 20%, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)), radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(white, white, rgba(0,0,0,0)),
        radial-gradient(#020288 58%, white 58%, white 65%, #020288 65%);
    background-size: 
        100% 100%, 
        .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, 
        .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, 
        .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, 
        .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, .12em .12em, 
        10em 10em;
    background-position: 
        0 0, 
        8.73% 40.87%, 65.48% 34.52%, 13.49% 61.51%, 17.46% 58.33%, 30.95% 51.19%, 7.14% 65.87%,
        23.81% 66.27%, 21.43% 71.43%, 29.76% 76.59%, 49.60% 88.89%, 49.60% 71.83%, 46.83% 65.48%,
        44.44% 61.51%, 50.00% 57.54%, 55.56% 62.70%, 63.49% 47.62%, 60.71% 78.17%, 64.68% 82.54%,
        68.25% 78.57%, 74.21% 76.59%, 74.21% 81.75%, 74.21% 87.30%, 79.37% 78.17%, 83.33% 75.40%,
        86.51% 71.43%, 84.92% 67.06%, 91.67% 67.46%,
        -3.5em 1em;
    background-repeat: no-repeat;
}

.brasil::after {
    width: 7em;
    height: 7em;
    content: "";
    display: block;
    position: absolute;
    background-color: #FFFE03;
    transform: translateY(.5em) translateX(4em) rotate(-45deg) skew(20deg, 20deg);
    background-image: 
        linear-gradient(200deg, white, rgba(255,255,255,0) 1em),
        linear-gradient(-45deg, rgba(0,0,0,0), rgba(0,0,0,.2) 20%, rgba(0,0,0,0));
}

p {
    color: #CCC;
    text-align: center;
    font: 1em 'Segoe UI';
    position: relative;
    text-shadow: 0 .1em .2em black;
}

p::after {
    content: attr(data-en);
    text-align: center;
    text-shadow: 0 .1em .2em black;
    display: block;
    background-color: rgba(0,0,0,.5);
    background-image: linear-gradient(180deg, #000, transparent 40%);
    margin: 1em auto;
    padding: .5em;
    color: #666;
}

a {
    color: #FFFE03;
    transition: all .5s;
    text-decoration: none;
}

a:hover {
    color: #FFF;
}

dabblet.html

<div class="brasil"></div>
<p data-en="The Brazilian Flag">
    &ldquo;A Bandeira do Brasil&rdquo; by 
    <a href="http://twitter.com/jonathansampson">
        @jonathansampson
    </a>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}