Patrones simples para la separación (mejor que el color solo) | Programar Plus

0

El color es bastante bueno para separar cosas. Eso es lo que es su gráfico circular básico, ¿no? Distingue las rodajas por color. Con suficiente contraste de color, podría estar bien, pero podría estar incluso mejor (especialmente en lo que respecta a la accesibilidad) usando patrones o una combinación.

Patrick Dillon abordó el tema del gráfico circular

Mejora de gráficos con patrones SVG:

Cuando una de las rebanadas está llena de algo más que color, es más fácil de entender. [who the Independents are]:

Vea la Afiliación a un partido político de Pen – # 2 por Patrick Dillon (@pdillon) en CodePen.

Llenar un sector circular con un patrón no es una característica común de la biblioteca de gráficos (todavía), pero si su biblioteca de elección está basada en SVG, puede implementar patrones SVG.

Como en, literalmente un <pattern /> en SVG!

Aquí hay uno simple para líneas horizontales:

<pattern 
    id="horzLines" 
    width="8" 
    height="4" 
    patternUnits="userSpaceOnUse">
       <line 
          x1="0" 
          y1="0" 
          x2="8" 
          y2="0" 
         style="stroke:#999;stroke-width:1.5" 
       />
</pattern>

Ahora cualquier elemento SVG puede usar ese patrón como relleno. Incluso golpes. A continuación, se muestra un ejemplo de uso mixto de dos patrones simples:

Vea los patrones de línea simple de lápiz de Chris Coyier (@chriscoyier) en CodePen.

Eso es bueno para llenar elementos SVG, pero ¿qué pasa con los elementos HTML?

Irene Ros creó patrones de relleno basados ​​en SVG, pero también utilizables en CSS.

Usar patrones SVG como rellenos:

Hay varias formas de utilizar Rellenos de patrón:

  • Puedes usar el patterns.css archivo que contiene todos los patrones actuales. Eso solo funcionará para elementos que no sean SVG.

  • Puede utilizar patrones individuales, pero copiándolos de las páginas de muestra. Las definiciones de clases CSS se pueden encontrar aquí y las definiciones de patrones SVG se pueden encontrar aquí

  • ¡Puedes agregar tus propios patrones o modificar los míos! El proceso de conversión de un documento SVG a un patrón es muy tedioso. El propósito de la cadena de herramientas de rellenos de patrón es simplificar este proceso. Puedes clonar el repositorio, ejecutar npm install y grunt dev para que funcione un servidor local. Después de eso, cualquier cambio o adición al src/patterns/**/* Los archivos se recogerán automáticamente y volverán a representar el archivo CSS y las páginas de muestra. Si crea nuevos patrones, envíelos en una solicitud de extracción.

Aquí estoy aplicándolos a elementos SVG (pero podría aplicarse con la misma facilidad a elementos HTML):

Vea los patrones prácticos de Pen de Chris Coyier (@chriscoyier) en CodePen.

Sin embargo, el uso de CSS es como URL de datos base64, por lo que una vez que están allí no son súper manejables / cambiables.

Aquí está Irene con una tabla de tiempos antigua, usando d3:

Administrar un patrón SVG en CSS

Si su URL codifica el SVG correctamente, lo coloca directamente en CSS y lo mantiene bastante manejable.

Vea los patrones de línea simple de lápiz de Chris Coyier (@chriscoyier) en CodePen.

Otros ejemplos de combinación de colores

Aquí hay uno de John Schulz:

Vea los patrones de colores Pen SVG de Chris Coyier (@chriscoyier) en CodePen.

Ricardo Marimón tiene un ejemplo creando el patrón en d3. El patrón se ve prácticamente igual en los cortes, pero quizás sea un comienzo para modificarlo.

Otras fuentes de patrones

¡Recopilamos un montón de ellos recientemente!