मैं एक टाइलिंग हेक्सागोन टेसलेशन (SVG / वेब के लिए) कैसे बना सकता हूं?


11

मैं एक वेबपेज के लिए एक एसवीजी पृष्ठभूमि छवि बनाने की तलाश कर रहा हूं, जो नीचे दिए गए चित्र के समान टेसेलेशन पैटर्न में नियमित हेक्सागोन्स का उपयोग कर रहा है। हालाँकि, मुझे संभोग करने की आवश्यकता है ताकि मैं इसका उपयोग कर सकूं:

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

सीएसएस पैटर्न। मैं इसे इंक्सस्केप में करना चाहता हूं। मुझे यकीन नहीं है कि पैटर्न को ब्लॉक में "कट" कैसे किया जाए। मैं यह करना कैसे शुरू करूंगा?

hexagons

संपादित करें परिणाम वास्तव में अच्छा लग रहा है! उत्पादन


यदि आप tokscape फ़ाइल का लिंक पेस्ट कर सकते हैं तो यह मददगार होगा!
वी-रेड

जवाबों:


21

का एक सा के साथ बूलियन आपरेशन प्रवंचना यह एक बहुत आसान प्रक्रिया है।

यहाँ छवि विवरण दर्ज करें

बस आपके पास वहां मौजूद षट्कोणों का एक सेट लें, एक आयताकार बनाएं जो ऊपर की छवि में मुझे मिले नारंगी से मेल खाता हो (सुनिश्चित करें कि कोने हेक्सागोन्स पर उपयुक्त बिंदुओं पर स्नैप करें), और फिर पाने के लिए चौराहे उपकरण का उपयोग करें आयत के बाहर की हर चीज़ से छुटकारा। जो आपको एक तुलनीय पैटर्न के साथ छोड़ना चाहिए।

संपादित करें: प्रति हॉरियोस की टिप्पणी (अच्छी कॉल!), मुझे लगा कि मुझे समझाना चाहिए कि मैं उस विशेष आयत पर कैसे बस गया। एक टाइल बनाते समय, आपको अपने पैटर्न का प्रत्येक भाग कम से कम एक बार टाइल (और आदर्श रूप में, एक बार से अधिक नहीं) में दिखाई देने की आवश्यकता होती है। इस पैटर्न के साथ मैंने यह देखना चाहा कि क्या x या y अक्ष पर कोई आवर्ती बिंदु थे; मेरे लिए सौभाग्य से, हेक्सागोन्स एक विषम कोण पर नहीं बैठे हैं, इसलिए इससे चीजें अपेक्षाकृत आसान हो गई हैं।

यहाँ छवि विवरण दर्ज करें

एक्स अक्ष पर, मैंने दो हेक्सागोन उठाए जो संरेखित थे। यह क्षैतिज रूप से पैटर्न की शुरुआत और अंत होगा। मैंने अगली बार प्रत्येक से एक मिलान बिंदु चुना (इस मामले में, सबसे बाएं बिंदु)। यह पैटर्न के लिए क्लिपिंग आयत की सटीक चौड़ाई को चिह्नित करेगा। इसके बाद, मैंने वही लंबवत किया, पैटर्न के क्लिपिंग आयत के शीर्ष कोनों के रूप में मैंने पहले से ही चौड़ाई के लिए चुने गए बिंदुओं का उपयोग किया। एक बार जब मुझे मिलान के निचले बिंदु मिले, तो क्लिपिंग आयत को परिभाषित किया गया था।

आप किसी भी आकार के इस तकनीक का उपयोग कर सकते हैं। आप इसे एक कोण पर हेक्सागोन्स (या अन्य आकृतियों) पर भी उपयोग कर सकते हैं, लेकिन ध्यान रखें कि टाइल कोण के आधार पर काफी बड़ी हो जाएगी।


2
यदि आप इस विचार को समझा सकते हैं कि आपने आयताकार क्षेत्र को कैसे चुना है, तो ओपी इसे अन्य आकारों में सामान्यीकृत करने में सक्षम हो सकता है।
क्षितिज अनुपात

अद्यतन वास्तव में अच्छा है। अवधारणा को समझाने में मदद करता है।
डायोड डैन

अति उत्कृष्ट! मैं खुशी से मदद कर सकता है। :)
क्रिस लैंगफोर्ड
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.