<!
DOCTYPE html>
<html>
<head>
<title>Rotating Flower</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Back flower -->
<div class="flower back">
<svg viewBox="0 0 200 200">
<g transform="translate(100,100)">
<!-- 8 gray petals -->
<g class="petal-group">
<path d="M0,-60 Q20,-20 0,0 Q-20,-20 0,-60" fill="lightgray" />
</g>
<use href=".petal-group" transform="rotate(45)" />
<use href=".petal-group" transform="rotate(90)" />
<use href=".petal-group" transform="rotate(135)" />
<use href=".petal-group" transform="rotate(180)" />
<use href=".petal-group" transform="rotate(225)" />
<use href=".petal-group" transform="rotate(270)" />
<use href=".petal-group" transform="rotate(315)" />
</g>
</svg>
</div
<!-- Front flower -->
<div class="flower front">
<svg viewBox="0 0 200 200">
<g transform="translate(100,100)">
<!-- 8 black petals -->
<g class="petal-group">
<path d="M0,-60 Q20,-20 0,0 Q-20,-20 0,-60" fill="black" />
</g>
<use href=".petal-group" transform="rotate(45)" />
<use href=".petal-group" transform="rotate(90)" />
<use href=".petal-group" transform="rotate(135)" />
<use href=".petal-group" transform="rotate(180)" />
<use href=".petal-group" transform="rotate(225)" />
<use href=".petal-group" transform="rotate(270)" />
<use href=".petal-group" transform="rotate(315)" />
</g>
</svg>
</div>
</body>
</html>
body {
background-color: white;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.flower {
position: absolute;
width: 200px;
height: 200px;
.back {
animation: spinBack 8s linear infinite;
.front {
animation: spinFront 8s linear infinite reverse;
@keyframes spinFront {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spinBack {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
<!DOCTYPE html>
<html>
<head>
<title>Simple Rotating Circles</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Back layer -->
<div class="circle back"></div>
<!-- Front layer -->
<div class="circle front"></div>
</body>
</html>
body {
background-color: white;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.circle {
position: absolute;
border-radius: 50%;
.back {
width: 200px;
height: 200px;
background-color: lightgray;
animation: spinBack 5s linear infinite;
.front {
width: 100px;
height: 100px;
background-color: blue;
animation: spinFront 5s linear infinite reverse;
}
@keyframes spinFront {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
@keyframes spinBack {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
