मुफ़्त SVG बैकग्राउंड और पैटर्न | SVG Backgrounds

• 48 तरह के हल्के SVG बैकग्राउंड और पैटर्न उपलब्ध हैं, जिन्हें यूज़र सिर्फ copy-paste करके वेब प्रोजेक्ट में लागू कर सकते हैं
• हर डिज़ाइन में रंग, आकार, blend mode आदि को स्वतंत्र रूप से बदला जा सकता है, और कुछ में rotation, movement जैसी animation effects का समर्थन है
• सभी ग्राफ़िक्स SVGBackgrounds.com के मौलिक डिज़ाइन हैं, और व्यक्तिगत तथा व्यावसायिक प्रोजेक्ट्स में इस्तेमाल किए जा सकते हैं
• लेकिन इन्हें प्रतिस्पर्धी प्रोडक्ट में शामिल नहीं किया जा सकता और attribution देना अनिवार्य है
• यह वेब डिज़ाइनरों और डेवलपर्स के लिए ब्रांड के अनुरूप बैकग्राउंड आसानी से बनाने का एक मुफ़्त संसाधन है

---

मुफ़्त SVG बैकग्राउंड और पैटर्न का अवलोकन

• SVGBackgrounds.com मुफ़्त उपयोग के लिए SVG बैकग्राउंड और पैटर्न का सेट प्रदान करता है
  • यूज़र साइट पर ही रंग, blend, size आदि समायोजित करके कस्टम बैकग्राउंड बना सकते हैं
  • कुछ डिज़ाइनों में zoom out, rotation, movement जैसी विज़ुअल ट्रांसफ़ॉर्मेशन सुविधाएँ शामिल हैं
• हर बैकग्राउंड SVGBackgrounds.com का मौलिक डिज़ाइन है, जिसे वेबसाइट या ऐप इंटरफ़ेस में सीधे लागू किया जा सकता है
• उपलब्ध ग्राफ़िक्स CSS inline code, SVG, PNG फ़ॉर्मेट में डाउनलोड किए जा सकते हैं

उपयोग का तरीका

• यूज़र CSS code कहाँ डालना है यह बताने वाले demo page के ज़रिए लागू करने का तरीका देख सकते हैं
• बैकग्राउंड को copy and paste तरीके से आसानी से इंटीग्रेट किया जा सकता है
• साइट color palette, scale, blend mode आदि के लिए कई तरह के adjustment options देती है

लाइसेंस और उपयोग की शर्तें

• ग्राफ़िक्स का उपयोग करते समय SVGBackgrounds.com license agreement से सहमत होना होगा
  • व्यक्तिगत और व्यावसायिक, दोनों तरह के प्रोजेक्ट्स में उपयोग संभव है
  • प्रतिस्पर्धी प्रोडक्ट में शामिल करना या दोबारा बेचना मना है
  • मुफ़्त उपयोग की स्थिति में attribution देना अनिवार्य है
• पेड सब्सक्राइबर unlimited use और attribution से छूट का लाभ ले सकते हैं

निर्माता और कम्युनिटी

• साइट को Matt चलाते हैं और हर महीने नए मुफ़्त और पेड संसाधन जारी करते हैं
  • यूज़र ईमेल सब्सक्रिप्शन के ज़रिए नए बैकग्राउंड और अपडेट की सूचनाएँ प्राप्त कर सकते हैं
• निर्माता यूज़र्स को HTML link, social sharing, support (Buy me a coffee) जैसे कई तरीकों से क्रेडिट देने का सुझाव देते हैं

अतिरिक्त संसाधन और टूल

• SVGBackgrounds.com बैकग्राउंड के अलावा SVG icons, illustrations, buttons, cursors, shape divider जैसे कई ग्राफ़िक एलिमेंट भी प्रदान करता है
• SVG to CSS converter और Shape Divider Generator जैसे टूल्स के माध्यम से डेवलपर्स स्वयं SVG को convert या generate कर सकते हैं
• नवीनतम releases और ब्लॉग के ज़रिए नए डिज़ाइन सेट और प्रोडक्ट अपडेट्स लगातार साझा किए जाते हैं

[GN⁺]

Hacker News की टिप्पणियाँ

• ये backgrounds वाकई बहुत शानदार हैं। बस, “क्लिक करके कॉपी करें” बटन की जगह CSS दिखाने वाला <textarea> भी जोड़ दिया जाता तो अच्छा होता
  कुछ browsers या users सुरक्षा कारणों से clipboard access ब्लॉक कर देते हैं, इसलिए जब copy फीचर काम नहीं करता तो कोई विकल्प नहीं बचता

  • अच्छी बात उठाई। पहले ऐसा ही था, और फिर से उसी तरीके पर लौटना या code दिखाने वाला बटन जोड़ना मुश्किल नहीं होगा

• नारंगी छत वाला pattern मुझे खास तौर पर पसंद आया। लेकिन Firefox में इसका कुछ हिस्सा ठीक से नहीं दिखता — नीला और हरा swirl क्रमशः सिर्फ एक square और hexagon के रूप में render होता है
  और यह भी जानना चाहता हूँ कि ऐसे backgrounds को content में बाधा डाले बिना कैसे इस्तेमाल किया जाए। बारीक patterns अक्सर देखने में भटकाव पैदा करते हैं

  • आम तौर पर पूरे document पर background रखा जाता है, और उसके ऊपर opacity-adjusted overlay लगाकर main text दिखाया जाता है। PC के fullscreen में यह अच्छा लगता है, लेकिन mobile में जगह कम होने से background को ठीक से दिखाना मुश्किल होता है
  • Firefox में चेक किया तो यह काम करता है, लेकिन ऊपर वाला slider हिलाने पर ही effect दिखाई देता है। effect की दिशा उलटने से शायद बेहतर लगे, इसलिए इस पर फिर से सोचूँगा
  • “नीला square और हरा hexagon” वाली समस्या slider हिलाने पर ठीक हो जाती है

• background switching interface और parameter adjustment panel पसंद आया। पहले SVG/canvas/webgl से procedural patterns पर प्रयोग किया था, इसे देखकर लगता है कि उस expression method को फिर से package करके देखूँ

  • धन्यवाद। graphics manipulation के लिए UI कई बार design किया है, और यह version खास तौर पर काफी निखारा गया है। background को जितना हो सके उतना बड़ा दिखाने की कोशिश में कुछ सीमाएँ आईं, लेकिन उसी की वजह से creative choices संभव हो पाए। नतीजे से मैं काफी संतुष्ट हूँ

• “आपके पास background access है” वाला notice mobile screen का 1/3 हिस्सा घेर लेता है और उसे बंद करने का कोई तरीका नहीं है। इसकी वजह जानना चाहता हूँ

  • इसमें सिर्फ “आपके पास access है। आनंद लें!” दिखता है, लेकिन मैंने देखा कि इस तरह का access आम तौर पर सालाना $120 के आसपास की value रखता है
  • अच्छा point है। thumbnail पर क्लिक करने पर preview button background manipulation UI में बदल जाता है, इसलिए इस हिस्से को फिर से design करने का सोच रहा हूँ

• mouse hover करने पर जिस हिस्से को मैं देखना चाहता हूँ वही धुंधला या ढका हुआ लगने लगता है, यह थोड़ा अजीब है

  • उस दिशा में जाने की वजह यह थी कि एक click में full view मिल जाता है, और hover state में अतिरिक्त preview के तौर पर दिखाने के लिए बहुत कुछ नहीं है। hover का मुख्य उद्देश्य यह साफ करना था कि यहाँ interaction संभव है

• <blink /> effect की नकल करने वाला एक भी नहीं है। मैं refund की माँग करता हूँ (मज़ाक में)

• Dark Reader plugin चालू करने पर preview काम नहीं करता

• triangle pattern मुझे खास तौर पर पसंद आया। क्या यह Rule 30 से प्रेरित है?

  • Rule 30 के बारे में पहली बार सुना। अच्छा हुआ लिंक Wikipedia का था, और यह concept काफी दिलचस्प और प्रेरणा देने वाला विचार लगा। साझा करने के लिए धन्यवाद

• करीब एक साल पहले जब मैंने अपना portfolio फिर से बनाया था, तब यह साइट मिली थी और मैंने header में एक background इस्तेमाल किया था। बहुत-बहुत धन्यवाद

  • यह जानकर खुशी हुई कि आपने इसे उपयोगी पाया। अगर इससे मदद मिली, तो यह जानकर अच्छा लगा

• backgrounds वाकई बहुत शानदार हैं। मैं इन्हें अपने solitaire game में आज़माना चाहता हूँ
  लेकिन mobile में preview के बाद scroll करने पर image गायब हो जाती है, और उसे फिर से देखने के लिए refresh करना पड़ता है। साथ ही, अच्छा होता अगर हर pattern का नाम भी होता

  • यह अजीब है। अगर आप device या browser की जानकारी contact form से भेज सकें तो आभारी रहूँगा। जानकारी के लिए, हर background का एक नाम है, लेकिन mobile में screen space कम होने की वजह से उसे छिपा दिया गया है