Cada marca mide el cursor desde su propio centro, así que no son copias de una sola: si el cursor queda en medio, la de arriba mira hacia abajo y la de abajo mira hacia arriba. Mueve el mouse por el recuadro.
Con el cursor en una esquina se ve lo que importa: todas apuntan al mismo punto y ninguna está en la misma pose. Es la diferencia entre una marca viva y el mismo GIF repetido nueve veces.
El hueco entre caras crece conforme baja el tamaño, porque abajo de cierto punto se vuelve subpíxel y las tres caras se fusionan en un triángulo macizo. Es la misma compensación óptica que se le hace al grosor de un trazo.
<canvas class="vl-marca" style="width:44px;height:44px"></canvas> <script src="/lab/marca.js"></script> <script>VLMarca.montarTodo()</script>
Atributos opcionales por marca: data-color, data-hueco, data-radio y data-alcance, que es a qué distancia en píxeles el cursor ya inclina al tope. Un alcance corto hace que marcas separadas apunten muy distinto; uno largo las mantiene parecidas.
Un solo bucle de animación mueve a todas: N marcas cuestan N dibujos,
no N bucles. Y con prefers-reduced-motion se dibujan quietas en su pose,
no desaparecen.