¿Cómo puedo crear una teselación de mosaico hexagonal (para SVG / Web)?


11

Estoy buscando crear una imagen de fondo SVG para una página web usando hexágonos regulares en un patrón de teselación similar a la imagen a continuación. Sin embargo, necesito que los hexágonos se interconecten para poder usar el:

background-image: url("path-to-hex.svg");

Patrón CSS Me gustaría hacer esto en Inkscape. Sin embargo, no estoy seguro de cómo "cortar" el patrón en bloques. ¿Cómo comenzaría a hacer esto?

Hexágonos

EDITAR ¡ El resultado salió realmente bien! salida


¡Sería útil si pudiera pegar un enlace al archivo inkscape!
V-Red

Respuestas:


21

Con un poco de truco de operación booleana, este es un proceso bastante fácil.

ingrese la descripción de la imagen aquí

Simplemente tome un conjunto de los hexágonos que tiene allí, cree un rectángulo que coincida con el naranja que tengo en la imagen de arriba (asegúrese de que las esquinas se ajusten a los puntos apropiados en los hexágonos), y luego use la herramienta de intersección para obtener deshacerse de todo fuera del rectángulo. Eso debería dejarte con un patrón tilable.

Editar: según el comentario de Horatio (¡buena decisión!), Pensé que debería explicar cómo me decidí por ese rectángulo en particular. Al crear un mosaico, debe hacer que cada parte de su patrón aparezca al menos una vez en dicho mosaico (e idealmente, no más de una vez). Con este patrón, miré para ver si había puntos recurrentes en el eje xo y; Afortunadamente para mí, los hexágonos no están sentados en un ángulo extraño, por lo que esto hizo que las cosas fueran una tarea relativamente fácil.

ingrese la descripción de la imagen aquí

En el eje X, elegí dos hexágonos que estaban alineados. Estos serían el inicio y el final del patrón, horizontalmente. Luego seleccioné un punto coincidente de cada uno (en este caso, el punto más a la izquierda). Esto marcaría el ancho exacto del rectángulo de recorte para el patrón. A continuación, hice lo mismo verticalmente, usando los puntos que ya elegí para el ancho como las esquinas superiores del rectángulo de recorte del patrón. Una vez que encontré los puntos inferiores coincidentes, se definió el rectángulo de recorte.

Podrías usar esta técnica en cualquier cantidad de formas. También puede usarlo en hexágonos (u otras formas) en ángulo, pero tenga en cuenta que el mosaico se volverá sustancialmente más grande, dependiendo del ángulo.


2
Si pudiera explicar la idea detrás de cómo eligió el área rectangular, el OP podría generalizar esto a otras formas.
Horacio

La actualización es realmente buena. Ayuda a explicar el concepto.
Diode Dan

¡Excelente! Me alegro de poder ayudar. :)
Chris Langford
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.