SVG लोगो ड्रॉ एनिमेशन: स्ट्रोक रिवील कैसे काम करता है

SVG लाइन ड्रॉइंग इफ़ेक्ट कैसे काम करता है?

यह dashes वाली एक ट्रिक है। stroke-dasharray "आकार की outline पेंट करने में इस्तेमाल होने वाले dashes और gaps का पैटर्न" तय करता है। stroke-dashoffset "जुड़े हुए dash array की रेंडरिंग पर एक offset" तय करता है। दोनों एनिमेट हो सकते हैं और दोनों CSS properties के रूप में काम करते हैं।

1. एक dash को ठीक path जितना लंबा बनाएँ, उसके बाद उतनी ही लंबाई का gap।
2. पैटर्न को पूरी लंबाई जितना खिसकाएँ, ताकि gap, path को ढक ले और कुछ न दिखे।
3. Offset को वापस 0 तक एनिमेट करें। dash, path पर खिसकता है और लगता है कि लाइन खुद को ड्रॉ कर रही है।

CSS-Tricks की क्लासिक व्याख्या शर्त सबसे पहले रखती है: "आकार में stroke होना चाहिए।" नीचे का सब कुछ इसी से निकलता है।

SVG लोगो ड्रॉ एनिमेशन के लिए सबसे आसान कोड क्या है?

हर path पर pathLength="1" सेट करें। MDN समझाता है कि तब ब्राउज़र दूरियों को स्केल करता है ताकि stroke-dasharray "path की शुरुआत को 0 और आखिरी बिंदु को pathLength attribute में दी गई वैल्यू मानेगा।" हर path 1 यूनिट लंबा हो जाता है, इसलिए एक ही CSS rule सब पर फ़िट होता है।

<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <path class="draw" pathLength="1" d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
</svg>

.draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s ease-in-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
}

forwards अहम है: animation-fill-mode: forwards "आखिरी keyframe से सेट हुई computed values" बनाए रखता है, इसलिए एनिमेशन खत्म होने पर लोगो ड्रॉ हुआ ही रहता है। reduced-motion rule तैयार लोगो सीधे दिखा देता है।

अगर आप असली लंबाई पसंद करते हैं, तो उन्हें JavaScript में मापें। getTotalLength() "user units में path की कुल लंबाई" लौटाता है:

document.querySelectorAll(".draw").forEach((path, i) => {
  const len = path.getTotalLength();
  path.style.strokeDasharray = len;
  path.animate(
    [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
    { duration: 1200, delay: i * 150, easing: "ease-in-out", fill: "forwards" }
  );
});

ड्रॉ इफ़ेक्ट के लिए CSS, SMIL या JavaScript में से क्या इस्तेमाल करें?

SMIL, <animate> एलिमेंट है, जो "किसी एलिमेंट के attribute को समय के साथ एनिमेट करने का तरीका देता है।" MDN इसे Baseline widely available चिह्नित करता है। आखिरी स्थिति बनाए रखने के लिए attributeName="stroke-dashoffset", from="1", to="0" और fill="freeze" इस्तेमाल करें।

SVG कहाँ रहता है, यह भी तरीका तय करता है। <img> के रूप में इस्तेमाल होने पर, MDN कहता है कि कुछ ब्राउज़र उसके अंदर JavaScript बंद कर देते हैं और बाहरी stylesheets ब्लॉक करते हैं, इसलिए एनिमेशन SVG फ़ाइल के अंदर लिखना ज़रूरी है। आपके HTML में inline SVG तीनों इस्तेमाल कर सकता है। लोगो के स्क्रॉल होकर दिखने पर ड्रॉ शुरू करने के लिए Intersection Observer API स्टैंडर्ड टूल है; Web Animations API (element.animate()) स्क्रिप्ट से play, pause और restart देता है।

भरे हुए लोगो को ड्रॉ-एनिमेट कैसे करें?

ज़्यादातर लोगो लाइन नहीं, भरे हुए आकार होते हैं, इसलिए dash ट्रिक के पास ड्रॉ करने को कुछ नहीं होता। इसके तीन रास्ते:

1. Outline, फिर fill। भरे हुए आकारों को एक अस्थायी stroke दें, वह outline ड्रॉ करें, फिर fill को fade in करें। मोटे निशानों के लिए जल्दी और असरदार।
2. Mask रिवील। एक <mask> के अंदर लोगो को ट्रेस करता एक सादा centerline path ड्रॉ करें, जिसका stroke उसे ढकने लायक चौड़ा हो। luminance mask में, MDN का उदाहरण बताता है कि "सफ़ेद पिक्सेल के नीचे सब कुछ दिखेगा," इसलिए जैसे-जैसे सफ़ेद stroke ड्रॉ होता है, असली भरा हुआ लोगो उसके नीचे दिखता जाता है। आपका आर्टवर्क कभी नहीं बदलता।
3. Wipe। <clipPath> "उस क्षेत्र को सीमित करता है जहाँ पेंट लगाया जा सकता है।" लोगो को एक तरफ़ से wipe करके लाने के लिए उसके अंदर एक rectangle एनिमेट करें। यह हाथ से ड्रॉ किया हुआ लुक नहीं है, लेकिन किसी भी आर्टवर्क पर काम करता है।

<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <mask id="reveal">
    <path class="draw" pathLength="1" stroke="white" stroke-width="14"
          d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
  </mask>
  <g mask="url(#reveal)">
    <!-- your filled logo paths, unchanged -->
  </g>
</svg>

ऊपर वाला वही .draw CSS, mask path को एनिमेट करता है। centerline उसी क्रम में ड्रॉ करें जिसमें पेन चलेगा, क्योंकि लोगो उसी क्रम में दिखता है।

ड्रॉ एनिमेशन के लिए Figma या Illustrator से लोगो कैसे एक्सपोर्ट करें?

जाँचें कि एक्सपोर्ट में असल में क्या है। Figma की हेल्प अपने SVG एक्सपोर्ट नोट्स में "Figma strokes को fills के रूप में एक्सपोर्ट करता है" लिस्ट करती है, और कहती है "SVG सिर्फ़ center stroke सपोर्ट करता है," अंदर और बाहर के strokes के लिए Simplify stroke सेटिंग के साथ। इसका Outline text विकल्प "किसी भी text layer को glyphs में बदल देता है," जो भरे हुए आकार हैं। इनमें से कोई भी आपको एनिमेट करने के लिए बिना stroke के छोड़ सकता है।

• SVG को text editor में खोलें। ड्रॉ करने लायक path में stroke सेट होता है और fill="none" होता है। सिर्फ़ fill वाला path एक आकार है; mask तरीका इस्तेमाल करें।
• जो कुछ भी ड्रॉ होना है, जैसे सिग्नेचर या monoline निशान, उसके लिए लाइनें center strokes के रूप में बनाएँ।
• Layers को नाम दें। Figma का Include "id" attribute विकल्प layer के नामों के आधार पर ids जोड़ता है, जिन्हें आपका CSS या स्क्रिप्ट target कर सकता है।
• Illustrator: इसके SVG एक्सपोर्ट पर भी यही जाँच लागू होती है। अगर paths भरी हुई outlines के रूप में निकलें, तो एक्सपोर्ट से पहले ड्रॉ होने वाले हिस्सों को stroke वाले open paths के रूप में दोबारा बनाएँ।

कई paths वाले लोगो को क्रम से कैसे ड्रॉ करें?

हर path को delay करें ताकि ड्रॉइंग एक stroke से अगले पर जाए, जैसे हाथ जाता है।

• हर path के लिए एक जैसी अवधि: pathLength="1" के साथ, हर path लंबाई चाहे जो हो, उतना ही समय लेता है। आसान है, लेकिन छोटा tick और लंबा swash साथ में खत्म होते हैं, इसलिए छोटा वाला धीमा लगता है।
• पेन की एक जैसी रफ़्तार: हर path को getTotalLength() से मापें और उसकी अवधि उसकी लंबाई के अनुपात में रखें, हर एक को पिछले के खत्म होने पर शुरू करते हुए।
• थोड़ा overlap करें: अगले stroke को पिछले के खत्म होने से थोड़ा पहले शुरू करना सख़्त कतार से ज़्यादा प्रवाह वाला लगता है।
• Fill से खत्म करें: आखिरी stroke के बाद fills और रंगों को fade in करें ताकि लोगो ठीक वैसा ही खत्म हो जैसा डिज़ाइन किया गया है।

एक-दो सेकंड में एक बार चलने वाला रिवील, अपने आप चलने वाली मोशन के लिए WCAG 2.2.2 की पाँच सेकंड की सीमा से काफ़ी नीचे है। हमेशा लूप होने वाला ड्रॉ नहीं, इसलिए लूप को रोकने का तरीका दें।

SVG और CSS के बजाय Lottie या Rive कब इस्तेमाल करें?

जब रिवील को ब्राउज़र के बाहर चलना हो, या ड्रॉ से ज़्यादा कुछ करना हो।

• Lottie: Lottie की supported-features टेबल Trim Path (individually) को Android, iOS और Web पर सपोर्टेड बताती है। एक साथ लगाया गया Trim Path, iOS Core Animation renderer में सपोर्टेड नहीं है।
• Rive: Trim Path आपको "वेक्टर आकार पर stroke का सिर्फ़ एक हिस्सा ड्रॉ करने" देता है, Start, End और Offset के साथ, और एक Sequential मोड जो paths को एक के बाद एक ड्रॉ करता है। फिर Rive फ़ाइल आगे स्टेट मशीन में जा सकती है: ड्रॉ होकर आना, idle, hover पर रिएक्ट करना।

जब लोगो सिर्फ़ वेब पर दिखता हो, मोशन एक ही ड्रॉ हो, और आप कोई dependency न चाहें, तो SVG और CSS पर ही रहें। जब वही एनिमेशन iOS या Android ऐप में भी जाना हो, या उसे स्टेट चाहिए हों, तो बदलें। तुलना: Lottie vs SVG और CSS एनिमेशन और SVG से Rive।

क्या कोडिंग के बिना हाथ से लिखा लोगो रिवील मिल सकता है?

Charmotion का Motion Studio फ़्लैट wordmark को उसके अक्षरों में बाँटता है, ताकि वे पेन से लिखे जा सकें, एक baseline से ऊपर उठ सकें या गिरकर उछल सकें, जैसा Offscript डेमो में है। अक्षर आपकी फ़ाइल से आते हैं और कभी किसी फ़ॉन्ट से नहीं बदले जाते। लॉन्च एनिमेशन वेब, SwiftUI, Android, Flutter और React Native के कोड के साथ .riv के रूप में आता है, साथ में MP4 और ट्रांसपेरेंट वीडियो। कॉन्सेप्ट फ़्री हैं; किसी एक को बनाना Starter (नवंबर 2026 तक $9/माह) से शुरू होता है।

SVG लोगो को खुद को ड्रॉ करते हुए कैसे बनाएँ

1. Paths जाँचें. SVG खोलें और पक्का करें कि ड्रॉ होने वाले हिस्से ऐसे paths हैं जिनमें stroke हो और fill none पर सेट हो।
2. लंबाई normalize करें. हर path में pathLength="1" जोड़ें, या हर एक को getTotalLength() से मापें।
3. लाइन छिपाएँ. stroke-dasharray और stroke-dashoffset को path की लंबाई पर सेट करें ताकि stroke छिपा हुआ शुरू हो।
4. Offset एनिमेट करें. fill mode forwards के साथ stroke-dashoffset को 0 तक एनिमेट करें, paths को ड्रॉ होने के क्रम में stagger करते हुए।
5. भरे हुए आर्टवर्क को संभालें. भरे हुए लोगो के लिए, असली आकारों के ऊपर mask में एक मोटा सफ़ेद centerline stroke रखें और उस stroke को एनिमेट करें।
6. मोशन कम करें सेटिंग का ध्यान रखें. prefers-reduced-motion में एनिमेशन छोड़ दें और तैयार लोगो दिखाएँ।

अक्सर पूछे जाने वाले सवाल

मेरा SVG ड्रॉ एनिमेशन मेरे लोगो पर कुछ क्यों नहीं करता?

आमतौर पर लोगो में strokes नहीं होते। एक्सपोर्ट किए गए लोगो, outline किया टेक्स्ट और कई Figma एक्सपोर्ट भरे हुए आकार होते हैं, इसलिए stroke-dashoffset एनिमेट करने से कुछ भी दिखने वाला नहीं बदलता। SVG खोलें और paths पर stroke देखें। अगर सिर्फ़ fill है, तो mask तरीका इस्तेमाल करें या एक अस्थायी outline stroke जोड़ें।

क्या SVG लाइन एनिमेशन के लिए JavaScript चाहिए?

नहीं। हर path पर pathLength="1" सेट करने से सादा CSS stroke-dasharray: 1 इस्तेमाल कर पाता है और stroke-dashoffset को 1 से 0 तक एनिमेट कर पाता है। JavaScript तब मदद करता है जब आप अलग-अलग लंबाई के paths पर एक जैसी ड्रॉइंग रफ़्तार चाहते हैं, या एनिमेशन को स्क्रॉल या क्लिक पर शुरू करना चाहते हैं।

अगर SVG को img टैग में इस्तेमाल किया जाए, तो क्या ड्रॉ एनिमेशन काम करेगा?

सिर्फ़ तब, जब एनिमेशन SVG फ़ाइल के अंदर हो। MDN बताता है कि इमेज के रूप में इस्तेमाल हुए SVG के लिए ब्राउज़र JavaScript बंद कर सकते हैं और बाहरी stylesheets ब्लॉक कर सकते हैं, इसलिए CSS को SVG के अंदर एक style एलिमेंट में रखें, या SMIL इस्तेमाल करें, और जिन ब्राउज़र को आप सपोर्ट करते हैं उनमें टेस्ट करें।

स्रोत

• stroke-dasharray, MDN Web Docs
• stroke-dashoffset, MDN Web Docs
• SVGGeometryElement: getTotalLength() method, MDN Web Docs
• pathLength, MDN Web Docs
• animation-fill-mode, MDN Web Docs
• <animate>, MDN Web Docs
• SVG as an image, MDN Web Docs
• <mask>, MDN Web Docs
• <clipPath>, MDN Web Docs
• Web Animations API, MDN Web Docs
• Intersection Observer API, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• How SVG line animation works, CSS-Tricks
• Export formats and settings for static designs, Figma Learn
• Lottie supported features, Airbnb on GitHub
• Trim Path, Rive docs