<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width">
<title>Adorno con Giro</title>
<style>
.sprite {
position: fixed;
}
</style>
</head>
<body>
<h1>Adorno con Giro</h1>
<script>
const INCREMENTO =
2 * Math.PI / 21
const X_BASE = innerWidth / 2
const Y_BASE = innerHeight / 2
const ANGULO_FINAL = 6 * Math.PI
const amplitud = Math.min(
window.innerHeight,
window.innerWidth) /
(3 * ANGULO_FINAL)
let inner = ""
for (let angulo = 0
; angulo < ANGULO_FINAL
; angulo += INCREMENTO) {
const r = amplitud * angulo
const x =
X_BASE + r * Math.cos(angulo)
const y =
Y_BASE + r * Math.sin(angulo)
inner += /* html */
`<div class="sprite"
style="bottom: ${y}px;
left: ${x}px;">
⌛
</div>`
}
document.body.innerHTML += inner
</script>
</body>
</html>