console
function rainbow(){
const ctx = document.getElementById('canvas').getContext('2d')
const colors = ['red', 'orange','yellow','green','cyan','blue','purple']
for(let i = 0; i<7;i++){
ctx.beginPath()
ctx.moveTo(100-i*10,400)
ctx.arc(400,400,300+i*10,Math.PI,0)
ctx.strokeStyle = colors[i]
ctx.lineWidth = '10'
ctx.stroke()
ctx.closePath()
}
}
rainbow()
const people = document.querySelector('.people')
<div class="container">
<div class="people">
<div class="body"></div>
<div class="leg"></div>
<div class="foot"></div>
</div>
</div>
<canvas id="canvas" width="1000" height="500"></canvas>
.container{
width: 720px;
height: 700px;
border-radius: 50%;
position: absolute;
left: 50px;
top: 30px;
animation: walk ease-in 6s infinite;
.people{
position: absolute;
width: 50px;
height: 100px;
bottom: 350px;
left:-30px;
transform: rotate(10deg);
.body{
width: 10px;
height: 100px;
background-color: #000;
border-radius: 50px;
}
.leg{
width: 10px;
height: 30px;
background-color: #000;
position: absolute;
transform: rotate(45deg);
top: 20px;
left: 10px;
animation: leg 1s linear infinite;
}
.foot{
width: 10px;
height: 50px;
position: absolute;
background-color: #000;
transform: rotate(-65deg);
top: 70px;
left: 10px;
animation: foot 1s linear infinite;
}
}
}
@keyframes leg{
from {
transform: rotate(45deg)
}
to{
transform: rotate(90deg)
}
}
@keyframes foot{
from{
transform: rotate(-65deg)
}
to{
transform: rotate(-25deg)
}
}
@keyframes walk{
from{
transform: rotate(0)
}
to{
transform: rotate(170deg)
}
}