সিএসএসে তরঙ্গায়িত আকার এবং প্যাটার্নগুলি কীভাবে তৈরি করবেন

তরঙ্গ সম্ভবত CSS-এ তৈরি করা সবচেয়ে কঠিন আকারগুলির মধ্যে একটি। আমরা সর্বদা এটির মতো বৈশিষ্ট্যগুলির সাথে আনুমানিক চেষ্টা করি border-radius এবং প্রচুর ম্যাজিক সংখ্যা যতক্ষণ না আমরা এমন কিছু পাই যা কিছুটা কাছাকাছি মনে হয়। এবং আমরা এমনকি তরঙ্গায়িত নিদর্শন পেতে আগে, যা আরো কঠিন.

"এসভিজি এটা!" আপনি বলতে পারেন, এবং আপনি সম্ভবত সঠিক যে এটি যেতে একটি ভাল উপায়. কিন্তু আমরা দেখব যে CSS চমৎকার তরঙ্গ তৈরি করতে পারে এবং এর জন্য কোডটি সব পাগল হতে হবে না। এবং কি অনুমান? আমার আছে একটি অনলাইন জেনারেটর এটাকে আরও তুচ্ছ করতে!

আপনি যদি জেনারেটরের সাথে খেলেন, তাহলে আপনি দেখতে পাবেন যে CSS যেটি ছিটকে দেয় তা হল শুধুমাত্র দুটি গ্রেডিয়েন্ট এবং একটি CSS মাস্ক প্রপার্টি — শুধুমাত্র এই দুটি জিনিস এবং আমরা যেকোন ধরনের তরঙ্গ আকৃতি বা প্যাটার্ন তৈরি করতে পারি। উল্লেখ করার মতো নয় যে আমরা এটিতে থাকাকালীন তরঙ্গের আকার এবং বক্রতা সহজেই নিয়ন্ত্রণ করতে পারি।

কিছু মান দেখতে "জাদু সংখ্যাকিন্তু আসলে তাদের পিছনে যুক্তি আছে এবং আমরা কোডটি ব্যবচ্ছেদ করব এবং তরঙ্গ তৈরির পিছনে সমস্ত রহস্য আবিষ্কার করব।

এই নিবন্ধটি একটি অনুসরণ আপ আগের একটি যেখানে আমি বিভিন্ন ধরনের জিগ-জ্যাগ, স্কোপড, স্ক্যালপড এবং হ্যাঁ, তরঙ্গায়িত বর্ডার বর্ডার তৈরি করেছি। আমি এই নিবন্ধটি পরীক্ষা করার সুপারিশ করছি কারণ এটি একই কৌশল ব্যবহার করে যা আমরা এখানে কভার করব, তবে আরও বিশদে।

তরঙ্গ পিছনে গণিত

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

দুটি বৃত্তের আকার ব্যবহার করে একটি সাধারণ উদাহরণ দিয়ে শুরু করা যাক:

আমাদের একে অপরের পাশে একই ব্যাসার্ধ সহ দুটি বৃত্ত রয়েছে। আপনি কি সেই লাল রেখা দেখতে পাচ্ছেন? এটি প্রথম বৃত্তের উপরের অর্ধেক এবং দ্বিতীয়টির নীচের অর্ধেকটি কভার করে। এখন কল্পনা করুন যে আপনি সেই লাইনটি নিন এবং এটি পুনরাবৃত্তি করুন।

আমরা ইতিমধ্যে তরঙ্গ দেখতে. এখন নীচের অংশ (বা উপরের অংশ) পূরণ করা যাক নিম্নলিখিত পেতে:

টাডা ! আমাদের একটি তরঙ্গায়িত আকৃতি রয়েছে এবং একটি যা আমরা বৃত্তের ব্যাসার্ধের জন্য একটি পরিবর্তনশীল ব্যবহার করে নিয়ন্ত্রণ করতে পারি। এটি আমাদের তৈরি করা সবচেয়ে সহজ তরঙ্গগুলির মধ্যে একটি এবং এটিই আমি দেখিয়েছি৷ this আগের প্রবন্ধে

আসুন প্রথম চিত্রটি গ্রহণ করে এবং বৃত্তগুলিকে একটু সরানোর মাধ্যমে কিছুটা জটিলতা যোগ করি:

আমাদের এখনও একই ব্যাসার্ধের দুটি বৃত্ত আছে কিন্তু তারা আর অনুভূমিকভাবে সারিবদ্ধ নয়। এই ক্ষেত্রে, লাল রেখা আর প্রতিটি বৃত্তের অর্ধেক এলাকা জুড়ে না, বরং একটি ছোট এলাকা জুড়ে। এই এলাকা ড্যাশ করা লাল রেখা দ্বারা সীমাবদ্ধ। এই রেখাটি বিন্দু অতিক্রম করে যেখানে উভয় বৃত্ত মিলিত হয়।

এখন সেই লাইনটি নিন এবং এটি পুনরাবৃত্তি করুন এবং আপনি আরেকটি তরঙ্গ পাবেন, একটি মসৃণ।

আমি মনে করি আপনি ধারণা পেতে. বৃত্তের অবস্থান এবং আকার নিয়ন্ত্রণ করে, আমরা আমাদের ইচ্ছামত যে কোন তরঙ্গ তৈরি করতে পারি। আমরা এমনকি তাদের জন্য ভেরিয়েবল তৈরি করতে পারি, যা আমি কল করব P এবং S, যথাক্রমে।

আপনি সম্ভবত লক্ষ্য করেছেন যে, অনলাইন জেনারেটরে, আমরা দুটি ইনপুট ব্যবহার করে তরঙ্গ নিয়ন্ত্রণ করি। তারা উপরের ভেরিয়েবল ম্যাপ. S হল "তরঙ্গের আকার" এবং P হল "তরঙ্গের বক্রতা"।

আমি সংজ্ঞায়িত করছি P as P = m*S কোথায় m তরঙ্গের বক্রতা আপডেট করার সময় আপনি যে পরিবর্তনশীলকে সামঞ্জস্য করেন। এটি আমাদের সবসময় একই বক্রতা থাকতে দেয়, এমনকি যদি আমরা S আপডেট করি।

m মধ্যে যেকোনো মান হতে পারে 0 এবং 2. 0 আমাদের প্রথম বিশেষ কেস দেবে যেখানে উভয় চেনাশোনা অনুভূমিকভাবে সারিবদ্ধ। 2 এক ধরনের সর্বোচ্চ মান। আমরা বড় যেতে পারি, কিন্তু কিছু পরীক্ষার পরে আমি উপরের কিছু খুঁজে পেয়েছি 2 খারাপ, সমতল আকার উত্পাদন করে।

আসুন আমাদের বৃত্তের ব্যাসার্ধ ভুলে যাই না! এটি ব্যবহার করেও সংজ্ঞায়িত করা যেতে পারে S এবং P এটার মত:

R = sqrt(P² + S²)/2

কখন P সমান 0, আমাদের থাকবে R = S/2.

এই সবগুলোকে CSS-এ গ্রেডিয়েন্টে রূপান্তর করার জন্য আমাদের কাছে সবকিছু আছে!

গ্রেডিয়েন্ট তৈরি করা হচ্ছে

আমাদের তরঙ্গ বৃত্ত ব্যবহার করে, এবং বৃত্ত সম্পর্কে কথা বলার সময় আমরা রেডিয়াল গ্রেডিয়েন্ট সম্পর্কে কথা বলি। এবং যেহেতু দুটি বৃত্ত আমাদের তরঙ্গকে সংজ্ঞায়িত করে, আমরা যৌক্তিকভাবে দুটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করব।

আমরা যেখানে নির্দিষ্ট ক্ষেত্রে দিয়ে শুরু করব P সমান 0. এখানে প্রথম গ্রেডিয়েন্টের দৃষ্টান্ত রয়েছে:

এই গ্রেডিয়েন্টটি প্রথম বক্রতা তৈরি করে যখন পুরো নীচের অংশটি ভরাট করে - তরঙ্গের "জল" তাই বলার জন্য।

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

সার্জারির --size পরিবর্তনশীল ব্যাসার্ধ এবং রেডিয়াল গ্রেডিয়েন্টের আকার নির্ধারণ করে। যদি আমরা এর সাথে তুলনা করি S পরিবর্তনশীল, তারপর এটি সমান S/2.

এখন দ্বিতীয় গ্রেডিয়েন্ট যোগ করা যাক:

দ্বিতীয় গ্রেডিয়েন্ট আমাদের তরঙ্গ সম্পূর্ণ করার জন্য একটি বৃত্ত ছাড়া আর কিছুই নয়:

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

আপনি যদি চেক পূর্ববর্তী নিবন্ধ আপনি দেখতে পাবেন যে আমি কেবল সেখানে যা করেছি তা পুনরাবৃত্তি করছি।

আমি উভয় নিবন্ধ অনুসরণ করেছি কিন্তু গ্রেডিয়েন্ট কনফিগারেশন একই নয়।

কারণ আমরা বিভিন্ন গ্রেডিয়েন্ট কনফিগারেশন ব্যবহার করে একই ফলাফলে পৌঁছাতে পারি। আপনি যদি উভয় কনফিগারেশনের তুলনা করেন তবে আপনি প্রান্তিককরণে একটি সামান্য পার্থক্য লক্ষ্য করবেন, তবে কৌশলটি একই। আপনি গ্রেডিয়েন্টের সাথে অপরিচিত হলে এটি বিভ্রান্তিকর হতে পারে, কিন্তু চিন্তা করবেন না। কিছু অনুশীলনের সাথে, আপনি তাদের সাথে অভ্যস্ত হয়ে যাবেন এবং আপনি নিজেই দেখতে পাবেন যে বিভিন্ন বাক্য গঠন একই ফলাফলের দিকে নিয়ে যেতে পারে।

এখানে আমাদের প্রথম তরঙ্গের জন্য সম্পূর্ণ কোড:

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

এখন আসুন এই কোডটি নিন এবং এটিকে সামঞ্জস্য করি যেখানে আমরা একটি ভেরিয়েবল প্রবর্তন করি যা এটিকে আমাদের ইচ্ছামত যেকোনো তরঙ্গ তৈরি করার জন্য সম্পূর্ণরূপে পুনরায় ব্যবহারযোগ্য করে তোলে। যেমনটি আমরা পূর্ববর্তী বিভাগে দেখেছি, মূল কৌশল হল বৃত্তগুলিকে সরানো যাতে তারা আর সারিবদ্ধ না থাকে তাই আসুন প্রতিটির অবস্থান আপডেট করি। আমরা প্রথমটি উপরে এবং দ্বিতীয়টি নীচে নিয়ে যাব।

আমাদের কোড এই মত দেখাবে:

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

নতুন পরিচয় দিলাম --p পরিবর্তনশীল যা প্রতিটি বৃত্তের কেন্দ্রের অবস্থান নির্ধারণ করতে এটি ব্যবহার করে। প্রথম গ্রেডিয়েন্ট ব্যবহার করা হয় 50% calc(-1*var(--p)), তাই দ্বিতীয়টি ব্যবহার করার সময় এর কেন্দ্র উপরে চলে যায় calc(var(--size) + var(--p)) এটি নিচে সরাতে

একটি ডেমো হাজার শব্দের মূল্য:

চেনাশোনাগুলি সারিবদ্ধ নয় বা একে অপরকে স্পর্শ করে না। আমরা তাদের ব্যাসার্ধ পরিবর্তন না করেই তাদের দূরে দূরে রেখেছি, তাই আমরা আমাদের তরঙ্গ হারিয়ে ফেলেছি। কিন্তু নতুন ব্যাসার্ধ গণনা করার জন্য আমরা আগে যে গণিত ব্যবহার করেছিলাম তা ব্যবহার করে আমরা জিনিসগুলি ঠিক করতে পারি। মনে রাখবেন, যে R = sqrt(P² + S²)/2. আমাদের ক্ষেত্রে, --size সমান S/2; জন্য একই --p যা সমান P/2 যেহেতু আমরা উভয় বৃত্ত সরানো হয়. সুতরাং, তাদের কেন্দ্র বিন্দুর মধ্যে দূরত্ব এর মানের দ্বিগুণ --p এই জন্য:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

যে আমাদের একটি ফলাফল দেয় 55.9px.

আমাদের তরঙ্গ ফিরে এসেছে! আসুন সেই সমীকরণটি আমাদের CSS-এ প্লাগ করি:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

এটি বৈধ CSS কোড। sqrt() স্পেসিফিকেশনের অংশ, কিন্তু যখন আমি এটি লিখছি, এটির জন্য কোন ব্রাউজার সমর্থন নেই। এর মানে হল যে মান গণনা করার জন্য আমাদের জাভাস্ক্রিপ্ট বা Sass এর একটি ছিটা দরকার যতক্ষণ না আমরা আরও বিস্তৃত হচ্ছি sqrt() সমর্থন।

এটি বেশ দারুন শীতল: শীতল তরঙ্গ পেতে দুটি গ্রেডিয়েন্ট লাগে যা আপনি ব্যবহার করে যেকোনো উপাদানে প্রয়োগ করতে পারেন mask সম্পত্তি আর কোন ট্রায়াল এবং ত্রুটি নেই - আপনার যা দরকার তা হল দুটি ভেরিয়েবল আপডেট করা এবং আপনি যেতে পারেন!

ঢেউ বিপরীত

আমরা যদি তরঙ্গগুলি অন্য দিকে যেতে চাই, যেখানে আমরা "জল" এর পরিবর্তে "আকাশ" ভর্তি করছি। বিশ্বাস করুন বা না করুন, আমাদের যা করতে হবে তা হল দুটি মান আপডেট করা:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

আমি সেখানে যা করেছি তা হল একটি অফসেট যোগ করার সমান 100%, উপরে হাইলাইট করা হয়েছে। এখানে ফলাফল:

আমরা এটিকে আরও সহজ করতে কীওয়ার্ড মান ব্যবহার করে আরও বন্ধুত্বপূর্ণ বাক্য গঠন বিবেচনা করতে পারি:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

আমরা ব্যবহার করছি left এবং bottom পার্শ্ব এবং অফসেট নির্দিষ্ট করার জন্য কীওয়ার্ড। ডিফল্টরূপে, ব্রাউজার ডিফল্ট করে left এবং top - তাই আমরা ব্যবহার করি 100% উপাদানটিকে নীচে সরাতে। বাস্তবে, আমরা এটি থেকে সরানো হয় top by 100%, তাই এটা সত্যিই বলার মত একই bottom. গণিতের চেয়ে পড়া অনেক সহজ!

এই আপডেট করা সিনট্যাক্সের সাথে, আমাদের যা করতে হবে তা হল অদলবদল করা bottom উন্নত top — বা তদ্বিপরীত — তরঙ্গের দিক পরিবর্তন করতে।

এবং আপনি যদি উপরের এবং নীচের উভয় তরঙ্গ পেতে চান, আমরা একটি একক ঘোষণায় সমস্ত গ্রেডিয়েন্ট একত্রিত করি:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

আপনি যদি কোডটি পরীক্ষা করেন, আপনি দেখতে পাবেন যে সমস্ত গ্রেডিয়েন্ট একত্রিত করার পাশাপাশি, আমি তাদের উচ্চতাও কমিয়েছি 100% থেকে 51% যাতে তারা উভয় উপাদান অর্ধেক আবরণ. হ্যাঁ, 51%. ফাঁক এড়াতে একটি ছোট ওভারল্যাপের জন্য আমাদের সেই সামান্য অতিরিক্ত শতাংশের প্রয়োজন।

বাম এবং ডান দিক সম্পর্কে কি?

এটা আপনার বাড়ির কাজ! উপরের এবং নীচের দিকগুলির সাথে আমরা যা করেছি তা নিন এবং ডান এবং বাম মানগুলি পেতে মানগুলি আপডেট করার চেষ্টা করুন। চিন্তা করবেন না, এটি সহজ এবং শুধুমাত্র আপনাকে যা করতে হবে তা হল মান অদলবদল করা।

আপনার সমস্যা হলে, আপনি সবসময় ব্যবহার করতে পারেন অনলাইন জেনারেটর কোড চেক করতে এবং ফলাফলটি কল্পনা করতে।

তরঙ্গায়িত লাইন

এর আগে, আমরা একটি লাল রেখা ব্যবহার করে আমাদের প্রথম তরঙ্গ তৈরি করেছি তারপর উপাদানটির নীচের অংশটি পূরণ করেছি। কিভাবে যে তরঙ্গায়িত লাইন সম্পর্কে? এটাও একটা ঢেউ! আরও ভাল হয় যদি আমরা একটি পরিবর্তনশীল দিয়ে এর পুরুত্ব নিয়ন্ত্রণ করতে পারি যাতে আমরা এটি পুনরায় ব্যবহার করতে পারি। চল এটা করি!

আমরা স্ক্র্যাচ থেকে শুরু করতে যাচ্ছি না বরং আগের কোডটি নিয়ে এটি আপডেট করব। প্রথম জিনিসটি হল গ্রেডিয়েন্টের রঙ স্টপ আপডেট করা। উভয় গ্রেডিয়েন্ট একটি স্বচ্ছ রঙ থেকে একটি অস্বচ্ছ রং থেকে শুরু হয়, অথবা এর বিপরীতে। একটি লাইন বা সীমানা অনুকরণ করতে, আমাদের স্বচ্ছ থেকে শুরু করতে হবে, অস্বচ্ছতে যেতে হবে, তারপর আবার স্বচ্ছ-এ ফিরে যেতে হবে:

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

আমি মনে করি আপনি ইতিমধ্যে অনুমান করেছেন যে --b পরিবর্তনশীল আমরা লাইন বেধ নিয়ন্ত্রণ ব্যবহার করছি কি. আমাদের গ্রেডিয়েন্টে এটি প্রয়োগ করা যাক:

হ্যাঁ, ফলাফল একটি তরঙ্গায়িত লাইন থেকে অনেক দূরে। কিন্তু ঘনিষ্ঠভাবে তাকালে, আমরা দেখতে পাচ্ছি যে একটি গ্রেডিয়েন্ট সঠিকভাবে নীচের বক্রতা তৈরি করছে। সুতরাং, আমাদের যা করতে হবে তা হল দ্বিতীয় গ্রেডিয়েন্ট সংশোধন করা। একটি পূর্ণ বৃত্ত রাখার পরিবর্তে, অন্য গ্রেডিয়েন্টের মতো আংশিক একটি তৈরি করা যাক।

এখনও দূরে, কিন্তু আমরা উভয় বক্রতা আমাদের প্রয়োজন আছে! আপনি যদি কোডটি পরীক্ষা করেন, আপনি দেখতে পাবেন যে আমাদের দুটি অভিন্ন গ্রেডিয়েন্ট রয়েছে। পার্থক্য শুধুমাত্র তাদের অবস্থান:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

এখন আমাদের চূড়ান্ত আকারের জন্য আকার এবং অবস্থান সামঞ্জস্য করতে হবে। পূর্ণ-উচ্চতার জন্য আমাদের আর গ্রেডিয়েন্টের প্রয়োজন নেই, তাই আমরা প্রতিস্থাপন করতে পারি 100% এর সাথে:

/* Size plus thickness */
calc(var(--size) + var(--b))

এই মানের পিছনে কোন গাণিতিক যুক্তি নেই। এটি শুধুমাত্র বক্রতা জন্য যথেষ্ট বড় হতে হবে. আমরা কিছুক্ষণের মধ্যে প্যাটার্নে এর প্রভাব দেখতে পাব। ইতিমধ্যে, আসুন গ্রেডিয়েন্টগুলিকে উল্লম্বভাবে কেন্দ্রে রাখতে অবস্থান আপডেট করি:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

এখনও পুরোপুরি নেই:

একটি গ্রেডিয়েন্টকে কিছুটা নিচে এবং অন্যটিকে কিছুটা উপরে সরাতে হবে। উভয়ই তাদের উচ্চতার অর্ধেক দ্বারা সরানো প্রয়োজন।

আমরা প্রায় সেখানে! ব্যাসার্ধের একটি নিখুঁত ওভারল্যাপ করার জন্য আমাদের একটি ছোট ফিক্স প্রয়োজন। উভয় লাইন অর্ধেক সীমানা দ্বারা অফসেট করা প্রয়োজন (--b) বেধ:

আমরা এটা বুঝতে পেরেছি! একটি নিখুঁত তরঙ্গায়িত লাইন যা আমরা কয়েকটি ভেরিয়েবল নিয়ন্ত্রণ করে সহজেই সামঞ্জস্য করতে পারি:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

আমি জানি যুক্তিটা বুঝতে একটু লাগে। এটা ঠিক এবং আমি যেমন বলেছি, সিএসএস-এ একটি তরঙ্গায়িত আকৃতি তৈরি করা সহজ নয়, এর পিছনে জটিল গণিতের কথা উল্লেখ করা যায় না। যে কারণে অনলাইন জেনারেটর একটি জীবন রক্ষাকারী — আপনি সহজেই চূড়ান্ত কোড পেতে পারেন এমনকি যদি আপনি এটির পিছনের যুক্তিটি পুরোপুরি বুঝতে না পারেন।

তরঙ্গায়িত নিদর্শন

আমরা এইমাত্র তৈরি করা তরঙ্গায়িত লাইন থেকে একটি প্যাটার্ন তৈরি করতে পারি!

আরে না, প্যাটার্নের কোড বোঝা আরও কঠিন হবে!

একেবারেই না! আমরা ইতিমধ্যে কোড আছে. আমাদের যা করতে হবে তা হল অপসারণ করা repeat-x আমরা ইতিমধ্যে যা আছে, এবং tada থেকে. 🎉

একটি সুন্দর তরঙ্গায়িত প্যাটার্ন। যে সমীকরণটি আমি বলেছিলাম তা মনে আছে আমরা আবার দেখতে চাই?

/* Size plus thickness */
calc(var(--size) + var(--b))

ঠিক আছে, এটিই প্যাটার্নের লাইনের মধ্যে দূরত্ব নিয়ন্ত্রণ করে। আমরা এটি থেকে একটি পরিবর্তনশীল তৈরি করতে পারি, তবে আরও জটিলতার প্রয়োজন নেই। আমি জেনারেটরে এটির জন্য একটি পরিবর্তনশীলও ব্যবহার করছি না। হয়তো আমি পরে পরিবর্তন করব।

এখানে একই প্যাটার্ন একটি ভিন্ন দিকে যাচ্ছে:

আমি আপনাকে সেই ডেমোতে কোডটি প্রদান করছি, কিন্তু আমি আপনাকে এটিকে ব্যবচ্ছেদ করতে চাই এবং বুঝতে চাই যে এটি ঘটতে আমি কী পরিবর্তন করেছি।

কোড সরলীকরণ

সমস্ত পূর্ববর্তী ডেমোতে, আমরা সর্বদা সংজ্ঞায়িত করি --size এবং --p স্বাধীনভাবে কিন্তু আপনার মনে আছে কিভাবে আমি আগে উল্লেখ করেছি যে অনলাইন জেনারেটর মূল্যায়ন করে P সমান হিসাবে m*S, কোথায় m তরঙ্গের বক্রতা নিয়ন্ত্রণ করে? একটি নির্দিষ্ট গুণক সংজ্ঞায়িত করে, আমরা একটি নির্দিষ্ট তরঙ্গের সাথে কাজ করতে পারি এবং কোডটি সহজ হতে পারে। এটি আমাদের বেশিরভাগ ক্ষেত্রেই প্রয়োজন হবে: একটি নির্দিষ্ট তরঙ্গায়িত আকার এবং এর আকার নিয়ন্ত্রণ করার জন্য একটি পরিবর্তনশীল।

আসুন আমাদের কোড আপডেট করি এবং পরিচয় করিয়ে দেই m পরিবর্তনশীল:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

আপনি দেখতে পারেন, আমাদের আর প্রয়োজন নেই --p পরিবর্তনশীল আমি এটি দিয়ে প্রতিস্থাপন করেছি var(--m)*var(--size), এবং সেই অনুযায়ী কিছু গণিত অপ্টিমাইজ করে। এখন, যদি আমরা একটি নির্দিষ্ট তরঙ্গায়িত আকারের সাথে কাজ করতে চাই, আমরা বাদ দিতে পারি --m পরিবর্তনশীল এবং এটি একটি নির্দিষ্ট মান দিয়ে প্রতিস্থাপন করুন। এর চেষ্টা করা যাক .8 উদাহরণ স্বরূপ.

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

দেখুন কোড এখন কিভাবে সহজ হয়? আপনার তরঙ্গ নিয়ন্ত্রণ করার জন্য শুধুমাত্র একটি ভেরিয়েবল, এছাড়াও আপনাকে আর নির্ভর করতে হবে না sqrt() যার কোন ব্রাউজার সাপোর্ট নেই!

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

এই পদ্ধতির সীমাবদ্ধতা

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

অন্যান্য ক্ষেত্রে, এটি কিছু রাউন্ডিংয়ের সাথে সম্পর্কিত সমস্যা যা তরঙ্গের মধ্যে বিভ্রান্তিকর এবং ফাঁক তৈরি করবে:

এটি বলেছিল, আমি এখনও মনে করি যে পদ্ধতিটি আমরা কভার করেছি তা একটি ভাল রয়ে গেছে কারণ এটি বেশিরভাগ ক্ষেত্রে মসৃণ তরঙ্গ তৈরি করে এবং আমরা এটি নিখুঁত না হওয়া পর্যন্ত বিভিন্ন মান নিয়ে খেলে খারাপ ফলাফলগুলি সহজেই এড়াতে পারি।

মোড়ক উম্মচন

আমি আশা করি এই নিবন্ধের পরে, আপনি একটি তরঙ্গায়িত আকৃতি বা প্যাটার্ন তৈরি করার জন্য ট্রায়াল এবং ত্রুটির সাথে ঘোরাঘুরি করবেন না। এছাড়াও অনলাইন জেনারেটরের কাছে, আপনি চান যে কোনো ধরনের তরঙ্গ তৈরি করার পিছনে আপনার সমস্ত গণিত রহস্য রয়েছে!

নিবন্ধটি এখানে শেষ হয় কিন্তু এখন আপনার কাছে অভিনব ডিজাইন তৈরি করার জন্য একটি শক্তিশালী টুল রয়েছে যা তরঙ্গায়িত আকার ব্যবহার করে। আপনাকে শুরু করার জন্য এখানে অনুপ্রেরণা...

তোমার খবর কি? আমার অনলাইন জেনারেটর ব্যবহার করুন (অথবা আপনি যদি ইতিমধ্যেই হৃদয় দিয়ে সমস্ত গণিত শিখে থাকেন তবে ম্যানুয়ালি কোডটি লিখুন) এবং আমাকে আপনার সৃষ্টি দেখান! আসুন মন্তব্য বিভাগে একটি ভাল সংগ্রহ আছে.