<div class="wrapper">
    <div class="flower"></div>
</div>
$size: 10vmin;
$grad-size: $size / 3;

HTML, BODY {
    height: 100%;
    overflow: hidden;
}

BODY {
    background: hsl(0, 0, 4%);
    background-image: linear-gradient(hsl(0, 0, 6%) 1px, transparent 1px),
        linear-gradient(to right, hsl(0, 0, 6%) 1px, transparent 1px);
    background-size: $grad-size $grad-size;
    }

.range {
    /* display: none; */
    position: absolute;
    zind: 2px;
}

.wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: $size;
    height: $size;
    
    font-size: $size;
    
    transform: rotateX(-45deg);
    transform-style: preserve-3d;
}

.flower {
    width: $size;
    height: $size;
    animation: rotate-flower 10s linear infinite;  
    transform-style: preserve-3d;
    
    &:before {
        content: '';
        display: block;
        position: absolute;
        width: 95%;
        height: 95%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: hsl(100, 100%, 20%);
        border-radius: 50%;
        
        transform: rotateX(90deg);
        animation: rotate-hue 5s infinite;
    }
}

.petal {
    position: absolute;
    z-index: 20;
    bottom: 80%;      
    left: -$size;
    transform-style: preserve-3d;
    transform-origin: bottom;
    }

.box {
    width: $size * 3;
    
    transform-style: preserve-3d;
    transform-origin: bottom;
    animation: rotate-box 12s infinite;
}

$shape-size: .5em;

.shape {
    width: $shape-size;
    height: $shape-size;
    margin: auto;
    background: currentColor;
    box-shadow: 
        $shape-size 0 0 0,
        $shape-size * 2  0 0 0,
        -$shape-size * 2  0 0 0,
        -$shape-size 0 0 0;
    border-radius: 50%;

    animation: rotate-hue 5s infinite;
}

$closed-angle: 3.5deg;
$open-angle: -7deg;

@keyframes rotate-box {
    0% {
        transform: rotateX($closed-angle);
    }
    15% {
        transform: rotateX($closed-angle);
    }
    50% {
        transform: rotateX($open-angle);
    }
    80% {
        transform: rotateX($open-angle);
    }
    100% {
        transform: rotateX($closed-angle);
    }
}

@keyframes rotate-flower {
    100% {
        transform: rotateY( 360deg );        
    }
}

@keyframes rotate-hue {
    100% {
        filter: hue-rotate(360deg);
    }
}
View Compiled
console.clear();

var doc = document;
var flower = doc.querySelector('.flower');
var range = doc.querySelector('.range');

var petalPartMarkup = '<div class="box"> \
                    <div class="shape"></div> \
                </div>';

var maxParts = 20;
var maxPetalsDef = 6;
var maxPetals = maxPetalsDef;

var partsFontStepDef = 25 / maxParts;
var partsFontStep = partsFontStepDef;
var huetStep = 150 / maxParts;

createFlower ();

function createFlower () {
    
        var angle = 360 / maxPetals;
    
    for (var i = 0; i < maxPetals; i++) {
        var petal = createPetal(); 
        var currAngle = angle * i + 'deg';
        var transform = 'transform: rotateY(' + currAngle + ') rotateX(-30deg) translateZ(9vmin)';
        
        petal.setAttribute( 'style',transform);
        
        flower.appendChild( petal );
    }
}

function createPetal () {
    
    var box = createBox ( null, 0);
    
    var petal = doc.createElement('div');
    petal.classList.add('petal');
    
    for (var i = 1; i <= maxParts; i++) {
        newBox = createBox ( box, i );        
        box = newBox;
    } 
    
    petal.appendChild( box );

    return petal;
}

function createBox ( box, pos ) {
    
    var fontSize = partsFontStep * ( maxParts - pos ) + 'vmin';
    var half = maxParts / 2;
    
    var bright = '50';
    
    if ( pos < half + 1 ) {
        fontSize = partsFontStep * pos + 'vmin';
    }
    else {
        bright = 10 + 40 / half * ( maxParts - pos );
    }
    
    var color = 'hsl(' + huetStep * pos + ', 100%, ' + bright + '%)';
    
    // 1. Add shape
    var newShape = doc.createElement('div');
    newShape.classList.add( 'shape' );

    // 2. Create wrapper .box
    var newBox = doc.createElement('div');
    newBox.classList.add('box');  
    
    var boxStyle = [
        'color: ' + color,
        'font-size: ' + fontSize
    ].join(';');
    newBox.setAttribute('style', boxStyle);

    // 3. Add old box to new box
    if ( box ) {
        newBox.appendChild( box );
    }
    
    // 4. Add shape to new box
    newBox.appendChild( newShape );

    
    return newBox;
}

function out ( content ) {
    console.log( content );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.