मुख्य सामग्री पर जाएँ
SVG → Animated SVG / CSS / React

SVG Animation Generator – CSS से SVG एनिमेट करें

किसी भी SVG को CSS से एनिमेट करें: Draw, Spin और Pulse जैसे 15 इफ़ेक्ट में से चुनें, पूरे ग्राफ़िक या हर एलिमेंट को एनिमेट करें, फिर CSS, एक आत्मनिर्भर एनिमेटेड SVG या React कंपोनेंट एक्सपोर्ट करें।

टूल के बटन और संदेश अभी अंग्रेज़ी में हैं। टूल का काम करने का तरीका अंग्रेज़ी पेज जैसा ही है।

इस टूल के बारे में

SVG एनिमेशन जनरेटर के बारे में

SVG एनिमेशन जनरेटर हाथ से keyframes लिखे बिना SVG में CSS एनिमेशन जोड़ता है। .svg फ़ाइल अपलोड करें या मार्कअप पेस्ट करें, फिर कोई इफ़ेक्ट चुनें: Draw, Spin, Pulse, Bounce, Float, Shake, Fade, Flip, Wobble, Heartbeat, Swing, Rubber Band, Jello, Blur In या Hue Shift। पूरे ग्राफ़िक को एनिमेट करें, या per-element मोड में जाकर हर path, circle, group या text एलिमेंट को उसका अपना एनिमेशन दें, साथ में वैकल्पिक stagger ताकि वे एक के बाद एक चलें। अवधि, देरी, easing (कस्टम cubic-bezier या steps समेत), दोहराव की संख्या, दिशा और transform origin सेट करें, और चुनें कि एनिमेशन अपने-आप चले, hover पर, क्लिक पर या लोड होने पर एक बार। Draw इफ़ेक्ट किसी भी लंबाई के path पर काम करता है। संतुष्ट होने पर सादा CSS, स्टाइल अंदर बनी हुई एक एनिमेटेड .svg फ़ाइल, या React कंपोनेंट कॉपी या डाउनलोड करें। एक्सपोर्ट की गई CSS उन विज़िटर्स के लिए एनिमेशन रोक देती है जिन्होंने reduced motion चालू किया है। अपलोड किए गए SVG से प्रीव्यू से पहले स्क्रिप्ट और event handler हटा दिए जाते हैं, और सब कुछ आपके ब्राउज़र में चलता है।

CSS से SVG एनिमेट करने वाले टूल का चित्र

एनिमेटेड SVG कहाँ काम आते हैं

वीडियो या GIF के बिना हल्का मोशन

वेबसाइट आइकन और हीरो

CSS की कुछ लाइनों से आइकन, लोगो और इलस्ट्रेशन में हल्का मोशन जोड़ें।

उदाहरणएक चेकमार्क आइकन “load” ट्रिगर के साथ Draw इफ़ेक्ट इस्तेमाल करता है, ताकि पेज खुलते ही वह एक बार ख़ुद बन जाए।

इंटरैक्टिव बटन

JavaScript लाइब्रेरी के बिना आइकन को hover या क्लिक पर प्रतिक्रिया देने लायक़ बनाएँ।

उदाहरणएक घंटी आइकन को hover पर Swing मिलता है, जिसे CSS के रूप में एक्सपोर्ट करके साइट की स्टाइलशीट में पेस्ट किया जाता है।

लोडर और स्पिनर

किसी भी SVG को ऐसे लोडिंग इंडिकेटर में बदलें जो हर साइज़ पर शार्प रहे।

उदाहरणper-element मोड में तीन circle 0.15 s के stagger के साथ Pulse इस्तेमाल करके डॉट लोडर बनाते हैं।

React और Next.js ऐप

बिना अतिरिक्त डिपेंडेंसी के किसी कंपोनेंट में एनिमेटेड ग्राफ़िक डालें।

उदाहरणReact एक्सपोर्ट एक AnimatedSvg कंपोनेंट देता है जिसमें स्टाइल SVG के अंदर बनी होती हैं।

लोगो रिवील

यादगार पहली छाप के लिए पेज लोड पर लोगो की आउटलाइन बनाएँ।

उदाहरणलाइन-आर्ट लोगो “load” ट्रिगर के साथ Draw इस्तेमाल करता है, ताकि वह एक बार एनिमेट होकर दिखता रहे।

नोटिफ़िकेशन और स्टेटस आइकन

छोटे एनिमेशन से अलर्ट, लाइक और सफलता की स्थिति पर ध्यान खींचें।

उदाहरणलाइक की पुष्टि के लिए दिल वाला आइकन क्लिक पर Heartbeat इस्तेमाल करता है।

स्मूद SVG एनिमेशन के सुझाव

मोशन को निखरा हुआ बनाएँ

Draw के लिए stroke चाहिए

Draw इफ़ेक्ट आउटलाइन को एनिमेट करता है, इसलिए यह stroke वाली और बिना fill वाली आकृतियों पर अच्छा लगता है। भरी हुई आकृतियाँ बनती हुई नहीं दिखेंगी।

सही origin सेट करें

Spin, Swing और Flip transform origin के चारों ओर घूमते हैं। आइकन के लिए center, और लटकने वाली चीज़ों के लिए, जैसे घंटी, top इस्तेमाल करें।

क्रम के लिए stagger इस्तेमाल करें

per-element मोड में 0.1 से 0.2 सेकंड का stagger हिस्सों को एक साथ नहीं, बल्कि एक के बाद एक दिखाता है।

एक्सपोर्ट से पहले ऑप्टिमाइज़ करें

कमेंट और अतिरिक्त ख़ाली जगह हटाने के लिए Optimize पर क्लिक करें, जिससे एक्सपोर्ट किया SVG छोटा रहता है।

अपने बैकग्राउंड पर प्रीव्यू करें

स्टेज का रंग अपनी साइट जैसा कर दें ताकि एक्सपोर्ट से पहले कंट्रास्ट परख सकें।

मोशन हल्का रखें

छोटे, हल्के एनिमेशन निखरे हुए लगते हैं। लंबा या लगातार मोशन विज़िटर्स का ध्यान आपके कंटेंट से भटका सकता है।