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

 (fuma-nama.vercel.app)
3 पॉइंट द्वारा GN⁺ 2025-04-13 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • SVG सिर्फ़ icon format से आगे जाकर mask, path, और CSS animations को मिलाकर line के साथ बहने वाले wire effects और TOC highlights बना सकता है
  • मुख्य implementation में line या path से बनी line को सीधे दिखाने के बजाय, उसे mask area की तरह इस्तेमाल किया जाता है ताकि animated block की visible range सीमित हो
  • Animated Wires में rect पर mask="url(#...)" लागू किया जाता है, @keyframes से translateY को move किया जाता है, और linearGradient व CSS variables से visual style को expand किया जाता है
  • Fumadocs का Clerk-style TOC SSR compatibility के कारण outline को server पर render करता है, और active position दिखाने वाला thumb browser position information का उपयोग करके client पर render करता है
  • SVG <path> का d attribute कोई auto-generated string नहीं, बल्कि commands की list है, इसलिए server-rendered TOC outline जैसी shape वाली mask image को client पर फिर से बनाया जा सकता है

SVG mask से बनने वाले Animated Wires

  • Example code सामान्य HTML नहीं, बल्कि JSX या React syntax पर आधारित है
  • Basic line SVG के line या path से बनाई जा सकती है
    • Example में viewBox="0 0 50 50" के अंदर एक vertical line रखी गई है
  • Line को screen पर सीधे draw करने के बजाय mask के रूप में इस्तेमाल करके यह सीमित किया जाता है कि दूसरा shape कहाँ visible होगा
    • rect पर mask="url(#line)" लागू किया जाता है, और mask के अंदर सफ़ेद line रखी जाती है
  • Movement rect पर CSS animation लागू करके बनाई जाती है
    • @keyframes to-down translateY(-10px) से translateY(50px) तक move करता है
  • Visual style को background line, ज़्यादा मोटी mask line, linearGradient, और CSS variable --height को मिलाकर expand किया जाता है
    • @keyframes to-down-2 calc(var(--height) * -1) से 100% तक move करता है
  • ज़्यादातर मिलते-जुलते effects animated block को mask से crop करने के तरीके का उपयोग करते हैं
    • कुछ designs Figma या किसी दूसरे SVG editor में बनाए जा सकते हैं
    • Unkey landing page इस तरीके का example है

Fumadocs का Clerk-style TOC

  • Fumadocs में Clerk-style table of contents (TOC) implement किया गया है
  • SSR के साथ compatible रहने के लिए client JavaScript के बिना server पर TOC outline render करनी होती है
    • Server पर element की exact position पता नहीं चल सकती
    • Implementation absolute position का उपयोग करता है, outline को कई components की तरह render करता है और फिर उन्हें जोड़ता है
  • Active item या viewport में दिख रहे heading से संबंधित outline का कुछ हिस्सा thumb के रूप में दिखाया जाता है
    • Thumb को animated होना चाहिए, इसलिए सिर्फ़ outline component का color बदलना काफ़ी नहीं है
    • Interaction target होने वाला thumb client पर render किया जाता है
  • Browser से मिली position information के आधार पर client पर mask map बनाया जाता है
    • इस mask map को बनाने के लिए SVG का उपयोग किया जाता है
    • SVG <path> का d attribute commands की list है, और points को जोड़ने वाली line render कर सकता है
    • संबंधित documentation MDN Web Docs के SVG Paths में देखी जा सकती है
  • इस तरह बनाया गया SVG server पर पहले से rendered original TOC outline जैसी ही shape बन जाता है
  • Animated Wires की तरह CSS mask-image में SVG को data URL के रूप में डालकर, animated div block को mask किया जाता है और highlighted thumb render किया जाता है
    • Inner div width: 1, height: thumb.height, transform: translateY(${thumb.top}px), transition: "all 500ms", backgroundColor: "white" जैसी values इस्तेमाल करता है
  • React.js implementation toc-clerk.tsx source code में देखा जा सकता है

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

2 टिप्पणियां

 
ndrgrd 2025-04-14

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

  • 8 साल पुरानी सामग्री होने के बावजूद, Sarah Drasner की मशहूर “SVG Can Do That?” प्रस्तुति आज भी कई लोगों की आंखें खोल देती है
    उसके बाद से CSS बहुत mature हो चुका है, और SVG खुद कितना mature हुआ है, यह पक्का नहीं पता, लेकिन फिर भी इसकी जोरदार सिफारिश करता हूं
    स्लाइड्स: https://slides.com/sdrasner/svg-can-do-that
    वीडियो: https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte

    • वह किताब भी बहुत अच्छी है, लेकिन उसमें सुझाए गए tools आज भी valid हैं या नहीं, यह मुझे ठीक से नहीं पता

  • SVG फाइलों से की जा सकने वाली दिलचस्प चीजों में से एक है inline DTD की entities का इस्तेमाल करके ऐसे constants define करना जिन्हें फाइल में कई जगह साझा किया जा सके
    David Ellsworth के “Squares in Squares” पेज पर मौजूद SVG में इसका बढ़िया उदाहरण दिखता है
    प्रमुख browsers में कोई समस्या नहीं है, लेकिन Inkscape जैसे कुछ tools DTD को parse भी नहीं करते और entities को expand भी नहीं करते
    [0] https://kingbird.myphotos.cc/packing/squares_in_squares.html

    • यहां जिस “entities” की बात की गई है, वह असल में &ref जैसे entity references के जरिए मनमाना syntax content define और reuse करने वाले SGML/XML mechanism का नाम है
      SVG में shapes, paths आदि को defs के नीचे रखकर उन्हें id दिया जाता है और फिर main SVG में दोबारा इस्तेमाल किया जाता है; linked page भी हर SVG के अंदर यही तरीका इस्तेमाल करता दिखता है
      यह कई drawings के बीच squares साझा करना नहीं है, क्योंकि हर एक अलग DOM के रूप में आता है
      जिज्ञासा है कि SVG के शुरुआती designers को entity mechanism को अस्थायी रूप से फिर से implement करना क्यों जरूरी लगा
      शायद इसका संबंध use point पर rendering properties override करने की क्षमता से हो सकता है, और उस समय SVG W3C के XHTML/XML transition flow में था, इसलिए यह assumption भी शायद स्थापित नहीं था कि browser entity definitions या document prologue/DOCTYPE को ignore करेंगे
    • हो सकता है मैं कुछ miss कर रहा हूं, लेकिन उस page में DTD दिखाने लायक !doctype या !element नहीं मिला
      अगर बात सिर्फ SVG के defs और use की है, तो वह DTD नहीं है
    • मौजूदा SVG के दूसरे हिस्से निकालकर page में कहीं और clone करके इस्तेमाल भी किए जा सकते हैं
      https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
    • browsers में यह चल सकता है, लेकिन कई SVG tools denial-of-service attack के जोखिम की वजह से DTD को ignore करते हैं
      उदाहरण के लिए Billion laughs attack है
      https://en.wikipedia.org/wiki/Billion_laughs_attack
    • उस page को 2022 वाले iPhone SE पर render होने में पूरे करीब 5 सेकंड लगे

  • Nanda Syahrasyad का “A Deep Dive Into SVG Path Commands” SVG paths कैसे बनते हैं, यह समझने के लिए वाकई अच्छा है
    यह लगभग 2 साल पुराना लेख है, लेकिन इसने मुझे दिखाया कि SVG क्या कर सकता है और ठीक-ठीक कैसे करता है
    [0] https://www.nan.fyi/svg-paths

  • मैंने SVG से इस तरह की मजेदार चीजें करने वाला एक project किया था
    इसे React में बनाया था, कई static illustrations में animated elements जोड़े थे, और colors CMS से control होते थे
    frontend API call करके सही colors वाली SVG image लेता था, और animation SVG elements को hide/show करके handle किया जाता था
    उदाहरण यहां देखा जा सकता है: https://web.archive.org/web/20221020133516im_/https://uncrow...

  • Macromedia Flash की सच में याद आती है
    Flash और SWF format जैसी कोई technology नहीं थी, जिसमें अलग download के बिना, सिर्फ Flash Player होने पर ही ढेरों indie games और animated films का आनंद लिया जा सकता था
    entry barrier भी बहुत कम था
    SVG में भी SWF वाली सभी चीजें करने की potential है, लेकिन Flash जैसा editor या ActionScript जैसा scene/object-based coding model नहीं है
    browsers की अपनी quirks भी हैं, इसलिए केवल simple SVG ही हर जगह ठीक से दिखेगा, इसकी guarantee है

    • यह आज भी Adobe Animate के रूप में मौजूद है और HTML में export कर सकता है
      शुरू से ही SVG और Flash की तुलना करना apples और oranges की तुलना जैसा लगता है
      SVG format को Flash वाली सारी चीजें सीधे करने की जरूरत नहीं है; वह browser के अंदर दूसरी technologies पर निर्भर रह सकता है
    • मुझे लगता है WebAssembly तुलना के लिए candidate हो सकता है
      उदाहरण के लिए Unity, Unreal, Godot को browser के लिए काफी आसानी से compile किया जा सकता है
      समस्या यह है कि ऐसे apps काफी heavy हो जाते हैं और आम तौर पर single-digit MB नहीं, बल्कि दर्जनों MB की range में चले जाते हैं
    • इसे फिर से बनाने का startup opportunity दिखता है

  • complex animated SVG चलाकर देखना मजेदार होता है, लेकिन SMIL की गहराई में जाएं तो Safari floating point के आगे एक zero छूट जाने पर phone को freeze कर देता है या और भी अजीब चीजें होने लगती हैं

  • अगर आप JavaScript से dynamically creative SVG बना रहे हैं और job ढूंढ रहे हैं, तो DM भेज सकते हैं

  • सोचता हूं कि क्या SVG का कोई extension है जो line की density allow करता हो
    मेरे पास pen up/down कर सकने वाला plotter है, और वह SVG files से चलता है
    जैसा handwriting में अक्सर होता है, वैसा line खींचते समय pen को नीचे लाया जा सके तो अच्छा होगा
    संदर्भ के लिए, यह Evil Mad Scientist Labs का Axidraw है; शानदार device है और इसे बनाने वाले लोग भी बढ़िया हैं

    • सामान्य SVG file के अंदर custom instructions store करना और reader में उन्हें interpret करना काफी आसान है
      उदाहरण के लिए मैं multipurpose laser cutter/plotter इस्तेमाल करता हूं, जहां opacity laser power, line thickness movement speed, green channel repeat count, blue channel Z-axis height, और red channel pen down या laser off आदि के लिए इस्तेमाल होता है
    • शायद ऐसी चीजें G-code से handle करना बेहतर होगा
      इस तरह का काम यहां कर रहा हूं
      https://github.com/WillAdams/gcodepreview

  • खुद icons या logos बनाने से पहले तक मुझे SVG में transform का होना हमेशा अजीब लगता था
    curves को ठीक से match करना मुश्किल होता है
    दूसरा logo खत्म करने के बाद वह बहुत flat लगा, तो उसे 10° tilt करना चाहा, और उन सारी lines और curves को दोबारा लिखने के बारे में सोचकर rotation कहीं बेहतर विकल्प लगा
    शुक्र है कि text के बगल में रखने पर वह अजीब लगा, इसलिए kerning सही लगे इसके लिए angle कुछ बार और बदलना पड़ा

  • हाल ही में मजे के लिए एक छोटा game बनाया, और rendering के लिए ज्यादातर CSS animation SVG tiles इस्तेमाल किए: https://pipeline-panic.vercel.app/