मेश ग्रेडिएंट जनरेटर

कोई इमेज इंपोर्ट किए बिना, सीधे canvas पर कई रंगीन बिंदुओं वाला मेश ग्रेडिएंट बनाएँ। बिंदुओं की संख्या और उनके रंग बदलें, फिर नतीजे को PNG में एक्सपोर्ट करें या उसका समतुल्य CSS कॉपी करें।

रंग बदलने के लिए किसी रंग-बिंदु पर क्लिक करें।

यह कैसे काम करता है

हर रंगीन बिंदु प्रभाव के स्रोत की तरह काम करता है: canvas के हर पिक्सल का अंतिम रंग सभी बिंदुओं के रंगों का भारित औसत होता है, और बिंदु जितना पास होता है उसका भार उतना ज़्यादा होता है (व्युत्क्रम दूरी के अनुसार भार)। इससे चुने गए रंगों के बीच एक सहज और प्राकृतिक ग्रेडिएंट बनता है।

क्या कॉपी किया गया CSS बिल्कुल PNG जैसा ही दिखेगा?

नहीं, बनाया गया CSS नेटिव CSS रेडियल ग्रेडिएंट की परतों का इस्तेमाल करता है, जिसका नतीजा canvas पर व्युत्क्रम दूरी इंटरपोलेशन से निकले परिणाम के करीब तो होता है, पर पिक्सल-दर-पिक्सल एक जैसा नहीं। यह हल्का लेकिन भरोसेमंद अनुमान है, जिसे सीधे किसी वेबसाइट की बैकग्राउंड के रूप में इस्तेमाल किया जा सकता है।

"रैंडम पोज़िशन" पर हर क्लिक के साथ नतीजा क्यों बदल जाता है?

हर बार बिंदुओं की जगहें canvas की सीमा के भीतर रैंडम तरीके से चुनी जाती हैं। आपके चुने रंगों के साथ मिलकर यह बिना हाथ से जगह तय किए मेश ग्रेडिएंट की ढेरों किस्में जल्दी आज़माने देता है।

पूरी रेंडरिंग आपके ब्राउज़र में लोकल रूप से होती है: कोई डेटा सर्वर पर नहीं भेजा जाता, भले ही आपने कोई इमेज न दी हो।