MANDALA
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title" </h1>
<p id=></p>
<script src="script.js"></script>
</body>
</html>
<html>
<head>
<title> "Mandala de Jung"</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title" </h1>
<p id=""></p>
<script src="script.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mandala com Movimento e Cores</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: "black" ; /* Fundo preto */
}
svg {
width: 800px; /* Aumentei o tamanho */
height: 800px;
transform-origin: center;
animation: rotate 5s linear infinite; /* Animação de rotação */
}
@keyframes rotate {
0% {
transform: rotate(5deg);
}
100% {
transform: rotate(1090deg);
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Círculos concêntricos -->
<circle cx="100" cy="100" r="90" fill="none" stroke="white" stroke-width="2" />
<circle cx="100" cy="100" r="75" fill="none" stroke="white" stroke-width="2" />
<circle cx="100" cy="100" r="60" fill="none" stroke="white" stroke-width="2" />
<circle cx="100" cy="100" r="45" fill="none" stroke="white" stroke-width="2" />
<circle cx="100" cy="100" r="30" fill="none" stroke="white" stroke-width="2" />
<!-- Círculos rotacionando ao redor da mandala -->
<g fill="white">
<circle cx="100" cy="10" r="5" transform="rotate(0 100 100)" /> <!-- Topo -->
<circle cx="190" cy="100" r="5" transform="rotate(90 100 100)" /> <!-- Direita -->
<circle cx="100" cy="190" r="5" transform="rotate(180 100 100)" /> <!-- Base -->
<circle cx="10" cy="100" r="5" transform="rotate(270 100 100)" /> <!-- Esquerda -->
<!-- Círculos intermediários com rotação -->
<circle cx="240" cy="20" r="5" transform="rotate(45 100 100)" /> <!-- Entre topo e direita -->
<circle cx="180" cy="140" r="5" transform="rotate(135 100 100)" /> <!-- Entre direita e base -->
<circle cx="80" cy="180" r="5" transform="rotate(225 100 100)" /> <!-- Entre base e esquerda -->
<circle cx="40" cy="60" r="5" transform="rotate(315 100 100)" /> <!-- Entre esquerda e topo -->
</g>
<!-- Círculos menores com rotação -->
<g fill="white" opacity="0.7">
<circle cx="120" cy="40" r="4" transform="rotate(22.5 100 100)" /> <!-- Pequeno círculo próximo ao topo -->
<circle cx="160" cy="120" r="4" transform="rotate(112.5 100 100)" /> <!-- Pequeno círculo próximo à direita -->
<circle cx="80" cy="160" r="4" transform="rotate(202.5 100 100)" /> <!-- Pequeno círculo próximo à base -->
<circle cx="40" cy="80" r="4" transform="rotate(292.5 100 100)" /> <!-- Pequeno círculo próximo à esquerda -->
</g>