<marquee>long life to Html marquee¡</marquee>
<div class="clock">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 400 316" width="100%" height="100%">
<path d=" M 166 218 L 166 243 L 172.5 265 M -9 149 L 102 149 L 129 168 L 129 233 L 52 233 L 19 265 L 18 371 M -12 54 L 94 54 L 122 75 L 122 98 M 368 149 L 368 270 L 349 270 M 368 -40 L 368 57 L 349 75 L 327 75 M 324 196 L 324 172 L 346 149 L 412 149 M 288 196 L 288 158 L 330 116 L 403 116 M 285 369 L 285 270 L 250 236 L 250 209 M 285 -44 L 284 113 L 284 119 L 215.75 178 L 215.75 371 M 243 -44 L 243 101 M 178.125 -46 L 176 54 L 204.5 85 L 204.5 98 M -5 107 L 23 107 L 57 131 L 57 149 M 59 233 L 129 233 L 129 215 M 157 -48 L 156 54 L 183.75 85 L 183.75 149 L 193.25 163 L 193.25 243 L 172.5 265 L 79 265 L 52 291 L 51 376 M 134.5 -48 L 134.5 54 L 161.25 81 L 161.25 98" fill-rule="evenodd" fill="none" stroke-width="4" class="wiring"/>
<path d=" M 312.5 75 C 312.5 69.481 316.981 65 322.5 65 C 328.019 65 332.5 69.481 332.5 75 C 332.5 80.519 328.019 85 322.5 85 C 316.981 85 312.5 80.519 312.5 75 Z M 273 116.5 C 273 110.981 277.481 106.5 283 106.5 C 288.519 106.5 293 110.981 293 116.5 C 293 122.019 288.519 126.5 283 126.5 C 277.481 126.5 273 122.019 273 116.5 Z M 359 149 C 359 143.481 363.481 139 369 139 C 374.519 139 379 143.481 379 149 C 379 154.519 374.519 159 369 159 C 363.481 159 359 154.519 359 149 Z M 337.5 269 C 337.5 263.481 341.981 259 347.5 259 C 353.019 259 357.5 263.481 357.5 269 C 357.5 274.519 353.019 279 347.5 279 C 341.981 279 337.5 274.519 337.5 269 Z M 275 271.5 C 275 265.981 279.481 261.5 285 261.5 C 290.519 261.5 295 265.981 295 271.5 C 295 277.019 290.519 281.5 285 281.5 C 279.481 281.5 275 277.019 275 271.5 Z M 47 234 C 47 228.481 51.481 224 57 224 C 62.519 224 67 228.481 67 234 C 67 239.519 62.519 244 57 244 C 51.481 244 47 239.519 47 234 Z M 47 149 C 47 143.481 51.481 139 57 139 C 62.519 139 67 143.481 67 149 C 67 154.519 62.519 159 57 159 C 51.481 159 47 154.519 47 149 Z M 162.5 265 C 162.5 259.481 166.981 255 172.5 255 C 178.019 255 182.5 259.481 182.5 265 C 182.5 270.519 178.019 275 172.5 275 C 166.981 275 162.5 270.519 162.5 265 Z M 84 53 C 84 47.481 88.481 43 94 43 C 99.519 43 104 47.481 104 53 C 104 58.519 99.519 63 94 63 C 88.481 63 84 58.519 84 53 Z " fill-rule="evenodd" stroke-width="4" class="joints"/>
<!-- 8 -->
<path d="M 115.938 93 L 130.563 93 C 132.736 93 134.5 94.764 134.5 96.937 L 134.5 122.563 C 134.5 124.736 132.736 126.5 130.563 126.5 L 115.938 126.5 C 113.764 126.5 112 124.736 112 122.563 L 112 96.937 C 112 94.764 113.764 93 115.938 93 Z" class="bg-clock" data-hour="8" />
<text transform="matrix(1,0,0,1,120,115)" class="bg-text" data-hour-txt="8">8</text>
<!-- /8 -->
<!-- 4 -->
<path d="M 153.938 93 L 168.563 93 C 170.736 93 172.5 94.764 172.5 96.937 L 172.5 122.563 C 172.5 124.736 170.736 126.5 168.563 126.5 L 153.938 126.5 C 151.764 126.5 150 124.736 150 122.563 L 150 96.937 C 150 94.764 151.764 93 153.938 93 Z" class="bg-clock" data-hour="4" />
<text transform="matrix(1,0,0,1,158,115)" class="bg-text" data-hour-txt="4">4</text>
<!-- /4 -->
<!-- 2 -->
<path d="M 197.187 93 L 211.812 93 C 213.986 93 215.75 94.764 215.75 96.937 L 215.75 122.563 C 215.75 124.736 213.986 126.5 211.813 126.5 L 197.187 126.5 C 195.014 126.5 193.25 124.736 193.25 122.563 L 193.25 96.937 C 193.25 94.764 195.014 93 197.187 93 Z" class="bg-clock" data-hour="2"/>
<text transform="matrix(1,0,0,1,201,115)" class="bg-text" data-hour-txt="2">2</text>
<!-- /2 -->
<!-- 1 -->
<path d="M 235.937 93 L 250.562 93 C 252.736 93 254.5 94.764 254.5 96.937 L 254.5 122.563 C 254.5 124.736 252.736 126.5 250.563 126.5 L 235.937 126.5 C 233.764 126.5 232 124.736 232 122.563 L 232 96.937 C 232 94.764 233.764 93 235.937 93 Z" class="bg-clock" data-hour="1"/>
<text transform="matrix(1,0,0,1,240,115)" class="bg-text" data-hour-txt="1">1</text>
<!-- /1 -->
<!-- 32 -->
<path d="M 121.938 188 L 136.563 188 C 138.736 188 140.5 189.764 140.5 191.938 L 140.5 217.562 C 140.5 219.736 138.736 221.5 136.563 221.5 L 121.938 221.5 C 119.764 221.5 118 219.736 118 217.562 L 118 191.938 C 118 189.764 119.764 188 121.938 188 Z" class="bg-clock" data-minutes="32"/>
<text transform="matrix(1,0,0,1,122,210)" class="bg-text" data-minutes-txt="32">32</text>
<!-- /·2 -->
<!-- 16 -->
<path d="M 159.568 188.04 L 174.193 188.04 C 176.366 188.04 178.13 189.804 178.13 191.977 L 178.13 217.603 C 178.13 219.776 176.366 221.54 174.193 221.54 L 159.568 221.54 C 157.394 221.54 155.63 219.776 155.63 217.603 L 155.63 191.977 C 155.63 189.804 157.394 188.04 159.568 188.04 Z" class="bg-clock" data-minutes="16"/>
<text transform="matrix(1,0,0,1,159,210)" class="bg-text" data-minutes-txt="16">16</text>
<!-- /16 -->
<!-- 8 -->
<path d="M 208.437 188 L 223.062 188 C 225.236 188 227 189.764 227 191.938 L 227 217.562 C 227 219.736 225.236 221.5 223.063 221.5 L 208.437 221.5 C 206.264 221.5 204.5 219.736 204.5 217.562 L 204.5 191.938 C 204.5 189.764 206.264 188 208.437 188 Z" class="bg-clock" data-minutes="8"/>
<text transform="matrix(1,0,0,1,212,210)" class="bg-text" data-minutes-txt="8">8</text>
<!-- /8 -->
<!-- 4 -->
<path d="M 244.438 188 L 259.063 188 C 261.236 188 263 189.764 263 191.938 L 263 217.563 C 263 219.736 261.236 221.5 259.063 221.5 L 244.438 221.5 C 242.264 221.5 240.5 219.736 240.5 217.563 L 240.5 191.938 C 240.5 189.764 242.264 188 244.438 188 Z" class="bg-clock" data-minutes="4"/>
<text transform="matrix(1,0,0,1,248,210)" class="bg-text" data-minutes-txt="4">4</text>
<!-- /4 -->
<!-- 2 -->
<path d="M 280.438 188 L 295.063 188 C 297.236 188 299 189.764 299 191.938 L 299 217.562 C 299 219.736 297.236 221.5 295.063 221.5 L 280.438 221.5 C 278.264 221.5 276.5 219.736 276.5 217.562 L 276.5 191.938 C 276.5 189.764 278.264 188 280.438 188 Z" class="bg-clock" data-minutes="2"/>
<text transform="matrix(1,0,0,1,284,210)" class="bg-text" data-minutes-txt="2">2</text>
<!-- /2 -->
<!-- 1 -->
<path d="M 316.438 188 L 331.063 188 C 333.236 188 335 189.764 335 191.938 L 335 217.562 C 335 219.736 333.236 221.5 331.063 221.5 L 316.438 221.5 C 314.264 221.5 312.5 219.736 312.5 217.562 L 312.5 191.938 C 312.5 189.764 314.264 188 316.438 188 Z" class="bg-clock" data-minutes="1"/>
<text transform="matrix(1,0,0,1,320,210)" class="bg-text" data-minutes-txt="1">1</text>
<!-- /1 -->
</svg>
</div>
<div id="reloj-real" class="real-clock"></div>:root {
--color-50: #f2f3f3;
--color-100: #e6e6e8;
--color-200: #cccdd1;
--color-300: #b3b4b9;
--color-400: #9a9ba2;
--color-500: #81838b;
--color-600: #676a74;
--color-700: #4e515d;
--color-800: #353845;
--color-900: #1b1f2e;
--color-950: #0f1223;
--font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
--font-weight: 700;
--font-size: 13px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: auto;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: var(--color-50);
}
.clock {
width: 100%;
max-width: 400pt;
height: 100%;
max-height: 300pt;
background: var(--color-100);
border-radius: 4px;
overflow: hidden;
}
.wiring,
.joints {
stroke: var(--color-200);
}
.wiring {
animation: wiring 1s infinite ease-in-out;
}
.joints {
fill: var(--color-200);
animation: joint 2s infinite ease-in-out;
}
.bg-clock {
stroke-width: 2;
stroke: var(--color-200);
fill: var(--color-50);
stroke-miterlimit: 10;
&.active {
fill: var(--color-900);
}
}
.bg-text {
font-family: var(--font-family);
font-weight: var(--font-weight);
font-size: var(--font-size);
fill: var(--color-950);
&.active {
fill: var(--color-50);
font-weight:bold;
}
}
.real-clock {
width: 100%;
max-width: 400pt;
font-weight: bold;
font-size: 22px;
padding: 5px 8px;
text-align: center;
background: var(--color-800);
color: var(--color-50);
}
.image-clock {
margin: 10px auto;
padding: 10px;
border-radius: 4px;
background: var(--color-800);
color: var(--color-50);
img {
width: 150px;
}
}
@keyframes wiring {
50% {
stroke: var(--color-800);
}
}
@keyframes joint {
50% {
stroke: var(--color-700);
}
}
@keyframes clock {
50% {
fill: var(--color-800);
}
}
function actualizarReloj() {
// Obtiene todos los elementos
const itemsHora = document.querySelectorAll(`[data-hour]`);
const itemsHoraTexto = document.querySelectorAll(`[data-hour-txt]`);
const itemMinuto = document.querySelectorAll(`[data-minutes]`);
const itemMinutoTexto = document.querySelectorAll(`[data-minutes-txt]`);
// Obtiene el array de la hora y el minuto
const horas = [8, 4, 2, 1];
const minutos = [32, 16, 8, 4, 2, 1];
// Obtiene la hora actual
const horaActual = new Date().getHours();
const minutoActual = new Date().getMinutes();
// Obtener el array de horas filtrado
const horaBinaria = (horaActual % 12).toString(2).padStart(4, "0");
const minutoBinario = minutoActual.toString(2).padStart(6, "0");
// Convertir las representaciones binarias a arrays de números
const horasFiltradas = horaBinaria
.split("")
.map((bit, index) => (bit === "1" ? horas[index] : 0))
.filter(Boolean);
const minutosFiltrados = minutoBinario
.split("")
.map((bit, index) => (bit === "1" ? minutos[index] : 0))
.filter(Boolean);
// Construir la cadena para mostrar la hora actual en formato de 12 horas con ceros en el minuto si es necesario
const hora12Formato = horaActual % 12 || 12;
const horaActualStr = hora12Formato.toString().padStart(2, "0");
const minutoActualStr = minutoActual.toString().padStart(2, "0");
const amPm = horaActual < 12 ? "AM" : "PM";
// Mostrar la hora actual en el div con id "reloj-real"
const relojReal = document.getElementById("reloj-real");
relojReal.textContent = `${horaActualStr}:${minutoActualStr} ${amPm}`;
// Borrar clases
borrarClases(itemsHora);
borrarClases(itemsHoraTexto);
borrarClases(itemMinuto);
borrarClases(itemMinutoTexto);
// Activar los elementos correspondientes
horasFiltradas.forEach((item) =>
activar(`[data-hour="${item}"]`, `[data-hour-txt="${item}"]`)
);
minutosFiltrados.forEach((item) =>
activar(`[data-minutes="${item}"]`, `[data-minutes-txt="${item}"]`)
);
// Actualizar reloj constantemente
requestAnimationFrame(actualizarReloj);
}
// Borrar clases de los elementos
// Remove classes from elements
function borrarClases(elements) {
elements.forEach((element) => {
if (element) {
element.classList.remove("active");
}
});
}
// Activar los elementos correspondientes
function activar(hora, texto) {
const activarElemento = (elemento) => {
const item = document.querySelector(elemento);
if (item) item.classList.add("active");
};
activarElemento(hora);
activarElemento(texto);
}
// Actualiza el reloj al cargar la página
actualizarReloj();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.