আমি কীভাবে একটি টাইলিং হেক্সাগন টেসিলেশন তৈরি করতে পারি (এসভিজি / ওয়েবের জন্য)?


11

আমি নীচের চিত্রের মতো টেসলেসেশন প্যাটার্নে নিয়মিত হেক্সাগন ব্যবহার করে একটি ওয়েবপৃষ্ঠার জন্য একটি এসভিজি পটভূমি চিত্র তৈরি করতে চাইছি । তবে আন্তঃসংযোগের জন্য আমার হেক্সাগন প্রয়োজন যাতে আমি এটি ব্যবহার করতে পারি:

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

সিএসএস প্যাটার্ন আমি এটি ইনস্কেপে করতে চাই। যদিও নিশ্চিত না হয় কীভাবে ব্লকগুলিতে প্যাটার্নটি "কাটা" যায়। আমি কীভাবে এটি করা শুরু করব?

hexagons

সম্পাদনা করুন ফলাফলটি বেশ ভাল দেখাচ্ছে! আউটপুট


আপনি যদি ইনস্কেপ ফাইলটিতে একটি লিঙ্ক পেস্ট করতে পারেন তবে সহায়ক হবে!
ভি-রেড

উত্তর:


21

কিছুটা বুলিয়ান অপারেশন ট্র্যাকারি সহ এটি একটি খুব সহজ প্রক্রিয়া।

এখানে চিত্র বর্ণনা লিখুন

আপনার সেখানে থাকা হেক্সাগনগুলির একটি সেট নিন, উপরের চিত্রটিতে আমার কমলা রঙের সাথে মেলে এমন একটি আয়তক্ষেত্র তৈরি করুন (কোণগুলি হেক্সাগনগুলির যথাযথ পয়েন্টগুলিতে স্ন্যাপটি নিশ্চিত করুন) এবং তারপরে ছেদ করার সরঞ্জামটি ব্যবহার করুন আয়তক্ষেত্রের বাইরে সমস্ত কিছু থেকে মুক্তি। এটি আপনাকে একটি চেষ্টাযোগ্য প্যাটার্ন দিয়ে ছেড়ে দেওয়া উচিত।

সম্পাদনা: হোরেটিওর মন্তব্যে (ভাল কল!), আমি অনুভব করেছি যে আমি কীভাবে সেই নির্দিষ্ট আয়তক্ষেত্রে স্থির হয়েছি তা ব্যাখ্যা করা উচিত। টাইল তৈরি করার সময়, আপনার প্যাটার্নের প্রতিটি অংশ কমপক্ষে একবার টাইল টাইল (এবং আদর্শভাবে, একবারের বেশি নয়) একবার উপস্থিত হওয়া দরকার। এই প্যাটার্নটি সহ আমি এক্স বা y অক্ষের উপর কোন পুনরাবৃত্তি পয়েন্ট আছে কিনা তা দেখতে চেয়েছিলাম; সৌভাগ্যক্রমে আমার জন্য, হেক্সাগনগুলি একটি বিজোড় কোণে বসে নেই, সুতরাং এটি জিনিসগুলিকে তুলনামূলক সহজ কাজ করে তুলেছে।

এখানে চিত্র বর্ণনা লিখুন

এক্স অক্ষগুলিতে, আমি দুটি হেক্সাগন বেছে নিয়েছি যা প্রান্তিকিত ছিল। এগুলি অনুভূমিকভাবে নিদর্শনটির শুরু এবং শেষ হবে। এরপরে আমি প্রত্যেকের থেকে একটি মিলের পয়েন্ট নির্বাচন করেছি (এই ক্ষেত্রে, বাম-সর্বাধিক পয়েন্ট)। এটি নিদর্শনটির জন্য ক্লিপিং আয়তক্ষেত্রের সঠিক প্রস্থ চিহ্নিত করবে। এরপরে, আমি প্যাটার্নের ক্লিপিং আয়তক্ষেত্রের শীর্ষ কোণ হিসাবে প্রস্থের জন্য ইতিমধ্যে বেছে নেওয়া পয়েন্টগুলি ব্যবহার করে উল্লম্বভাবে একই কাজটি করেছি। মিলের লোয়ার পয়েন্টগুলি একবার পেয়ে গেলে ক্লিপিং আয়তক্ষেত্রটি সংজ্ঞায়িত করা হয়েছিল।

আপনি এই কৌশলটি যে কোনও আকারে ব্যবহার করতে পারেন। আপনি এটি একটি কোণে হেক্সাগনগুলিতে (বা অন্যান্য আকার) ব্যবহার করতে পারেন তবে মনে রাখবেন টাইলটি কোণের উপর নির্ভর করে যথেষ্ট বড় হয়ে উঠবে।


2
আপনি কীভাবে আয়তক্ষেত্রাকার অঞ্চলটি বেছে নিয়েছেন তার পিছনে ধারণাটি ব্যাখ্যা করতে পারলে, ওপি এটি অন্য আকারগুলিতে সাধারণীকরণ করতে সক্ষম হতে পারে।
হোরাটিও

আপডেট সত্যিই ভাল। ধারণাটি ব্যাখ্যা করতে সহায়তা করে।
ডায়োড ড্যান

অসাধারণ! আমি সাহায্য করতে পেরে আনন্দিত. :)
ক্রিস ল্যাংফোর্ড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.