20 أمثلة رائعة للرسوم المتحركة SVG

نشرت: 2019-04-15
20 أمثلة رائعة للرسوم المتحركة SVG

Scalable Vector Graphics (SVG) هو تنسيق صورة مكتوب في XML. باستخدام SVG ، يمكنك ترميز رسومات ثنائية الأبعاد قابلة للتطوير. بعد ذلك ، يمكنك تنفيذها وتعديلها في CSS و JavaScript.

يسمح SVG بثلاثة أنواع من الرسوم: الأشكال المتجهة (الخطوط المستقيمة والمنحنية في كل الاتجاهات والأشكال) ، والصور ، والنص. نظرًا لإمكانياته المتنوعة ، يلجأ مصممو الويب إلى SVG لعمل رسوم متحركة معقدة. إنها سهلة التثبيت ، ولا تفقد الجودة عند تغيير حجمها ، ولا تتطلب تشغيل أي تطبيقات تابعة لجهات خارجية.

نظرًا لأن الرسوم المتحركة لا تزال تزداد شيوعًا ، فإن معظمهم ليسوا على دراية بها. ستسلط هذه المقالة الضوء على 20 صورة متحركة رائعة من SVG تُظهر إمكانات هذا التنسيق.

1. أيقونات SVG الطبية بواسطة kittons

روابط سريعة

  • 1. أيقونات SVG الطبية بواسطة kittons
  • 2. تحوم عن طريق SeanMcCaffery
  • 3. اسحب لأسفل للتحديث (الطائرة الورقية) بقلم نيكولاي تالانوف
  • 4. فقط استمر في التقدم بقلم دياكو لطف الله
  • 5. تمت إضافة مرشحات SVG إلى فيديو HTML5
  • 6. اللغز
  • 7. Liner Gradient بواسطة باتريك يونغ
  • 8. دعونا نسافر بواسطة jjperezaguinaga
  • 9. الساعة لمحمد محبفر
  • 10. أيقونات متحركة لويجي دي روزا
  • 11. جميع الأجهزة في SVG بواسطة كريس غانون
  • 12. الشلال لكريس جانون
  • 13. مولد النبات من قبل بليك بوين
  • 14. أيقونة قابلة للنقر بواسطة هاميش ويليامز
  • 15. كعكة جديدة لماركو باريا
  • 16. آلة تمزيق الورق بقلم كريس غانون
  • 17. انخفاض PolyLion بواسطة GRAYGHOST
  • 18. ليلا محمل الساعة الرملية
  • 19. بقرة مستجيبة من قبل سارة دراسنر
  • 20. الطالب دوماني
  • دورك

هذه الرسوم المتحركة الدافئة والسلسة رائعة لأي موقع ويب متعلق بالصحة. أثناء سرد المواضيع المختلفة ، ستظهر الصور بمهارة. ستبني سيارة الإسعاف أو الذرة ، وستفتح العين ، ويقفز الطبيب. تُظهر هذه الرسوم المتحركة كل متعة وديناميكية SVG.

وصلة

2. تحوم عن طريق SeanMcCaffery

الرسوم المتحركة العالمية التي يمكنك وضعها على أي موقع ويب تفاعلي. المظهر الخفي للحدود عند التمرير يمنحك شعورًا مرضيًا ويدعوك للنقر فوق الارتباط.

وصلة

3. اسحب لأسفل للتحديث (الطائرة الورقية) بقلم نيكولاي تالانوف

عادة ، يتم تحديث الصفحات عندما "تسحب" عليها. هذه الرسوم المتحركة ترفع هذا إلى مستوى جديد. عندما تسحب لأسفل لتحريرها ، ستطلق طائرة ورقية في السماء. إذا كنت تريد أن يقوم زوارك بتحديث تطبيقك كثيرًا ، فيجب أن تفكر في إضافة رسم متحرك مثل هذا.

4. فقط استمر في التقدم بقلم دياكو لطف الله

رسم متحرك لـ SVG يُظهر إمكانات متجه التحجيم. إن الحركة السلسة الدقيقة لجسم الإنسان هي منومة مغناطيسية.

وصلة

5. تمت إضافة مرشحات SVG إلى فيديو HTML5

نظر Paul Irish من فريق Google Chrome في كيفية قيام SVG بتعديل المحتوى خارج الرسومات المتجهة. لقد قام بدمج CSS و SVG لإنشاء مرشحات مرئية مذهلة لإظهار أن رسوم SVG المتحركة يمكن أن تكون إضافة رائعة لمقطع فيديو جاهز.

وصلة

6. اللغز

يمكنك إنشاء ألغاز بانوراما تفاعلية مذهلة باستخدام رسوم SVG المتحركة. في هذا المثال ، يمكننا اختيار واحدة من العديد من الصور ونرى كيف تتفكك إلى العديد من القطع الصغيرة من اللغز. يمكنك إعادة بنائه أيضًا!

وصلة

7. Liner Gradient بواسطة باتريك يونغ

إذا كنت في أضواء النيون والخطوط الجميلة ، فسوف تستمتع بهذه الرسوم المتحركة. يوضح هذا العمل كيف أنك لست بحاجة إلى أي خطوط متحركة للحصول على رسوم متحركة رائعة ، فقط خط رائع ورمز لوني مناسب مع تأثير التدرج اللوني.

وصلة

8. دعونا نسافر بواسطة jjperezaguinaga

طائرتان ومنطاد هواء ساخن يدوران حول معالم شهيرة في العالم. هذه الرسوم المتحركة ملونة ومتفائلة ومذهلة. إنه يظهر كل ما يمكنك القيام به إذا كنت ماهرًا في SVG.

وصلة

9. الساعة لمحمد محبفر

رسم متحرك SVG بسيط لساعة متحركة تعرض الوقت الحالي. تعمل الحركة الهادئة للمؤشرات والتصميم البسيط على إحداث العجائب لهذه الرسوم المتحركة.

وصلة

10. أيقونات متحركة لويجي دي روزا

إذا قمت بالتمرير فوق هذه الرموز ، فستقوم بتشغيل الرسوم المتحركة ، وهي بسيطة ولكنها فعالة. يمكنك أن ترى أنه ليس عليك عمل المعجزات لإنشاء أيقونة متحركة رائعة.

11. جميع الأجهزة في SVG بواسطة كريس غانون

رسم متحرك لمرة واحدة يشمل جميع الأجهزة الذكية التي نستخدمها بأكثر الطرق إبداعًا. سيتحول سطح المكتب إلى كمبيوتر محمول ، كمبيوتر محمول إلى جهاز لوحي ، ثم إلى هاتف ذكي.

وصلة

12. الشلال لكريس جانون

واحد آخر لكريس غانون ، هذا عرض أنيق لقاع شلال رغوي. حركة الماء منظمة ، ويمكنك رؤية قطرات صغيرة من الماء المتناثر تغادر حدود الرسوم المتحركة لجعل كل شيء يبدو أكثر واقعية.

وصلة

13. مولد النبات من قبل بليك بوين

الآن هذا شيء آخر. عند النقر فوق الزر "إنشاء" ، سترى النباتات تنمو وتنمو. ولكن في كل مرة تنقر فيها ، ستتشكل أنماط مختلفة.

وصلة

14. أيقونة قابلة للنقر بواسطة هاميش ويليامز

SVG تفاعلي آخر يقوم بتشغيل رسم متحرك بمجرد النقر فوقه. سيبدأ هذا الرسم المتحرك "إرسال" بمجرد النقر فوقه.

وصلة

15. كعكة جديدة لماركو باريا

رسوم متحركة مثيرة للاهتمام تُظهر تكوين طبقة كعكة بطبقة. إنها رسوم متحركة مبهرة SVG مناسبة لبطاقة عيد ميلاد.

16. آلة تمزيق الورق بقلم كريس غانون

إذا كنت تستمتع بمشاهدة تمزيق الورق ، فسوف تستمتع بهذه الرسوم المتحركة التي تصور آلة تمزيق الورق بالورق مرات غير محدودة بتسلسل سلس.

وصلة

17. انخفاض PolyLion بواسطة GRAYGHOST

هذا رسم توضيحي ورسوم متحركة مذهلة تصور رأس أسد يظهر ويختفي في شكل مضلعات متحركة.

وصلة

18. ليلا محمل الساعة الرملية

رسوم متحركة أخرى فعالة تستخدم SVG فقط. كل 5 ثوانٍ ، تنقلب الساعة الرملية رأسًا على عقب وتبدأ دورة جديدة.

وصلة

19. بقرة مستجيبة من قبل سارة دراسنر

هذه رسوم متحركة تفاعلية مضحكة تسمح لك بالنقر فوق بقرة وسحبها حول القمر بينما ينظر إليها رائد فضاء محير.

20. الطالب دوماني

يبدو الطالب المتحمس جاهزًا للتعلم! إنها رسوم متحركة رائعة حيث تتحول صفحات الكتاب بدقة. لا يومض من الطالب ، ولكن لا يزال هذا رسمًا متحركًا منظمًا تمامًا لإنهاء هذه القائمة.

وصلة

دورك

ما هي رسوم SVG المتحركة المفضلة لديك غير المدرجة في هذه القائمة؟ شارك اختياراتك في التعليقات أدناه!