స్కేలబుల్ వెక్టర్ గ్రాఫిక్స్ (SVG) అనేది XML లో వ్రాయబడిన ఇమేజ్ ఫార్మాట్. SVG తో, మీరు రెండు డైమెన్షనల్ స్కేలబుల్ గ్రాఫిక్‌లను కోడ్ చేయవచ్చు. అప్పుడు, మీరు వాటిని CSS మరియు జావాస్క్రిప్ట్‌లో అమలు చేయవచ్చు మరియు సవరించవచ్చు.
SVG మూడు రకాల గ్రాఫిక్‌లను అనుమతిస్తుంది: వెక్టర్ ఆకారాలు (అన్ని దిశలు మరియు ఆకృతులలో సరళ మరియు వక్ర రేఖలు), చిత్రాలు మరియు వచనం. వివిధ సామర్థ్యాలు ఉన్నందున, వెబ్ డిజైనర్లు సంక్లిష్టమైన యానిమేషన్లు చేయడానికి SVG వైపు మొగ్గు చూపుతారు. అవి ఇన్‌స్టాల్ చేయడం సులభం, పున ized పరిమాణం చేసినప్పుడు నాణ్యతను కోల్పోకండి మరియు పని చేయడానికి మూడవ పార్టీ అనువర్తనాలు అవసరం లేదు.
యానిమేషన్లు ఇప్పటికీ జనాదరణలో పెరుగుతున్నందున, చాలా వరకు వాటికి పరిచయం లేదు. ఈ ఫార్మాట్ యొక్క సామర్థ్యాన్ని చూపించే 20 అద్భుతమైన SVG యానిమేషన్లను ఈ వ్యాసం హైలైట్ చేస్తుంది.
1. పిల్లుల ద్వారా వైద్య SVG చిహ్నాలు
త్వరిత లింకులు
- 1. పిల్లుల ద్వారా వైద్య SVG చిహ్నాలు
- 2. సీన్ఎంకాఫేరీ ద్వారా హోవర్ చేయండి
- 3. నికోలాయ్ తలానోవ్ చేత రిఫ్రెష్ (పేపర్ ప్లేన్) కు లాగండి
- 4. డియాకో ఎం. లోట్ఫోల్లాహి చేత కొనసాగించండి
- 5. HTML5 వీడియోకు SVG ఫిల్టర్లు జోడించబడ్డాయి
- 6. జా పజిల్
- 7. పాట్రిక్ యంగ్ చేత లైనర్ గ్రేడియంట్
- 8. jjperezaguinaga ద్వారా ప్రయాణం చేద్దాం
- 9. గడియారం మొహమ్మద్ మొహేబిఫర్
- 10. లుయిగి డి రోసా చేత యానిమేటెడ్ చిహ్నాలు
- 11. క్రిస్ గానన్ చేత SVG లోని అన్ని పరికరాలు
- 12. క్రిస్ గానన్ చేత జలపాతం
- 13. బ్లేక్ బోవెన్ చేత ప్లాంట్ జనరేటర్
- 14. హమీష్ విలియమ్స్ చేత క్లిక్ చేయగల ఐకాన్
- 15. మార్కో బార్రియా చేత కొత్త కేక్
- 16. క్రిస్ గానన్ రాసిన పేపర్ ష్రెడర్
- 17. గ్రే పాలిస్ట్ చేత తక్కువ పాలిలియన్
- 18. లీలా చేత హర్గ్లాస్ లోడర్
- 19. సారా డ్రాస్నర్ చేత ప్రతిస్పందించే ఆవు
- 20. డొమనీ చేత విద్యార్థి
- మీ వంతు
ఈ వెచ్చని మరియు మృదువైన యానిమేషన్ ఆరోగ్యానికి సంబంధించిన ఏదైనా వెబ్‌సైట్ కోసం చాలా బాగుంది. మీరు వేర్వేరు థ్రెడ్ల ద్వారా జాబితా చేస్తున్నప్పుడు, చిత్రాలు సూక్ష్మంగా కనిపిస్తాయి. అంబులెన్స్ కారు లేదా అణువు నిర్మిస్తుంది, కన్ను తెరుస్తుంది మరియు డాక్టర్ బయటకు దూకుతారు. ఈ యానిమేషన్ SVG యొక్క అన్ని ఆహ్లాదకరమైన మరియు చైతన్యాన్ని చూపిస్తుంది.
లింక్
2. సీన్ఎంకాఫేరీ ద్వారా హోవర్ చేయండి
మీరు ఏదైనా ఇంటరాక్టివ్ వెబ్‌సైట్‌కు ఉంచగల యూనివర్సల్ యానిమేషన్. మీరు హోవర్ చేసినప్పుడు సరిహద్దుల యొక్క సూక్ష్మ రూపం మిమ్మల్ని సంతృప్తికరమైన అనుభూతిని కలిగిస్తుంది మరియు లింక్‌ను క్లిక్ చేయడానికి మిమ్మల్ని ఆహ్వానిస్తుంది.
లింక్
3. నికోలాయ్ తలానోవ్ చేత రిఫ్రెష్ (పేపర్ ప్లేన్) కు లాగండి
సాధారణంగా, మీరు వాటిపై “క్రిందికి లాగినప్పుడు” పేజీలు రిఫ్రెష్ అవుతాయి. ఈ యానిమేషన్ దీన్ని కొత్త స్థాయికి తీసుకువస్తుంది. దాన్ని విడుదల చేయడానికి మీరు క్రిందికి లాగినప్పుడు, మీరు కాగితపు విమానాన్ని ఆకాశంలోకి లాంచ్ చేస్తారు. మీ సందర్శకులు మీ అనువర్తనాన్ని తరచుగా రిఫ్రెష్ చేయాలనుకుంటే, మీరు ఇలాంటి యానిమేషన్‌ను జోడించడాన్ని పరిగణించాలి.
4. డియాకో ఎం. లోట్ఫోల్లాహి చేత కొనసాగించండి
స్కేలింగ్ వెక్టర్ యొక్క సామర్థ్యాన్ని చూపించే SVG యానిమేషన్. మానవ శరీరం యొక్క మృదువైన ఖచ్చితమైన కదలిక హిప్నోటైజింగ్.
లింక్
5. HTML5 వీడియోకు SVG ఫిల్టర్లు జోడించబడ్డాయి
గూగుల్ క్రోమ్ బృందానికి చెందిన పాల్ ఐరిష్ వెక్టర్ గ్రాఫిక్స్ వెలుపల SVG కంటెంట్‌ను ఎలా సవరించగలదో చూశారు. అతను CSS మరియు SVG లను కలిపి అద్భుతమైన విజువల్ ఫిల్టర్లను తయారుచేసాడు, SVG యానిమేషన్ రెడీమేడ్ వీడియోకు చక్కటి అదనంగా ఉంటుందని చూపించడానికి.
లింక్
6. జా పజిల్
మీరు SVG యానిమేషన్‌తో అద్భుతమైన ఇంటరాక్టివ్ జా పజిల్స్ చేయవచ్చు. ఈ ఉదాహరణలో, మేము చాలా చిత్రాలలో ఒకదాన్ని ఎంచుకోవచ్చు మరియు ఇది పజిల్ యొక్క చాలా చిన్న ముక్కలకు ఎలా నిర్మిస్తుందో చూడవచ్చు. మీరు దాన్ని కూడా పునర్నిర్మించవచ్చు!
లింక్
7. పాట్రిక్ యంగ్ చేత లైనర్ గ్రేడియంట్
మీరు నియాన్ లైట్లు మరియు అందమైన ఫాంట్లలో ఉంటే, మీరు ఈ యానిమేషన్‌ను ఆనందిస్తారు. ఈ పని మీకు అద్భుతమైన యానిమేషన్ కోసం కదిలే పంక్తులు ఎలా అవసరం లేదని చూపిస్తుంది, ప్రవణత ప్రభావంతో గొప్ప ఫాంట్ మరియు సరైన రంగు కోడ్.
లింక్
8. jjperezaguinaga ద్వారా ప్రయాణం చేద్దాం
ప్రపంచంలోని ప్రసిద్ధ ప్రదేశాల చుట్టూ తిరుగుతున్న రెండు విమానాలు మరియు వేడి గాలి బెలూన్. ఈ యానిమేషన్ రంగురంగులది, ఆశావాదం మరియు మనసును కదిలించేది. మీరు SVG లో నైపుణ్యం ఉంటే మీరు చేయగలిగే ప్రతిదాన్ని ఇది చూపిస్తుంది.
లింక్
9. గడియారం మొహమ్మద్ మొహేబిఫర్
ప్రస్తుత సమయాన్ని చూపించే కదిలే గడియారం యొక్క సాధారణ SVG యానిమేషన్. పాయింటర్ల యొక్క ఓదార్పు కదలిక మరియు మినిమాలిక్ డిజైన్ ఈ యానిమేషన్ కోసం అద్భుతాలు చేస్తాయి.
లింక్
10. లుయిగి డి రోసా చేత యానిమేటెడ్ చిహ్నాలు
మీరు ఈ చిహ్నాలపై హోవర్ చేస్తే మీరు యానిమేషన్లను ప్రేరేపిస్తారు, అవి సరళమైనవి కాని ప్రభావవంతమైనవి. ఆకట్టుకునే యానిమేటెడ్ చిహ్నాన్ని రూపొందించడానికి మీరు అద్భుతాలు చేయనవసరం లేదని మీరు చూడవచ్చు.
11. క్రిస్ గానన్ చేత SVG లోని అన్ని పరికరాలు
మేము అత్యంత సృజనాత్మకంగా ఉపయోగించే అన్ని స్మార్ట్ పరికరాల మీదుగా వెళ్లే వన్ టేక్ యానిమేషన్. డెస్క్‌టాప్ ల్యాప్‌టాప్‌గా, ల్యాప్‌టాప్‌ను టాబ్లెట్‌గా, ఆపై స్మార్ట్‌ఫోన్‌గా మారుతుంది.
లింక్
12. క్రిస్ గానన్ చేత జలపాతం
క్రిస్ గానన్ రాసిన మరొకటి, ఇది ఒక నురుగు జలపాతం అడుగున చక్కని ప్రదర్శన. నీటి కదలిక చక్కగా ఉంది మరియు ప్రతిదీ మరింత వాస్తవికంగా కనిపించేలా చేయడానికి యానిమేషన్ యొక్క సరిహద్దులను వదిలివేసే చిన్న నీటి చుక్కలను మీరు చూడవచ్చు.
లింక్
13. బ్లేక్ బోవెన్ చేత ప్లాంట్ జనరేటర్
ఇప్పుడు ఇది మరొకటి. మీరు 'సృష్టించు' బటన్ పై క్లిక్ చేసినప్పుడు, మొక్కలు పెరగడం మరియు పెరగడం మీరు చూస్తారు. కానీ మీరు క్లిక్ చేసిన ప్రతిసారీ, విభిన్న నమూనాలు ఏర్పడతాయి.
లింక్
14. హమీష్ విలియమ్స్ చేత క్లిక్ చేయగల ఐకాన్
మీరు యానిమేషన్‌ను క్లిక్ చేసిన తర్వాత దాన్ని ప్రేరేపించే మరొక ఇంటరాక్టివ్ SVG. మీరు క్లిక్ చేసిన తర్వాత ఇది “పంపు” యానిమేషన్‌ను ప్రారంభిస్తుంది.
లింక్
15. మార్కో బార్రియా చేత కొత్త కేక్
లేయర్ వారీగా కేక్ పొరను తయారు చేయడాన్ని చూపించే ఆసక్తికరమైన యానిమేషన్. ఇది పుట్టినరోజు కార్డుకు అనువైన SVG యానిమేషన్.
16. క్రిస్ గానన్ రాసిన పేపర్ ష్రెడర్
మీరు కాగితపు ముక్కలు చూడటం ఆనందించినట్లయితే, ఈ యానిమేషన్‌ను మీరు ఆనందిస్తారు, ఇది మెషీన్ ముక్కలు చేసే కాగితాన్ని కాగితం ద్వారా అపరిమిత సార్లు అతుకులు లేకుండా చిత్రీకరిస్తుంది.
లింక్
17. గ్రే పాలిస్ట్ చేత తక్కువ పాలిలియన్
ఇది మనస్సును కదిలించే దృష్టాంతం మరియు యానిమేషన్, ఇది సింహం తల యానిమేటెడ్ బహుభుజాల రూపంలో కనిపించడం మరియు కనుమరుగవుతుంది.
లింక్
18. లీలా చేత హర్గ్లాస్ లోడర్
SVG ని మాత్రమే ఉపయోగించే మరొక ప్రభావవంతమైన యానిమేషన్. ప్రతి 5 సెకన్లకు, గంటగ్లాస్ తలక్రిందులుగా మారి కొత్త చక్రం ప్రారంభమవుతుంది.
లింక్
19. సారా డ్రాస్నర్ చేత ప్రతిస్పందించే ఆవు
ఇది ఒక ఫన్నీ ఇంటరాక్టివ్ యానిమేషన్, ఇది ఒక ఆవుపై క్లిక్ చేసి చంద్రుని చుట్టూ లాగడానికి మిమ్మల్ని అనుమతిస్తుంది.
20. డొమనీ చేత విద్యార్థి
ఉత్సాహభరితమైన విద్యార్థి నేర్చుకోవడానికి సిద్ధంగా ఉన్నాడు! పుస్తక పేజీలు చక్కగా తిరిగే గొప్ప యానిమేషన్ ఇది. విద్యార్థి నుండి మెరిసేది లేదు, కానీ ఈ జాబితాను ముగించడానికి ఇది ఇప్పటికీ చక్కనైన యానిమేషన్.
లింక్
మీ వంతు
ఈ జాబితాలో చేర్చబడని మీకు ఇష్టమైన SVG యానిమేషన్లు ఏమిటి? దిగువ వ్యాఖ్యలలో మీ ఎంపికలను పంచుకోండి!
