<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 );
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.