Complex Shapes তৈরি করতে Path ব্যবহার করা

এসভিজি (SVG) তে <path> একটি শক্তিশালী ট্যাগ যা জটিল এবং সৃজনশীল গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের রেখা, কেভ, আর্চ, এবং অন্যান্য জ্যামিতিক আকার তৈরি করতে সক্ষম। <path> ট্যাগটি বিশেষভাবে ব্যবহারকারীদের একাধিক পয়েন্ট এবং কেভের মাধ্যমে জটিল আকারের ডিজাইন তৈরিতে সাহায্য করে, যা অন্য কোন সাধারণ শেপ (যেমন বৃত্ত বা আয়তক্ষেত্র) দিয়ে সম্ভব নয়।

<path> ট্যাগের মাধ্যমে গ্রাফিক্স তৈরি করতে d অ্যাট্রিবিউট ব্যবহার করা হয়, যা পাথের ডেটা ধারণ করে। এই ডেটাতে একাধিক কমান্ড এবং পয়েন্ট থাকে যা পাথের আকার, রেখা এবং কেভ নির্ধারণ করে।

Path কমান্ডের মূল ধরণ

Path কমান্ডের মধ্যে কিছু মৌলিক ধরণ থাকে, যা গ্রাফিক্স তৈরির জন্য ব্যবহৃত হয়। এই কমান্ডগুলো হল:

• M (Move to): নতুন পয়েন্টে যাওয়ার জন্য ব্যবহৃত হয়।
• L (Line to): একটি সোজা রেখা আঁকতে ব্যবহৃত হয়।
• H (Horizontal line to): অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়।
• V (Vertical line to): উল্লম্ব রেখা আঁকতে ব্যবহৃত হয়।
• C (Cubic Bezier curve): একটি কিউবিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• S (Smooth cubic Bezier curve): একটি মসৃণ কিউবিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• Q (Quadratic Bezier curve): একটি কোয়াড্রাটিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• T (Smooth quadratic Bezier curve): একটি মসৃণ কোয়াড্রাটিক বেজিয়ার কেভ আঁকতে ব্যবহৃত হয়।
• A (Elliptical Arc): একটি বৃত্তাকার আর্ক আঁকতে ব্যবহৃত হয়।
• Z (Close path): পাথটি বন্ধ করতে ব্যবহৃত হয়, অর্থাৎ প্রথম পয়েন্টে ফিরে যাওয়া।

Complex Shape তৈরি করতে Path ব্যবহার করা

এখন, আমরা কিছু উদাহরণ দেখে বুঝবো কিভাবে d অ্যাট্রিবিউট ব্যবহার করে জটিল আকার তৈরি করা যায়।

উদাহরণ ১: একটি ট্রায়াঙ্গেল (Triangle)

একটি ট্রায়াঙ্গেল তৈরি করতে <path> ট্যাগের মাধ্যমে তিনটি পয়েন্টে সোজা রেখা আঁকতে হবে।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 50 150 L 150 150 L 100 50 Z" stroke="black" stroke-width="2" fill="lightgreen" />
</svg>

• M 50 150: পাথের শুরু পয়েন্ট (50, 150) তে গমন।
• L 150 150: সোজা রেখা আঁকুন (150, 150) পয়েন্টে।
• L 100 50: সোজা রেখা আঁকুন (100, 50) পয়েন্টে।
• Z: পাথটি বন্ধ করুন, অর্থাৎ প্রথম পয়েন্টে ফিরে যান।

উদাহরণ ২: কিউবিক বেজিয়ার কেভ (Cubic Bezier Curve)

একটি কিউবিক বেজিয়ার কেভ তৈরি করতে C কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="blue" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• C 40 10, 65 10, 95 80: কিউবিক বেজিয়ার কেভের জন্য তিনটি পয়েন্ট দেয়া হয়েছে, যা কেভের আকার নির্ধারণ করে।
• S 150 150, 180 80: দ্বিতীয় কেভটি একটি মসৃণ কিউবিক বেজিয়ার কেভ হিসেবে তৈরি হয়েছে।

উদাহরণ ৩: কোয়াড্রাটিক বেজিয়ার কেভ (Quadratic Bezier Curve)

কোয়াড্রাটিক বেজিয়ার কেভ তৈরি করতে Q কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 Q 95 10, 180 80" stroke="red" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• Q 95 10, 180 80: একটি কোয়াড্রাটিক বেজিয়ার কেভ তৈরি হয়েছে, যেখানে (95, 10) হল কন্ট্রোল পয়েন্ট এবং (180, 80) হল শেষ পয়েন্ট।

উদাহরণ ৪: বৃত্তাকার আর্ক (Elliptical Arc)

বৃত্তাকার আর্ক তৈরি করতে A কমান্ড ব্যবহার করা হয়।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 A 50 50 0 0 1 150 80" stroke="green" stroke-width="2" fill="transparent" />
</svg>

• M 10 80: শুরু পয়েন্ট (10, 80)।
• A 50 50 0 0 1 150 80: একটি বৃত্তাকার আর্ক আঁকা হয়েছে, যার রেডিয়াস ৫০ এবং শেষ পয়েন্ট (150, 80)।

Path Transformations

পাথের বিভিন্ন অংশে রূপান্তর (Transformation) প্রয়োগ করা যায়। এর জন্য transform অ্যাট্রিবিউট ব্যবহার করা হয়। এর মধ্যে রয়েছে:

• rotate(): আকারটি ঘোরানো।
• scale(): আকারের সাইজ পরিবর্তন করা।
• translate(): পাথটি স্থানান্তর করা।
• skewX() / skewY(): আকারটি খাড়া বা অনুভূমিকভাবে ভাঁজ করা।

উদাহরণ:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80" stroke="blue" stroke-width="2" fill="transparent" transform="rotate(45 95 80)" />
</svg>

এখানে পাথটি 45 ডিগ্রি ঘুরানো হয়েছে (কেন্দ্র (95, 80))।

সারাংশ

এসভিজি তে <path> ট্যাগ ব্যবহার করে খুবই জটিল এবং সৃজনশীল আকার তৈরি করা যায়। পাথ কমান্ডগুলির মাধ্যমে গ্রাফিক্সের বিভিন্ন ধরনের রেখা, কেভ, আর্চ এবং বিভিন্ন আকার আঁকা সম্ভব। এই ট্যাগের শক্তিশালী ক্ষমতা ওয়েব ডিজাইন, অ্যানিমেশন, এবং অন্যান্য গ্রাফিক্সের জন্য অত্যন্ত কার্যকরী।