SVG से बनाई गई शानदार चीज़ें

 (fuma-nama.vercel.app)
3 पॉइंट द्वारा GN⁺ 2025-04-13 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • SVG वेब पर vector graphics को दिखाने के लिए एक शक्तिशाली टूल है
  • animation के ज़रिए SVG elements को और अधिक आकर्षक बनाया जा सकता है
  • mask का इस्तेमाल करके SVG elements के खास हिस्सों को उभारा या छिपाया जा सकता है
  • server-side rendering के ज़रिए client-side JavaScript के बिना TOC लागू किया जा सकता है
  • CSS और SVG को मिलाकर interactive elements बनाए जा सकते हैं

SVG animation

  • SVG का उपयोग वेब पर vector graphics दिखाने के लिए किया जाता है
  • इसमें JSX(React) में लिखा गया example code शामिल है
  • line या path का उपयोग करके रेखाएँ बनाई जा सकती हैं, और उन्हें mask की तरह इस्तेमाल करके animation जोड़ा जा सकता है
  • @keyframes का उपयोग करके animation परिभाषित किया जा सकता है, और transform property के ज़रिए elements की स्थिति बदली जा सकती है
  • Figma या अन्य SVG editor में डिज़ाइन किए गए हिस्सों का उपयोग करके animation blocks को mask के रूप में प्रोसेस किया जा सकता है

Clerk शैली की विषय-सूची

  • Clerk शैली की विषय-सूची को Fumadocs में लागू किया गया है
  • सर्वर पर विषय-सूची render की जाती है ताकि यह client-side JavaScript के बिना SSR के साथ संगत रहे
  • absolute positioning का उपयोग करके, ऐसे server environment में विषय-सूची render की जाती है जहाँ elements की सटीक स्थिति पता नहीं होती
  • सक्रिय item को उभारने के लिए thumb नाम का animated हिस्सा जोड़ा गया है
  • client पर render हुई position जानकारी का उपयोग करके SVG से एक "mask map" बनाया जाता है
  • mask-image property का उपयोग करके animated div blocks को mask किया जाता है ताकि विषय-सूची का highlighted हिस्सा render हो सके

Clerk से प्रेरणा लेकर documentation site की विषय-सूची को और अधिक रोचक तरीके से लागू किया गया है।

संबंधित पढ़ाई

2 टिप्पणियां

 
ndrgrd 2025-04-14

काफ़ी शानदार है, लेकिन अभी सिर्फ़ मौजूदा आइटम को ही साफ़ तौर पर highlight करना ज़्यादा नज़र आता है।
 
GN⁺ 2025-04-13
Hacker News राय

  • Sarah Drasner का "SVG Can Do That?" प्रेज़ेंटेशन 8 साल बाद भी अब तक कई लोगों को चौंकाता है। तब से CSS काफ़ी आगे बढ़ चुका है, लेकिन SVG खुद उतना नहीं, इस पर कम भरोसा है। फिर भी इसे ज़ोरदार तरीके से recommend किया जाता है

  • SVG फ़ाइलों के साथ की जा सकने वाली मज़ेदार चीज़ों में से एक है inline DTD में entities का इस्तेमाल करके ऐसे constants define करना जिन्हें फ़ाइल के कई हिस्सों में share किया जा सके। David Ellsworth के "Squares in Squares" पेज पर इसका एक अच्छा उदाहरण देखा जा सकता है

    • बड़े browsers को इससे जुड़ी कोई समस्या नहीं होती, लेकिन Inkscape जैसे कुछ tools DTD को parse नहीं करते या entities को expand नहीं करते
    • kingbird.myphotos.cc/packing/squares_in_squares.html

  • जटिल animated SVG मज़ेदार होते हैं, लेकिन SMIL की जटिलता और Safari में floating point के आगे 0 न होने जैसी दिक्कतों की वजह से इन्हें संभालना मुश्किल हो सकता है

  • Nanda Syahrasyad का "A Deep Dive Into SVG Path Commands" यह समझने में बहुत उपयोगी है कि SVG paths कैसे बनते हैं। यह लगभग 2 साल पुराना संसाधन है, लेकिन SVG क्या-क्या कर सकता है और कैसे कर सकता है, इस पर आंखें खोल देता है

  • अगर कोई JS का रचनात्मक तरीके से इस्तेमाल करके dynamically SVG generate कर रहा है, तो वह मुझे DM करे

  • React से बने एक प्रोजेक्ट में SVG के साथ कुछ मज़ेदार काम किया गया था। उसमें static illustrations की एक series और animated elements थे, और colors को CMS से control किया जाता था

  • SVG+CSS बहुत शक्तिशाली है। मुझे इसका एक सरल उपयोग पसंद है: बिना JavaScript के ऐसे diagrams बनाना जो dark/light mode का सम्मान करें। उदाहरण diagram: blog.davidv.dev/posts/ipvs-lb/

  • यह जानने की जिज्ञासा है कि क्या line density की अनुमति देने वाला कोई SVG extension है। मेरे पास एक plotter है जो pen को ऊपर-नीचे कर सकता है, और वह SVG फ़ाइलों से चलता है। अच्छा होगा अगर line draw करते समय pen को नीचे रखा जा सके

    • आह, यह Evil Mad Scientist Labs का Axidraw है। शानदार डिवाइस है, और लोग भी बेहतरीन हैं

  • शानदार पोस्ट है, और साइट का डिज़ाइन भी बढ़िया है। SVG को आए काफ़ी समय हो चुका है, लेकिन लगता है कि इसकी क्षमता अभी भी पूरी तरह सामने नहीं आई है। HTML, CSS, JS को कार्यात्मक रूप से encapsulate कर सकने वाला कोई और element याद नहीं आता। इसे लगभग एक पूरी तरह अलग HTML document की तरह आसानी से इस्तेमाल किया जा सकता है

  • SVG एक बहुत कम explore किया गया और कम इस्तेमाल हुआ क्षेत्र लगता है। कल्पना के आधार पर इससे बहुत कुछ किया जा सकता है। हालांकि, बहुत सी चीज़ें काफ़ी "hardcore" तरीके से करनी पड़ सकती हैं, इसलिए यह use case पर निर्भर करता है