Gradient এবং Pattern তৈরি এবং ব্যবহার

এসভিজি (SVG) ফরম্যাটে gradient এবং pattern ব্যবহার করা হয় গ্রাফিক্সের রঙ এবং স্টাইল কাস্টমাইজ করতে। এগুলো এসভিজি গ্রাফিক্সে রঙের স্নিগ্ধ পরিবর্তন (gradation) এবং প্যাটার্নের মাধ্যমে ডিটেইল ও ডিজাইন আরও উন্নত করতে সহায়তা করে। এই দুটি উপাদানই গ্রাফিক্সে নতুন মাত্রা যোগ করে এবং ডিজাইনের গভীরতা তৈরি করতে ব্যবহৃত হয়।

Gradient তৈরি করা

Gradient এর মাধ্যমে একটি নির্দিষ্ট রঙ থেকে অন্য রঙে স্নিগ্ধভাবে পরিবর্তন ঘটানো হয়। এসভিজিতে দুটি ধরনের গ্রেডিয়েন্ট রয়েছে:

1. Linear Gradient: এই গ্রেডিয়েন্টে রঙের পরিবর্তন এক সরল রেখায় ঘটে।
2. Radial Gradient: এই গ্রেডিয়েন্টে রঙের পরিবর্তন একটি কেন্দ্রবিন্দু থেকে বাইরের দিকে ছড়ায়।

1. Linear Gradient

Linear Gradient তৈরি করতে linearGradient ট্যাগ ব্যবহার করা হয়। এটি একটি নির্দিষ্ট দিক থেকে অন্য দিক পর্যন্ত রঙের পরিবর্তন ঘটায়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="150" height="150" fill="url(#grad1)" />
</svg>

এখানে:

• <linearGradient> ট্যাগের মধ্যে x1, y1, x2, y2 অ্যাট্রিবিউটের মাধ্যমে গ্রেডিয়েন্টের দিক নির্ধারণ করা হয়েছে।
• stop ট্যাগটি রঙের পরিবর্তন নির্ধারণ করে। প্রথম stop এ হলুদ (yellow) এবং দ্বিতীয় stop এ লাল (red) রঙ।

2. Radial Gradient

Radial Gradient একটি কেন্দ্রে রঙ শুরু হয় এবং ধীরে ধীরে বাইরের দিকে পরিবর্তিত হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="50" fill="url(#grad2)" />
</svg>

এখানে:

• <radialGradient> ট্যাগের মাধ্যমে রঙের পরিবর্তন একটি কেন্দ্রে (50%, 50%) থেকে শুরু হয়ে বাইরের দিকে (100%) ছড়ানো হয়।

Pattern তৈরি করা

Pattern ট্যাগ ব্যবহার করে এসভিজিতে একটি নির্দিষ্ট ডিজাইন বা টেক্সচার তৈরি করা হয়, যা বারবার রিপিট হতে পারে। Pattern ব্যবহার করে গ্রাফিক্সের মধ্যে বিভিন্ন ধরনের টেক্সচার, ডিজাইন বা শেড তৈরি করা হয়।

Pattern উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern1" patternUnits="userSpaceOnUse" width="20" height="20">
      <circle cx="10" cy="10" r="8" fill="green" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="150" height="150" fill="url(#pattern1)" />
</svg>

এখানে:

• <pattern> ট্যাগটি একটি গ্রাফিক্যাল উপাদান (যেমন একটি বৃত্ত) তৈরি করে, যা ২০x২০ পিক্সেলে রিপিট হবে।
• fill="url(#pattern1)" ব্যবহার করে রেকট্যাঙ্গেলটি এই প্যাটার্নের সাথে পূর্ণ করা হয়েছে।

সারাংশ

• Gradient: এসভিজিতে রঙের স্নিগ্ধ পরিবর্তন করতে linear gradient এবং radial gradient ব্যবহার করা হয়। এগুলি বিভিন্ন দিক থেকে রঙের পরিবর্তন বা কেন্দ্র থেকে বাইরের দিকে রঙ পরিবর্তন ঘটায়।
• Pattern: Pattern ব্যবহার করে টেক্সচার বা ডিজাইন তৈরি করা হয়, যা গ্রাফিক্সে বারবার রিপিট হয়।

এসভিজি গ্রাফিক্সের মধ্যে gradient এবং pattern অত্যন্ত কার্যকরী উপাদান, যা ডিজাইনের মধ্যে গভীরতা, স্টাইল এবং গতিশীলতা আনে।