Blomsten til højre er lavet med CSS alene. Det er egentlig ikke så svært. Men ret fornøjeligt!
Du får koden nedenfor, så at du har noget at starte med.

CSS:

.flower {
float:right;
position:static;
width:105px;
right:140px;
transform:rotate(25deg);
}
#one {
float:left;
transform: rotate(-25deg);
}
#two {
float:right;
transform: rotate(25deg);
}
#three {
float:left;
transform: rotate(25deg);
position: absolute;
top: 60px;
}
#four {
float:right;
transform: rotate(-25deg);
position: absolute;
top: 60px;
right:0;
}
.petal {
border-radius: 70%;
width: 50px;
height: 70px;
background-color: aliceblue;
border:1px solid lavender;
animation-name: baggrund;
animation-duration: 4s;
animation-iteration-count:6;
}
.middlecircle {
background-color:lightyellow;
width:30px;
height:30px;
border-radius:50%;
z-index:99;
position: absolute;
top:50px;
right:35px;
border:1px solid linen;
}
@keyframes baggrund {
    from {background-color:white;opacity:0.0;border:1px solid white;}
    to {background-color:aliceblue;opacity:1;border: 1px solid lavender;}
}

HTML:

<div class="flower">
<div class="petal" id="one"></div>
<div class="petal" id="two"></div>
<div class="middlecircle"></div>
<div class="petal" id="three"></div>
<div class="petal" id="four"></div>
</div>