SVG প্যাটার্ন জেনারেটর

SVG প্যাটার্ন জেনারেটর কী?

SVG প্যাটার্ন জেনারেটর হলো ওয়েব ডিজাইনার ও ফ্রন্ট-এন্ড ডেভেলপারদের জন্য একটি বিনামূল্যের ইন-ব্রাউজার টুল, যাদের গ্রাফিক্স এডিটর না খুলেই হালকা, পুনরাবৃত্তিযোগ্য ব্যাকগ্রাউন্ড দরকার। আপনি একটি ড্রপডাউন থেকে একটি প্যাটার্ন (বিন্দু, গ্রিড, ডোরা, কোণাকুণি, দাবার ছক) বেছে নেন, আকৃতিগুলোর জন্য একটি অগ্রভাগের রং এবং টাইলের জন্য একটি পটভূমির রং নির্ধারণ করেন, এবং টাইলের আকার ও স্ট্রোকের পুরুত্ব নিয়ন্ত্রণ করতে স্কেল ও পুরুত্বের সংখ্যাসূচক ইনপুট ব্যবহার করেন। আউটপুট হলো ঝকঝকে SVG হিসেবে আঁকা একটি একক টাইল, যা নির্বিঘ্নে পুনরাবৃত্তির জন্য ডিজাইন করা, তাই ফাইলের আকার খুব ছোট থাকে এবং প্যাটার্ন ঝাপসা না হয়ে স্কেল হয়। কপি-যোগ্য আউটপুটকে কাঁচা SVG মার্কআপ ও CSS background-image নিয়মের মধ্যে বদলাতে Format টগল ব্যবহার করুন, তারপর সেটি কপি করুন বা সাইট, কার্ড, হিরো সেকশন ও UI মকআপে ব্যবহারের জন্য .svg ফাইলটি ডাউনলোড করুন।

SVG প্যাটার্ন জেনারেটর কীভাবে ব্যবহার করবেন

1. ড্রপডাউন থেকে একটি প্যাটার্ন বেছে নিন: বিন্দু, গ্রিড, ডোরা, কোণাকুণি, বা দাবার ছক।
2. আকৃতিগুলোর জন্য একটি অগ্রভাগের রং এবং টাইলের জন্য একটি পটভূমির রং টাইপ করুন বা বেছে নিন।
3. স্কেল (পিক্সেলে টাইলের আকার) এবং পুরুত্ব (বিন্দুর ব্যাসার্ধ বা রেখার পুরুত্ব) সংখ্যাসূচক ইনপুট সেট করুন।
4. সেটিংস খুলুন এবং আউটপুটকে SVG ও CSS-এর মধ্যে বদলাতে Format টগল ব্যবহার করুন।
5. লাইভ প্রিভিউ প্যাটার্নটি টাইল করতে দেখুন, তারপর SVG বা CSS কপি করুন, অথবা .svg ফাইলটি সংরক্ষণ করতে ডাউনলোড-এ ক্লিক করুন।

উদাহরণ

সচরাচর জিজ্ঞাসিত প্রশ্ন

আমি কোন কোন প্যাটার্ন তৈরি করতে পারি?

পাঁচটি টাইল-যোগ্য প্যাটার্ন: বিন্দু, গ্রিড, ডোরা, কোণাকুণি রেখা এবং একটি দাবার ছক। প্রতিটি একটি ছোট SVG টাইল হিসেবে আঁকা হয় যা নির্বিঘ্নে পুনরাবৃত্তি করে, তাই এটি যেকোনো আকারে ঝকঝকে থাকে এবং ফাইল খুব ছোট রাখে।

স্কেল ও পুরুত্ব কী নিয়ন্ত্রণ করে?

স্কেল হলো পিক্সেলে একটি টাইলের আকার, যা ঠিক করে পুনরাবৃত্ত আকৃতিগুলো কতটা দূরে। পুরুত্ব হলো টাইলের ভিতরে বিন্দুর ব্যাসার্ধ বা রেখার পুরুত্ব। পুরুত্ব স্কেলের সাপেক্ষে স্বয়ংক্রিয়ভাবে সীমিত করা হয় যাতে প্যাটার্ন কখনো টাইলটি অতিরিক্ত ভরে না ফেলে।

SVG ও CSS আউটপুটের মধ্যে পার্থক্য কী?

SVG আপনাকে একটি স্বতন্ত্র .svg ফাইল বা ইনলাইন ব্যবহারের জন্য কাঁচা মার্কআপ দেয়। CSS আপনাকে একটি background-image নিয়ম দেয় যা একটি data URI এবং background-repeat: repeat ব্যবহার করে, স্টাইলশিটে পেস্ট করার জন্য প্রস্তুত। দুটির মধ্যে বদলাতে সেটিংসে Format টগল ব্যবহার করুন।

আমি কি HEX টাইপ করার বদলে রং দৃশ্যত বেছে নিতে পারি?

হ্যাঁ। আপনার ব্রাউজারের নিজস্ব রং নির্বাচক খুলতে অগ্রভাগ বা পটভূমির ফিল্ডের পাশের রং চিপে ক্লিক করুন, অথবা সরাসরি #4f86f7-এর মতো একটি HEX মান টাইপ করুন। আপনি বদলানোর সঙ্গে সঙ্গে প্রিভিউ ও আউটপুট আপডেট হয়।

আমার রং বা ফাইল কি কোথাও আপলোড হয়?

না। প্যাটার্নটি সম্পূর্ণভাবে আপনার ব্রাউজারে একটি SVG স্ট্রিং হিসেবে তৈরি হয়, এবং ডাউনলোডটি স্থানীয়ভাবে একটি Blob হিসেবে তৈরি হয়। কোনো রং, কোড বা ফাইল কখনোই কোনো সার্ভারে পাঠানো হয় না, তাই এটি অফলাইনে কাজ করে এবং আপনার কাজ ব্যক্তিগত রাখে।