To Create an Ashok Chakra, we will use HTML, CSS and JavaScript. Here is the simplified code format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Ashok Chakra</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #fff;
}
.ashok-chakra {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #000080;
position: relative;
}
.spoke {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 50%;
background-color: #000080;
transform-origin: bottom center;
transform: translate(-50%, -100%);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ashok-chakra {
animation: rotate 10s linear infinite;
}
</style>
</head>
<body>
<div class="ashok-chakra">
<!-- 24 spokes, each rotated by 15 degrees -->
<div class="spoke" style="transform: translate(-50%, -100%) rotate(0deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(15deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(30deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(45deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(60deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(75deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(90deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(105deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(120deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(135deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(150deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(165deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(180deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(195deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(210deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(225deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(240deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(255deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(270deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(285deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(300deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(315deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(330deg);"></div>
<div class="spoke" style="transform: translate(-50%, -100%) rotate(345deg);"></div>
</div>
<script>
// No additional JavaScript is needed for this rotation.
</script>
</body>
</html>
Post a Comment