Cubic Bezier জেনারেটর

কাস্টম CSS ইজিং কার্ভ ভিজ্যুয়ালি ডিজাইন করুন

এই কিউবিক-বেজিয়ার জেনারেটর বিমূর্ত cubic-bezier(x1, y1, x2, y2) ভ্যালুকে এমন কিছুতে রূপান্তর করে যা আপনি দেখতে এবং অনুভব করতে পারেন। গ্রাফের দুটি কন্ট্রোল-পয়েন্ট হ্যান্ডেল ড্র্যাগ করে একটি অ্যাক্সেলারেশন কার্ভ তৈরি করুন, ঠিক সেই টাইমিং দিয়ে চলা একটি লাইভ প্রিভিউ দেখুন, তারপর আপনার CSS ট্রানজিশন ও অ্যানিমেশনের জন্য একটি ব্যবহার-উপযোগী ভ্যালু কপি করুন। এটি একইসাথে একটি সম্পূর্ণ ইজিং কার্ভ এডিটর এবং কিউবিক-বেজিয়ার ভিজ্যুয়ালাইজার, সম্পূর্ণভাবে আপনার ব্রাউজারে চলে — কোনো ইনস্টল নেই, কোনো অ্যাকাউন্ট নেই।

প্রতিটি কার্ভ (0,0) থেকে (1,1) পর্যন্ত চলে। অনুভূমিক অক্ষ হলো সময় এবং উল্লম্ব অক্ষ হলো অগ্রগতি, তাই শুরুর দিকে খাড়াভাবে ওঠা একটি কার্ভ মানে দ্রুত শুরু, আর শেষের দিকে সমতল হয়ে যাওয়া একটি কার্ভ মানে মৃদু সমাপ্তি। চারটি ইনপুটে সুনির্দিষ্ট সংখ্যা টাইপ করুন, হ্যান্ডেল ড্র্যাগ করুন, বা একটি বিদ্যমান cubic-bezier() ভ্যালু পেস্ট করে তা লোড ও পরিবর্তন করুন। প্রতিটি হ্যান্ডেল নড়াচড়ার সাথে সাথেই ফলাফল রিয়েল টাইমে আপডেট হয়।

৩০+ প্রিসেট: CSS কীওয়ার্ড এবং নামযুক্ত ইজিং কার্ভ

প্রিসেট বার প্রতিযোগীরা সাধারণত যে দুটো জিনিস আলাদা রাখে তা একসাথে করে দেয়। আপনি পাবেন পাঁচটি CSS কীওয়ার্ড — linear, ease, ease-in, ease-out এবং ease-in-out — সাথে easings.net-এর জনপ্রিয় করা নামযুক্ত ইজিং কার্ভের সম্পূর্ণ ক্যাটালগ: Sine, Quad, Cubic, Quart, Quint, Expo, Circ এবং Back, প্রতিটি In, Out এবং In-Out ভ্যারিয়েন্টে। অর্থাৎ easeInOutCubic, easeOutQuart, easeOutBack এবং বাকিগুলো এক ক্লিক দূরে, ইতিমধ্যে একটি css cubic-bezier ভ্যালুতে রূপান্তরিত।

প্রতিটি প্রিসেট একটি ছোট কার্ভ থাম্বনেইল দেখায় যাতে আপনি এক ঝলকে এর আকৃতি চিনতে পারেন, তারপর সেটি সরাসরি এডিটরে লোড করে, যেখানে আপনি তা পরিমার্জন করতে পারেন। Easings.net শুধু নাম তালিকাভুক্ত করে এবং স্থির ছবি দেখায় — সেখান থেকে এডিট বা এক্সপোর্ট করা যায় না। cubic-bezier.com পাঁচটি CSS কীওয়ার্ড দেখায় কিন্তু সম্পূর্ণ Penner সেট নয়। এই টুল দুটোই এক জায়গায় দেয়, এডিটিং সহ।

ওভারশুট, বাউন্স এবং অ্যান্টিসিপেশন

একটি কিউবিক-বেজিয়ারের y ভ্যালু 0–1-এ সীমাবদ্ধ নয়। একটি হ্যান্ডেল বক্সের ওপরে ঠেলে দিন, আর অ্যানিমেশনটি সেটেল হওয়ার আগে তার লক্ষ্যকে ছাড়িয়ে যায় — easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)-এর স্প্রিংয়ের মতো অনুভূতি। বক্সের নিচে একটি হ্যান্ডেল টানুন, আর এলিমেন্টটি প্রথমে পিছিয়ে যায়, লাফ দেওয়ার আগে রান-আপের মতো। এডিটরের গ্রাফ ইউনিট বক্সের বাইরেও প্রসারিত হয়, তাই আপনি সেই ওভারশুট অঞ্চলে ড্র্যাগ করে সঙ্গে সঙ্গে ফলাফল প্রিভিউ করতে পারেন।

Chrome DevTools-এ একটি বিল্ট-ইন কিউবিক-বেজিয়ার এডিটর আছে কিন্তু হ্যান্ডেল 0–1 বক্সে ক্ল্যাম্প করে রাখে, তাই সেখানে কোনো ওভারশুট বা অ্যান্টিসিপেশন এফেক্ট তৈরি করা যায় না। Firefox DevTools-এরও একই সীমাবদ্ধতা আছে। দুটোতেই নামযুক্ত-প্রিসেট ক্যাটালগ ও এক্সপোর্ট অপশনও নেই যা এখানে পাওয়া যায়। ওভারশুট প্রয়োজন হলে, এটি বাস্তবিকই সমর্থন করে এমন কয়েকটি টুলের একটি।

অন্যান্য কিউবিক-বেজিয়ার টুলের সাথে এটি কেমন তুলনীয়

Lea Verou-এর cubic-bezier.com হলো সেই রেফারেন্স যা ড্র্যাগ-অ্যান্ড-প্রিভিউ ফরম্যাটকে জনপ্রিয় করেছে, এবং দ্রুত CSS কার্ভ তৈরির জন্য এটি এখনও চমৎকার। কিন্তু এতে কোনো GSAP এক্সপোর্ট নেই, কোনো JavaScript ইজিং ফাংশন আউটপুট নেই, কোনো কম্পেয়ার মোড নেই, কোনো Penner প্রিসেট লাইব্রেরি নেই, এবং ইন্টারফেসটি মোবাইলে ভেঙে যায়। Easings.net একটি রিড-অনলি রেফারেন্স — আপনি একটি নামযুক্ত কার্ভ বেছে নিলে এটি ভ্যালু দেখায়, কিন্তু কোনো এডিটর নেই, পরিবর্তন করার কিছু নেই।

Chrome এবং Firefox DevTools-এর প্রতিটিতেই ব্রাউজার ইনস্পেক্টরের ভেতরে একটি হালকা কিউবিক-বেজিয়ার এডিটর আছে, যা আপনি ইতিমধ্যে DevTools-এ থাকলে সুবিধাজনক। ট্রেড-অফ: DevTools খোলা ছাড়া সেগুলো ব্যবহার করা যায় না, সেগুলো হ্যান্ডেল 0–1-এ ক্ল্যাম্প করে (কোনো ওভারশুট নেই), সেগুলো GSAP বা JS কোড এক্সপোর্ট করতে পারে না, এবং সেগুলো মোবাইলে একেবারেই কাজ করে না। UtiloKit-এর জেনারেটর ইন্টারেক্টিভ এডিটর, প্রিসেট লাইব্রেরি, কম্পেয়ার টুল এবং তিনটি এক্সপোর্ট ফরম্যাট একটি পেজে একত্রিত করে যা যেকোনো ডিভাইসে কাজ করে।

লাইভ প্রিভিউ এবং পাশাপাশি তুলনা

Play চাপুন আর একটি ডেমো এলিমেন্ট আপনার কার্ভ দিয়ে লুপ করে যাতে আপনি শুধু সংখ্যা নয়, মোশন বিচার করতে পারেন। ডেমোটিকে translate, scale এবং opacity-র মধ্যে সুইচ করুন এবং আপনার আসল অ্যানিমেশনের সাথে মেলাতে সময়কাল সমন্বয় করুন। দুটি কার্ভ পাশাপাশি রাখতে Compare চালু করুন — প্রোডাকশনে দেওয়ার আগে সঠিক ট্রানজিশন টাইমিং ফাংশন বেছে নেওয়ার জন্য উপযুক্ত।

সময়কালের স্লাইডার প্রিভিউয়ের গতি ২০০ms থেকে ৩ সেকেন্ড পর্যন্ত নিয়ন্ত্রণ করে, তাই আপনি বিভিন্ন গতিতে একই কার্ভ কেমন অনুভূত হয় তা পরীক্ষা করতে পারেন। একটি স্লো-মোশন প্রিভিউ প্রায়ই এমন সমস্যা প্রকাশ করে — যেমন শুরুতে একটি ঝাঁকুনি — যা ৩০০ms-এ অদৃশ্য থাকে। cubic-bezier.com-সহ বেশিরভাগ অন্যান্য টুল শুধু একটি নির্দিষ্ট গতিতে প্রিভিউ করে এবং পাশাপাশি তুলনার সুবিধা দেয় না।

CSS, GSAP এবং JavaScript-এ এক্সপোর্ট করুন — ফ্রি

আপনার স্ট্যাকের যা প্রয়োজন তা কপি করুন। CSS ট্যাব আপনাকে একটি transition এক-লাইনার এবং একটি সম্পূর্ণ @keyframes অ্যানিমেশন ব্লক দুটোই দেয়। GSAP ট্যাব একটি CustomEase.create() কল আউটপুট দেয় যাতে আপনার GSAP অ্যানিমেশন কার্ভের সাথে হুবহু মেলে। JS ট্যাব একটি স্ট্যান্ডঅ্যালোন javascript cubic-bezier ইজিং ফাংশন তৈরি করে — একটি নিউটন-রাফসন সলভার যা আপনি কোনো ডিপেন্ডেন্সি ছাড়াই requestAnimationFrame বা যেকোনো টুইনে ড্রপ করতে পারেন।

পছন্দের একটি কার্ভ পেয়েছেন? শেয়ার করুন। টুলটি চারটি ভ্যালু পেজ URL-এ এনকোড করে, তাই একটি লিংক যেকোনো ডিভাইসে আপনার ঠিক সেই ইজিং পুনরুৎপাদন করে। সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড, সংরক্ষণ বা লগ করা হয় না — এবং এটি সম্পূর্ণ ফ্রি, কোনো সাইনআপ ছাড়াই।

বেজিয়ার কার্ভের পেছনের গণিত

পিয়ের বেজিয়ার, Renault-এর একজন ফরাসি ইঞ্জিনিয়ার, এবং পল দ্য কাস্তেলজো, প্রতিদ্বন্দ্বী গাড়ি নির্মাতা Citroën-এর একজন ইঞ্জিনিয়ার, স্বাধীনভাবে সেই প্যারামেট্রিক কার্ভ আবিষ্কার করেছিলেন যা এখন বেজিয়ারের নাম বহন করে — দুজনেই ১৯৬০-এর দশকে গাড়ির মসৃণ বডি সারফেস গাণিতিকভাবে বর্ণনা করার চেষ্টা করছিলেন। দ্য কাস্তেলজোর পুনরাবৃত্তিমূলক অ্যালগরিদম প্রথমে ১৯৫৯ সালে এসেছিল কিন্তু Citroën তা গোপন রেখেছিল; বেজিয়ার তার সূত্রায়ন ১৯৬২ সালে প্রকাশ করেন, এ কারণেই বেশিরভাগ পাঠ্যপুস্তকে কার্ভটি তার নাম বহন করে। মূল অন্তর্দৃষ্টিটি ছিল যে অল্প সংখ্যক কন্ট্রোল পয়েন্ট হাজার হাজার কো-অর্ডিনেট সংরক্ষণ না করেই একটি মসৃণ, অসীমভাবে স্কেলযোগ্য কার্ভ সম্পূর্ণভাবে সংজ্ঞায়িত করতে পারে।

একটি কিউবিক বেজিয়ার কার্ভের প্যারামেট্রিক সংজ্ঞা হলো P(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³·P₃, যেখানে t 0 থেকে 1 পর্যন্ত পরিসীমায় থাকে। P₀ হলো শুরুর বিন্দু, P₃ হলো শেষ বিন্দু, এবং P₁ ও P₂ হলো দুটি কন্ট্রোল হ্যান্ডেল যা কার্ভটিকে নিজেদের দিকে টানে, যদিও কার্ভ প্রকৃতপক্ষে সেগুলোর মধ্য দিয়ে যায় না। t = 0-এ সূত্রটি P₀-তে মূল্যায়িত হয়; t = 1-এ এটি P₃-তে মূল্যায়িত হয়; মাঝের প্রতিটি ভ্যালুর জন্য আপনি কিউবিক বার্নস্টাইন পলিনোমিয়াল দ্বারা ওজনযুক্ত একটি মসৃণ ইন্টারপোলেটেড পয়েন্ট পান।

একটি কিউবিক বেজিয়ারের সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যগুলোর একটি হলো কনভেক্স হাল প্রপার্টি: কার্ভ সবসময় সম্পূর্ণভাবে কনভেক্স হালের ভেতরে থাকে — সবচেয়ে ছোট কনভেক্স পলিগন — যা চারটি কন্ট্রোল পয়েন্ট ধারণ করে। এই জ্যামিতিক নিশ্চয়তাই বেজিয়ার কার্ভকে ইঞ্জিনিয়ারিং ও রেন্ডারিংয়ের জন্য স্থিতিশীল করে তোলে; কার্ভ কখনও তার কন্ট্রোল পয়েন্ট দিয়ে সীমাবদ্ধ অঞ্চলের বাইরে ঘুরতে পারে না। কার্ভটি সুন্দরভাবে অবনমিতও হয়: আপনি P₁ = P₀ সেট করলে কিউবিকটি একটি কোয়াড্রেটিক বেজিয়ারে কমে যায়; P₁ = P₀ এবং P₂ = P₃ সেট করলে এটি একটি সরল রৈখিক ইন্টারপোলেশনে ভেঙে পড়ে।

CSS কীভাবে cubic-bezier()-কে টাইমিং ফাংশন হিসেবে ব্যবহার করে

CSS-এ, cubic-bezier(x1, y1, x2, y2) স্ক্রিনে কোনো পাথ বর্ণনা করছে না — এটি একটি টাইমিং ফাংশন বর্ণনা করছে, অতিবাহিত সময় থেকে অ্যানিমেশন অগ্রগতিতে একটি ম্যাপিং। কার্ভ গ্রাফের অনুভূমিক অক্ষ 0 থেকে 1 পর্যন্ত এগোনো সময়কে প্রতিনিধিত্ব করে (অ্যানিমেশনের সময়কালের শুরু থেকে শেষ), এবং উল্লম্ব অক্ষ প্রতিনিধিত্ব করে অ্যানিমেটেড প্রপার্টি ভ্যালুতে কতদূর এগিয়েছে। কার্ভের একটি খাড়া অংশ মানে প্রপার্টিটি দ্রুত পরিবর্তিত হচ্ছে; একটি সমতল অংশ মানে এটি প্রায় নড়ছেই না। দুটি অ্যাংকর পয়েন্ট সবসময় (0, 0) এবং (1, 1)-এ স্থির থাকে — অ্যানিমেশন সবসময় তাদের শুরুর ভ্যালুতে শুরু হয় এবং শেষের ভ্যালুতে শেষ হয়। শুধু মাঝের গতির প্রোফাইলটি কাস্টমাইজযোগ্য।

পাঁচটি CSS টাইমিং-ফাংশন কীওয়ার্ড শুধু নির্দিষ্ট কিউবিক-বেজিয়ার ভ্যালুর নামযুক্ত উপনাম: linear = cubic-bezier(0, 0, 1, 1); ease = cubic-bezier(0.25, 0.1, 0.25, 1.0); ease-in = cubic-bezier(0.42, 0, 1.0, 1.0); ease-out = cubic-bezier(0, 0, 0.58, 1.0); ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)। প্রতিটি ব্রাউজার অ্যানিমেশন গণনা করার আগে এই কীওয়ার্ডগুলোকে ঠিক এই চার-সংখ্যার ফর্মে রেজলভ করে, অর্থাৎ transition-timing-function: ease এবং transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) প্রভাবে বাইট-বাই-বাইট অভিন্ন।

দুটি কন্ট্রোল পয়েন্টের x-কো-অর্ডিনেট [0, 1] পরিসীমায় সীমাবদ্ধ — এটি নিশ্চিত করে যে টাইমিং ফাংশনটি একটি সঠিক ফাংশন (কোনো সময় বিপরীতমুখী হয় না)। কিন্তু y-কো-অর্ডিনেটে এমন কোনো সীমাবদ্ধতা নেই। y₁ বা y₂ কে 1-এর ওপরে সেট করলে অ্যানিমেটেড ভ্যালু সাময়িকভাবে তার লক্ষ্যকে ছাড়িয়ে যায় এবং তারপর ফিরে আসে, একটি স্প্রিংয়ের মতো বাউন্স তৈরি করে। সেগুলোকে 0-এর নিচে সেট করলে অ্যান্টিসিপেশন তৈরি হয় — এলিমেন্টটি সামনে এগোনোর আগে সংক্ষিপ্তভাবে পেছনে সরে যায়। ডিসক্রিট অ্যানিমেশনের জন্য cubic-bezier-এর বিকল্প হলো steps() ফাংশন, যা মসৃণভাবে ইন্টারপোলেট না করে একটি নির্দিষ্ট সংখ্যক সমান বৃদ্ধিতে ভ্যালুকে লাফ দেয় — স্প্রাইট-শিট অ্যানিমেশন বা ওডোমিটার-স্টাইল কাউন্টারের জন্য কাজে আসে।

প্রাকৃতিক মোশনের পদার্থবিজ্ঞান এবং UI ডিজাইনে ইজিং

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

ইজিং-এর চারটি বিভাগ প্রতিটি ভিন্ন ভৌত পরিস্থিতি ধরে রাখে। Ease-in (ধীর শুরু, দ্রুত শেষ) একটি বস্তু পড়ে যাওয়া বা ছুঁড়ে ফেলা দেওয়ার মতো অনুভূত হয় — স্ক্রিন ছেড়ে যাওয়া এলিমেন্টের জন্য স্বাভাবিক, যাদের সুন্দরভাবে অবতরণ করার দরকার নেই। Ease-out (দ্রুত শুরু, ধীর শেষ) একটি বস্তুর থেমে যাওয়ার মন্দন অনুকরণ করে — স্ক্রিনে প্রবেশ করা এলিমেন্টের জন্য সবচেয়ে স্বাভাবিক পছন্দ, কারণ তারা উদ্দেশ্যপূর্ণ মনে হয় এবং শান্তভাবে জায়গায় বসে। Ease-in-out (দুই প্রান্তেই ধীর, মাঝখানে দ্রুত) সেসব এলিমেন্টের জন্য উপযুক্ত যারা স্ক্রিন জুড়ে চলাচল করে এবং যাদের একটি মসৃণ লঞ্চ ও একটি মসৃণ ল্যান্ডিং দুটোই প্রয়োজন। চতুর্থ একটি বিভাগ — সামান্য ওভারশুটসহ ease-out, Material Design-এর স্ট্যান্ডার্ড কার্ভ দ্বারা উদাহরণায়িত — শেষে একটি স্প্রিং-এর মতো মাইক্রো-বাউন্স যোগ করে, একটি সীমানার বিরুদ্ধে থেমে যাওয়া ভৌত ভরের অনুভূতি শক্তিশালী করে।

আধুনিক UI মোশন ডিজাইনের তাত্ত্বিক ভিত্তি ডিজনির ১৯৮১ সালের বই The Illusion of Life-এ ফিরে যায়, যা অ্যানিমেশনের ১২টি নীতি কোডিফাই করেছিল, যার মধ্যে ছিল স্কোয়াশ এবং স্ট্রেচ, অ্যান্টিসিপেশন এবং ফলো-থ্রু। অ্যান্টিসিপেশন (মূল কাজের আগে একটি সংক্ষিপ্ত পশ্চাৎমুখী গতি) এবং ফলো-থ্রু (প্রাথমিক গতি থামার পর সংশোধিত হওয়া একটি ওভারশুট) ঠিক সেই এফেক্ট যা CSS-এ 0-এর নিচে এবং 1-এর ওপরে কিউবিক-বেজিয়ার y-ভ্যালু তৈরি করে। বেশিরভাগ UI অ্যানিমেশনের জন্য ease-out ডিফল্ট সুপারিশ হওয়ার কারণও এই নীতিগুলোতে নিহিত: একটি এলিমেন্ট যা স্ক্রিনে পৌঁছানোর সাথে সাথে মন্থর হয় তা উদ্দেশ্য নিয়ে পৌঁছানো হিসেবে পড়া হয়, যেখানে ease-in মনে হয় ইন্টারফেসটি আপনার কাছ থেকে উড়ে যাচ্ছে।

ফন্ট, SVG এবং তার বাইরে বেজিয়ার কার্ভ

বেজিয়ার কার্ভ ডিজিটাল টাইপোগ্রাফির মূল জ্যামিতি। Adobe-এর তৈরি PostScript/Type 1 ফন্ট প্রতিটি অক্ষরের রূপরেখা বর্ণনা করতে প্রতি সেগমেন্টে দুটি কন্ট্রোল হ্যান্ডেলসহ কিউবিক বেজিয়ার কার্ভ ব্যবহার করে। Apple ও Microsoft-এর তৈরি TrueType ফন্ট সহজতর কোয়াড্রেটিক বেজিয়ার ব্যবহার করে (প্রতি সেগমেন্টে একটি কন্ট্রোল পয়েন্ট), যাতে কম গণনা প্রয়োজন হয় এবং ঐতিহাসিকভাবে কম-রেজোলিউশন Windows স্ক্রিনে ছোট সাইজে আরও স্পষ্টভাবে রেন্ডার হতো। বর্তমান স্ট্যান্ডার্ড OpenType একটি ফরম্যাটে দুটো পদ্ধতিই সমর্থন করে। ফন্ট হিন্টিং — নির্দিষ্ট পিক্সেল সাইজে কন্ট্রোল পয়েন্ট সামান্য নাড়ানোর অনুশীলন, যাতে স্ট্রোকগুলো পিক্সেল গ্রিড লাইনে সঠিকভাবে বসে — মূলত কম-DPI ডিসপ্লেতে সর্বোত্তম পঠনযোগ্যতার জন্য বেজিয়ার কন্ট্রোল পয়েন্টের ম্যানুয়াল টিউনিং।

SVG-তে, বেজিয়ার কার্ভ d অ্যাট্রিবিউটের ভেতরে পাথ কমান্ড হিসেবে দেখা যায়: M আঁকা ছাড়াই পেন সরায়; L একটি সরল রেখা আঁকে; C x1,y1 x2,y2 x,y দুটি স্পষ্ট কন্ট্রোল পয়েন্ট এবং একটি এন্ডপয়েন্ট (ছয়টি প্যারামিটার) ব্যবহার করে একটি কিউবিক বেজিয়ার কার্ভটু আঁকে; Q x1,y1 x,y একটি কন্ট্রোল পয়েন্টসহ (চারটি প্যারামিটার) একটি কোয়াড্রেটিক বেজিয়ার আঁকে; S x2,y2 x,y একটি মসৃণ কিউবিক যা আগের সেগমেন্টের দ্বিতীয় হ্যান্ডেল প্রতিফলিত করে প্রথম কন্ট্রোল পয়েন্ট উত্তরাধিকার সূত্রে পায়, কার্ভ চেইন করার সময় প্যারামিটার বাঁচায়। SVG চিত্রের প্রতিটি মসৃণ পাথ — প্রতিটি লোগো, আইকন বা চার্ট — এই কমান্ডগুলোর একটি সিকোয়েন্স।

CAD/CAM-এ (কম্পিউটার-এইডেড ডিজাইন ও ম্যানুফ্যাকচারিং) বেজিয়ার কার্ভের মূল প্রয়োগ কখনও চলে যায়নি। Adobe Illustrator-এর Pen টুল, ১৯৮০-এর দশকের শেষভাগ থেকে মূলগতভাবে অপরিবর্তিত, এখনও ভেক্টর ইলাস্ট্রেশনের ইন্ডাস্ট্রি স্ট্যান্ডার্ড — Illustrator-এর প্রতিটি অ্যাংকর পয়েন্ট ও ডিরেকশন হ্যান্ডেল একটি বেজিয়ার কন্ট্রোল পয়েন্ট। After Effects-সহ অ্যানিমেশন টুল মোশন পাথ বেজিয়ার কার্ভ হিসেবে সংরক্ষণ করে। 3D গ্রাফিক্সে, NURBS (Non-Uniform Rational B-Splines) বেজিয়ার ধারণাকে ত্রিমাত্রিক মসৃণ সারফেসে সাধারণীকরণ করে এবং CGI ফিল্ম প্রোডাকশন ও শিল্প পণ্য ডিজাইনের জৈবিক আকৃতির ভিত্তি তৈরি করে — সেই একই গাণিতিক ঐতিহ্য যা পিয়ের বেজিয়ার ১৯৬২ সালে একটি Renault-এর বডি প্যানেলে প্রয়োগ করেছিলেন।