stroke-dasharray, stroke-dashoffset और pathLength से SVG पाथ एनिमेशन

SVG Nexus · अंतिम अद्यतन: नवंबर 2026

बिना किसी JavaScript लाइब्रेरी के pathLength="1", stroke-dasharray और prefers-reduced-motion के साथ शुद्ध CSS में स्मूद SVG लाइन-ड्रॉइंग एनिमेशन बनाएं।

stroke-dasharray और stroke-dashoffset रेखाएँ कैसे बनाते हैं

हर स्ट्रोक वाले SVG आकार (<path>, <circle>, <polyline>) को stroke-dasharray से खंडों में बाँटा जा सकता है। डैश लंबाई को पूरी परिधि के बराबर रखकर stroke-dashoffset को 0 तक एनिमेट करने से आइकन धीरे-धीरे उभरता दिखता है।

pathLength="1" से लंबाई का मानकीकरण

JavaScript में getTotalLength() से हर कर्व मापने के बजाय सीधे SVG तत्व पर pathLength="1" जोड़ें, ताकि एक ही CSS नियम (stroke-dasharray: 1; stroke-dashoffset: 1) हर आइकन पर समान रूप से काम करे।

बहु-पाथ आइकनों के लिए समय समन्वय

कई स्ट्रोक वाले आइकनों में animation-delay से क्रम तय करें और stroke-linecap="round" होने पर शुरुआती बिंदु छिपाने के लिए छोटा अंतराल (stroke-dasharray: 1 1.02) रखें।

prefers-reduced-motion के साथ सुगम्यता

@media (prefers-reduced-motion: reduce) के भीतर सजावटी एनिमेशन बंद रखें ताकि गति-संवेदनशील उपयोगकर्ताओं को तुरंत पूर्ण आइकन दिखाई दे।

<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
  <path pathLength="1" d="M20 6 9 17l-5-5" class="draw-check"/>
</svg>
<style>
.draw-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>

← व्यावहारिक SVG गाइड और ट्यूटोरियल