سی ایس ایس میں لہراتی شکلیں اور پیٹرن کیسے بنائیں

لہر شاید سی ایس ایس میں بنانے کے لیے سب سے مشکل شکلوں میں سے ایک ہے۔ ہم ہمیشہ اس کا اندازہ لگانے کی کوشش کرتے ہیں جیسے خصوصیات کے ساتھ border-radius اور بہت سارے جادوئی نمبر جب تک کہ ہمیں کوئی ایسی چیز نہ ملے جو قریب محسوس ہو۔ اور یہ اس سے پہلے کہ ہم لہراتی نمونوں میں آجائیں، جو زیادہ مشکل ہیں۔

"اسے SVG!" آپ کہہ سکتے ہیں، اور آپ شاید درست ہیں کہ یہ ایک بہتر طریقہ ہے۔ لیکن ہم دیکھیں گے کہ سی ایس ایس اچھی لہریں بنا سکتی ہے اور اس کے لیے کوڈ کو پاگل ہونے کی ضرورت نہیں ہے۔ اور اندازہ کرو کہ کیا؟ میرے پاس ایک آن لائن جنریٹر اسے اور بھی معمولی بنانے کے لیے!

اگر آپ جنریٹر کے ساتھ کھیلتے ہیں، تو آپ دیکھ سکتے ہیں کہ یہ جس 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.

ہمارے پاس سی ایس ایس میں ان سب کو گریڈینٹ میں تبدیل کرنا شروع کرنے کے لیے سب کچھ ہے!

میلان بنانا

ہماری لہریں حلقوں کا استعمال کرتی ہیں، اور جب حلقوں کے بارے میں بات کرتے ہیں تو ہم ریڈیل گریڈینٹ کے بارے میں بات کرتے ہیں۔ اور چونکہ دو دائرے ہماری لہر کی وضاحت کرتے ہیں، اس لیے ہم منطقی طور پر دو ریڈیل گریڈینٹ استعمال کریں گے۔

ہم خاص کیس کے ساتھ شروع کریں گے جہاں 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 اس سے جو ہمارے پاس پہلے سے ہے، اور ٹڈا۔ 🎉

ایک اچھا لہراتی نمونہ۔ وہ مساوات یاد ہے جو میں نے کہا تھا کہ ہم دوبارہ دیکھیں گے؟

/* 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() جس کا کوئی براؤزر سپورٹ نہیں ہے!

آپ وہی منطق ان تمام ڈیمو پر لاگو کر سکتے ہیں جنہیں ہم نے لہراتی لکیروں اور پیٹرن کے لیے بھی دیکھا۔ میں نے ریاضی کی تفصیلی وضاحت کے ساتھ شروعات کی اور عام کوڈ دیا، لیکن آپ کو حقیقی استعمال کے معاملے میں آسان کوڈ کی ضرورت محسوس ہو سکتی ہے۔ میں ہر وقت یہی کر رہا ہوں۔ میں عام کوڈ شاذ و نادر ہی استعمال کرتا ہوں، لیکن میں ہمیشہ ایک آسان ورژن پر غور کرتا ہوں، خاص طور پر کہ، زیادہ تر معاملات میں، میں کچھ معلوم اقدار استعمال کر رہا ہوں جن کو متغیر کے طور پر ذخیرہ کرنے کی ضرورت نہیں ہے۔ (خرابی کا سراغ لگانا: میں آخر میں چند مثالیں شیئر کروں گا!)

اس نقطہ نظر کی حدود

ریاضی کے لحاظ سے، ہم نے جو کوڈ بنایا ہے وہ ہمیں کامل لہراتی شکلیں اور پیٹرن فراہم کرے گا، لیکن حقیقت میں، ہمیں کچھ عجیب نتائج کا سامنا کرنا پڑے گا۔ تو، ہاں، اس طریقہ کی اپنی حدود ہیں۔ مثال کے طور پر، آن لائن جنریٹر خراب نتائج پیدا کرنے کی صلاحیت رکھتا ہے، خاص طور پر لہراتی لکیروں کے ساتھ۔ مسئلے کا ایک حصہ قدروں کے ایک خاص امتزاج کی وجہ سے ہے جہاں نتیجہ گھمبیر ہو جاتا ہے، جیسے سائز کے مقابلے میں سرحد کی موٹائی کے لیے بڑی قدر کا استعمال:

دوسری صورتوں کے لیے، یہ کچھ راؤنڈنگ سے متعلق مسئلہ ہے جس کے نتیجے میں لہروں کے درمیان غلط ترتیب اور خلا پیدا ہوگا:

اس نے کہا، میں اب بھی سوچتا ہوں کہ ہم نے جس طریقہ کا احاطہ کیا ہے وہ ایک اچھا ہے کیونکہ یہ زیادہ تر معاملات میں ہموار لہریں پیدا کرتا ہے، اور ہم مختلف اقدار کے ساتھ کھیل کر برے نتائج سے آسانی سے بچ سکتے ہیں جب تک کہ ہم اسے مکمل نہ کر لیں۔

اپ ریپنگ

میں امید کرتا ہوں کہ اس مضمون کے بعد، آپ لہراتی شکل یا نمونہ بنانے کے لیے آزمائش اور غلطی سے دوچار نہیں ہوں گے۔ اس کے علاوہ آن لائن جنریٹر پر، آپ کے پاس کسی بھی قسم کی لہر پیدا کرنے کے پیچھے ریاضی کے تمام راز ہیں جو آپ چاہتے ہیں!

مضمون یہیں ختم ہوتا ہے لیکن اب آپ کے پاس ایسے فینسی ڈیزائن بنانے کا ایک طاقتور ٹول ہے جو لہراتی شکلیں استعمال کرتے ہیں۔ آپ کو شروع کرنے کے لیے یہاں پریرتا ہے…

آپ کے بارے میں کیا خیال ہے؟ میرا آن لائن جنریٹر استعمال کریں (یا کوڈ کو دستی طور پر لکھیں اگر آپ نے پہلے ہی دل سے تمام ریاضی سیکھ لی ہے) اور مجھے اپنی تخلیقات دکھائیں! آئیے کمنٹ سیکشن میں ایک اچھا مجموعہ رکھتے ہیں۔