<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Hypnotic Spiral Illusion</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1c1c1c ,
#3b3b3b);
overflow: hidden;
font-family: sans-serif;
}
.spiral-container{
position: relative;
width: 300px;
height: 300px;
}
.spiral{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(from 0deg,
#ff005e, #ffcc00, #00ffcc, #ff005e);
border-radius: 50%;
animation: spin 5s linear infinite;
mask-image: radial-gradient(circle, transparent 30%, black 60%);
}
.center{
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
@keyframes spin {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class=”spiral-container”>
<div class=”spiral”></div>
<div class=”center”></div>
</div>
</body>
</html>
