Línea de tendencia
Cambia el intervalo de una serie ilustrativa.
Componentes
Laboratorio interactivo
Cuatro experimentos para explorar cómo se dibujan gráficos, se ajustan patrones y se filtran colores en el navegador.
Cómo funciona
React recorta la serie al cambiar el intervalo. Los puntos se dibujan con una polilínea SVG y el área inferior se completa con un polígono.
const values = series.slice(-range);Barras y estado de carga
Compara un gráfico de ejemplo con su indicador de carga.
Cómo funciona
React alterna el estado visible. CSS usa la misma altura para las barras y sus marcadores, y reduce el movimiento según la preferencia del navegador.
setLoading(!loading);Retícula variable
Ajusta la separación de un patrón construido con CSS.
Cómo funciona
Un control de rango modifica el tamaño de repetición del patrón CSS. La retícula se dibuja sin cargar una imagen.
background-size: 13px 13px;Máscara de tono
Filtra una retícula de prueba dentro de un rango de ±40°.
16/16 celdasCómo funciona
Esta demostración usa una retícula HSL. La distancia circular permite que el intervalo de tono cruce de 359° a 0°. El proyecto HSV aplica el mismo concepto a píxeles con OpenCV.
Math.min(Math.abs(value - hue), 360 - Math.abs(value - hue)) <= 40