Jak mogę utworzyć mozaikowy sześciokąt kafelkowy (dla SVG / Web)?


11

Chcę utworzyć obraz tła SVG dla strony internetowej przy użyciu regularnych sześciokątów we wzorze mozaikowym podobnym do poniższego obrazu. Potrzebuję jednak sześciokątów do połączenia, aby móc użyć:

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

Wzór CSS. Chciałbym to zrobić w Inkscape. Nie jestem jednak pewien, jak „pociąć” wzór na bloki. Jak mam zacząć to robić?

Sześciokąty

EDYCJA Wynik wyszedł naprawdę dobrze! wynik


Byłoby pomocne, gdybyś mógł wkleić link do pliku inkscape!
V-Red,

Odpowiedzi:


21

Przy odrobinie operacji logicznej jest to dość łatwy proces.

wprowadź opis zdjęcia tutaj

Po prostu weź zestaw sześciokątów, które tam masz, utwórz prostokąt, który pasuje do pomarańczowego, który mam na powyższym obrazku (upewnij się, że rogi przyciągają się do odpowiednich punktów na sześciokątach), a następnie użyj narzędzia przecięcia, aby uzyskać pozbyć się wszystkiego poza prostokątem. To powinno dać ci wzór z taflami.

Edycja: Według komentarza Horatio (dobra rozmowa!), Pomyślałem, że powinienem wyjaśnić, jak osiadłem na tym konkretnym prostokącie. Podczas tworzenia kafelka każda część wzoru musi pojawić się co najmniej raz we wspomnianej kafelku (a najlepiej nie więcej niż raz). Dzięki temu wzorowi sprawdziłem, czy na osi x lub y są jakieś powtarzające się punkty; na szczęście dla mnie sześciokąty nie są ustawione pod dziwnym kątem, więc to sprawiło, że było to stosunkowo łatwe zadanie.

wprowadź opis zdjęcia tutaj

Na osi X wybrałem dwa sześciokąty, które zostały wyrównane. Byłyby to początek i koniec wzoru w poziomie. Następnie wybrałem z każdego pasujący punkt (w tym przypadku skrajnie lewy punkt). Oznaczałoby to dokładną szerokość prostokąta odcinania dla wzoru. Następnie zrobiłem to samo w pionie, wykorzystując punkty, które już wybrałem dla szerokości, jako górne rogi wycinającego się prostokąta wzoru. Po znalezieniu pasujących dolnych punktów zdefiniowano prostokąt odcinania.

Możesz użyć tej techniki na dowolnej liczbie kształtów. Możesz używać go również na sześciokątach (lub innych kształtach) pod kątem, ale pamiętaj, że płytka stanie się znacznie większa, w zależności od kąta.


2
Jeśli potrafisz wyjaśnić pomysł wyboru prostokątnego obszaru, OP może być w stanie uogólnić to na inne kształty.
horatio

Aktualizacja jest naprawdę dobra. Pomaga wyjaśnić pojęcie.
Diode Dan

Świetny! Cieszę się, że mogłem pomóc. :)
Chris Langford
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.