প্রিমিয়াম মানের একটি SVG Pattern Generator Tool নিয়ে নিন ব্লগার এবং ওয়ার্ডপ্রেস এর জন্য। সম্পুর্ণ সেটাপ সহ

আসসালামুয়ালাইকুম বন্ধুরা

আজকের এই ব্লগপোস্টে আমি আপনাদের সাথে আলোচনা করবো একটি অনন্য ও প্রয়োজনীয় টুল নিয়ে, যার নাম SVG Pattern Generator Tool। আশাকরি এই টুলস সম্পর্কে আপনাদের মোটামুটি ধারণা আছে।আমরা জানি, ওয়েবসাইট বা ব্লগ সাজাতে গেলে অনেক সময় ইউনিক ব্যাকগ্রাউন্ড, শেপ বা প্যাটার্ন লাগতে পারে। তাই সাধারণত এ ধরনের কাজ করার জন্য গ্রাফিক্স সফটওয়্যার (যেমন – Photoshop, Illustrator) কিংবা জটিল কোড ব্যবহার করতে হয়। এতে সময় যেমন বেশি লাগে, তেমনি নতুনদের জন্য এগুলো শেখা এবং প্রয়োগ করাও কঠিন হয়ে পড়ে। যার কারনে নতুনদের জন্য আমার এই টুলসটি খুব দরকারি বলে মনে করি।

কারণ, এই টুলটির সাহায্যে আপনি খুব সহজে কয়েক মিনিটেই নিজের মতো করে সুন্দর SVG প্যাটার্ন বানাতে পারবেন। এটির সবচেয়ে ভালো দিক হলো – এটি সম্পূর্ণ ওয়েব-ভিত্তিক এবং ব্যবহার করতে কোনো সফটওয়্যার ইনস্টল করতে হবে না বা অন্য কোনো অতিরিক্ত ঝামেলা নেই।

তো বন্ধুরা শুরুর আগে এই SVG Pattern Generator Tool টির ফিচার গুলি এক নজরে দেখে নেই।

🌟 SVG Pattern Generator Tool এর ফিচারসমূহ

🎛️ পূর্ণ কাস্টমাইজেশন সুবিধা

এই টুলটিতে একটি শক্তিশালী কন্ট্রোল প্যানেল রয়েছে, যেখানে আপনি আপনার ডিজাইনকে নিজের মতো সাজাতে পারবেন। যেমন –

Color Picker: আপনার ইচ্ছেমতো রঙ নির্বাচন করতে পারবেন (Fill এবং Stroke দুটোই)।

Shape Selector: Circle, Square, Triangle, Hexagon ইত্যাদি বিভিন্ন শেপ বেছে নেওয়ার সুযোগ।

Size Control: আকৃতির সাইজ ছোট বা বড় করা যাবে।

Gap Control: প্রতিটি শেপের মধ্যে ফাঁক কতটুকু থাকবে সেটি ঠিক করা যাবে।

Rotation: প্যাটার্নকে নির্দিষ্ট ডিগ্রিতে ঘোরানো যাবে।

Opacity: স্বচ্ছতা নিয়ন্ত্রণ করে ফেইড বা হালকা ইফেক্ট দেওয়া যাবে।

👉 সবচেয়ে মজার বিষয় হলো, আপনি যেই সেটিংস পরিবর্তন করবেন তা সাথে সাথেই Live Preview তে দেখা যাবে।

👀 লাইভ প্রিভিউ সুবিধা

কোনো ডিজাইন কল্পনায় ভেবে দেখা অনেক সময় কঠিন। কিন্তু এই টুলে সেই ঝামেলা নেই। প্রতিটি পরিবর্তন মুহূর্তের মধ্যে প্রিভিউতে দেখা যায়। ফলে ডিজাইন করার সময় বারবার ট্রায়াল-এন্ড-এরর করতে হয় না।

💾 প্যাটার্ন সেভ ও ম্যানেজমেন্ট

আপনি যদি কোনো সুন্দর ডিজাইন তৈরি করেন এবং সেটি সংরক্ষণ করতে চান, তবে টুলটির Save Pattern অপশন ব্যবহার করতে পারেন।

আপনার ডিজাইনকে একটি নাম দিয়ে Save করতে পারবেন।

পরে আবার সহজেই Load করে ব্যবহার করতে পারবেন।

অপ্রয়োজনীয় ডিজাইন চাইলে Delete করে ফেলতে পারবেন।

এতে করে আপনার প্রিয় ডিজাইনগুলো হারিয়ে যাবে না এবং ভবিষ্যতে ব্যবহার করাও সহজ হবে।

📋 Copy SVG Code – সরাসরি কোড ব্যবহার করুন

ডিজাইন তৈরি করার পর হয়তো আপনার সেটি ওয়েবসাইটে ব্যবহার করার প্রয়োজন হতে পারে। এজন্য টুলটিতে আছে Copy SVG Code বাটন।

ওটিতে ক্লিক করলেই পুরো SVG কোড কপি হয়ে যাবে, যা আপনি –

ব্লগ বা ওয়েবসাইটে ট্যাগের ভেতরে ব্যবহার করতে পারবেন।

ওয়েব প্রোজেক্টে সরাসরি পেস্ট করতে পারবেন।

কিংবা গ্রাফিক্স টুলে প্রয়োজনে ব্যবহার করতে পারবেন।

🎲 Randomize Button – সৃজনশীল আইডিয়া পাওয়ার সহজ উপায়

সবসময় আমরা নিজের মতো কাস্টমাইজ করতে চাই না। অনেক সময় নতুন কিছু চাই, যেটা আমাদের মাথায় আসছে না।

এই ক্ষেত্রে টুলটির Randomize বাটন অনেক কাজে দেয়। এক ক্লিকেই রঙ, আকার, সাইজ সব এলোমেলো হয়ে নতুন ডিজাইন তৈরি হয়ে যাবে।

🔄 Reset Button – শুরু থেকে শুরু করুন

আপনি যদি বারবার পরিবর্তন করতে করতে ডিজাইনটা গুলিয়ে ফেলেন, তবে Reset বাটনে ক্লিক করলেই সব সেটিংস ডিফল্ট অবস্থায় চলে আসবে।

📂 Export Option – ডাউনলোড করে রাখুন

আরেকটি চমৎকার সুবিধা হলো, আপনার তৈরি করা প্যাটার্ন .svg ফাইল আকারে Export করতে পারবেন।

এটি আপনি কম্পিউটারে সংরক্ষণ করে যেকোনো সময় ব্যবহার করতে পারবেন।

🎯 কারা সবচেয়ে বেশি উপকৃত হবেন?

1. Web Designers → ওয়েবসাইটে নতুন ব্যাকগ্রাউন্ড তৈরির জন্য।

2. Frontend Developers → কোড লাইটওয়েট রাখতে কাস্টম SVG প্যাটার্ন ব্যবহার করার জন্য।

3. Bloggers → ব্লগ পোস্টে ব্যানার, হেডার বা ডেকোরেশনে SVG ব্যাকগ্রাউন্ড যোগ করার জন্য।

4. Graphics Enthusiasts → সৃজনশীলতার অনুশীলন ও নতুন আইডিয়া খোঁজার জন্য।

✅ SVG Pattern Generator Tool কেন বিশেষ?

এটি একদম ফ্রি।

কোনো সফটওয়্যার ইনস্টল করার প্রয়োজন নেই।

ইন্টারফেস সহজ এবং ব্যবহারবান্ধব।

রিয়েল-টাইম প্রিভিউ পাওয়া যায়।

সেভ/লোড অপশন থাকায় প্রিয় ডিজাইনগুলো হারায় না।

এক ক্লিকে কোড কপি করা যায়।

📌 ব্যবহার করার কিছু টিপস

ব্লগ বা ওয়েবসাইটের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করার সময় SVG ফাইল অপ্টিমাইজ করে নিন।

খুব বেশি জটিল শেপ ব্যবহার না করাই ভালো, এতে ওয়েবসাইটের লোড টাইম কমবে।

Export করা SVG ফাইল সরাসরি CSS background-image হিসেবেও ব্যবহার করতে পারবেন।

Randomize অপশন ব্যবহার করলে অনেক ইউনিক আইডিয়া পাওয়া যায়, তবে প্রয়োজনে সেটিংস কাস্টমাইজ করে নিলে আরও সুন্দর হবে।

তো বন্ধুরা আশারাখি ফিচার গুলি দেখে নিয়েছেন, আসুন এবার blogger দিয়ে সেটাপের কাজ শুরু করি।

🛠️ Blogger-এ SVG Pattern Generator Tool সেটআপ করার গাইড

ধাপ–১: Blogger ড্যাশবোর্ডে লগইন করুন

👉 Blogger Dashboard এ গিয়ে আপনার ব্লগে লগইন করুন।

ধাপ–২: নতুন পেজ তৈরি করুন

1. বাঁদিকের মেনু থেকে Pages → New Page(+ icon ) এ ক্লিক করুন।

2. নতুন পেজের নাম দিন, যেমন – SVG Pattern Generator বা Design Tool।

ধাপ–৩: HTML মোডে যান

1. পেজ এডিটরে ঢোকার পর উপরে Write / HTML নামে ট্যাব থাকবে।

2. সেখানে HTML মোড সিলেক্ট করুন।

ধাপ–৪: কোড পেস্ট করুন

👉 এখন এখান থেকে টুলের পুরো HTML, CSS আর JavaScript কোড একসাথে কপি করে নিচের ছবির মতো করে পেস্ট করুন।

ধাপ–৫: পেজ পাবলিশ করুন

1. সব কোড দেওয়ার পর Publish বাটনে ক্লিক করুন।

2. পেজটা ভিজিট করে দেখুন টুল সঠিকভাবে কাজ করছে কিনা।

এই ছিলো ব্লগার এর জন্য সেটাপ। এখন আমরা ওয়ার্ডপ্রেস এ সেটাপের উপায় দেখবো। বন্ধুরা ওয়ার্ডপ্রেস এর জন্য এই টুলসটিকে আমি প্লাগিন হিসেবে বানিয়েছি, যাতে করে ওয়ার্ডপ্রেস ইমপ্লিমেন্ট আরো সহজ হয়।

তো চলুন এবার ওয়ার্ডপ্রেস সেটাপ দেখে নেওয়া যাক।

প্রথমে নিচের লিঙ্ক থেকে প্লাগিনটি ডাওনলোড করে নিন।

Download Now

🛠️ WordPress-এ SVG Pattern Generator Plugin সেটআপ করার ধাপসমূহ

ধাপ–১: প্লাগইন আপলোড

1.  WordPress Dashboard-এ লগইন করুন।

2. Plugins → Add New → Upload Plugin এ যান।

3. আপনার বানানো প্লাগইনের .zip ফাইল সিলেক্ট করে Install Now দিন।

4. তারপর Activate ক্লিক করুন।

ধাপ–২: শর্টকোড / ব্লক ব্যবহার

👉 [svg_pattern] কোডটি যেখানেই বসাবেন সেখানেই এই সেভ করা svg দেখাবে। আর [svgpg_frontend] এই কোড যেখানে বসাবেন সেখানেই ফুল টুলস দেখাবে।

তাহলে আপনি যেকোনো Page / Post-এ গিয়ে এই শর্টকোড লিখলেই টুল কাজ করবে।

👉 যদি Gutenberg block হিসেবে বানানো হয়ে থাকে, তাহলে Add Block → Widgets → SVG Pattern Generator থেকে সরাসরি ব্লক বসাতে পারবেন।

ধাপ–৩: আলাদা পেজ বানানো

1. পেজেস → অ্যাড নিউ এ যান।

2. পেজের নাম দিন – SVG Pattern Generator

3. কন্টেন্ট এডিটরে আপনার শর্টকোড লিখুন [svgpg_frontend]। ঠিক নিচের ছবির মতো করে।

4. পেজ পাবলিশ করুন।

ধাপ–৪: মেনুতে যুক্ত করুন

1. Appearance → Menus এ যান।

2. সদ্য তৈরি করা SVG Pattern Generator পেজটি মেনুতে যোগ করুন।

3. Save করুন।

Blogger+  wordpress সেটাপ শেষ, এখন শুধু উপভোগ করতে থাকুন। যদি ফুল HTML files পেতে চান তাহলে কমেন্ট করে জানায়েন আমি দিয়ে দিবো।

আজকের মতো এখানেই শেষ করতেছি। কোথাও যদি বুঝতে অসুবিধে হয় অবশ্যই কমেন্ট করে জানাবেন।