Awesome GitHub RepositoriesSVG Path Rendering

Wired-elements هي مكتبة مكونات ويب مرسومة باليد توفر مجموعة من عناصر HTML المنمقة لبناء الهياكل السلكية (wireframes) والنماذج الأولية. تعمل كإطار عمل لواجهة مستخدم للهيكلة السلكية يتيح إنشاء نماذج أولية منخفضة الدقة بجمالية تخطيطية يدوية. توفر المكتبة مكونات لتصميم الويب المرسوم باليد والنماذج الأولية السريعة لواجهة المستخدم. تم تصميم هذه العناصر لدعم الهيكلة السلكية منخفضة الدقة لتخطيط واجهات المستخدم واختبار التخطيطات قبل التطوير عالي الدقة. يستخدم المشروع بنية مكونات ويب مع رسومات متجهة قائمة على SVG للحفاظ على مظهر مرسوم باليد متسق. ويدعم التكامل في أطر عمل JavaScript مختلفة ويستخدم متغيرات CSS لتصميم سمات سمك الخط والألوان.

react-native-skia is a cross-platform graphics framework that provides a high-performance 2D graphics engine for rendering shapes, paths, and images. It functions as a vector graphics engine and UI animation toolkit, allowing for hardware-accelerated visuals across mobile and web platforms. The project is distinguished by its integration of the Skia 2D graphics library, enabling a shader and filter pipeline for complex pixel-level effects. It supports the rendering of Lottie animations exported from After Effects and the execution of animations directly on the UI thread to maintain fluid moti

Flubber is an SVG path morphing library and shape transition engine designed to calculate smooth interpolations between complex vector shapes. It functions as a vector shape interpolator that generates intermediate path states between two sets of coordinates based on a progress value. The toolkit provides specialized capabilities for managing transitions between different shape quantities, including the ability to split a single shape into multiple pieces or merge multiple shapes into one. It also enables morphing between custom paths and geometric primitives, such as circles and rectangles,

melonJS is a lightweight HTML5 game engine for building 2D games in the browser using JavaScript. It provides a complete framework for sprite animation, tilemap loading, physics simulation, input handling, and audio playback, with a unified rendering system that automatically switches between WebGL and Canvas2D backends without code changes. The engine distinguishes itself through several integrated capabilities. It features a per-sprite shader pipeline for custom fragment shader effects, a SAT-based collision engine with swappable physics adapters (including built-in SAT, Matter.js, and Plan

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

Snk is a GitHub profile readme widget that generates an animated snake visualization from a user's contribution graph data. It transforms the familiar contribution grid into a sequence where a snake moves across the cells, consuming them in order, and outputs the result as an animated SVG or GIF file. The project automates the entire workflow through a daily cron-triggered job, fetching contribution data via the GitHub GraphQL API, constructing the snake animation frame by frame, and exporting the final image. Users can customize the color palette of both the snake and the grid cells to match

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

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

Hanzi Writer هو مدرس تفاعلي لكتابة الأحرف الصينية ومكتبة رسوم متحركة SVG مصممة لتصور والتحقق من البناء المتسلسل للأحرف. يعمل كأداة تعليمية لممارسة الخط من خلال عرض رسوم متحركة لكل ضربة والتحقق من المسارات التي يرسمها المستخدم. توفر المكتبة نظاماً لمقارنة مدخلات المستخدم مقابل تسلسلات الضربات المحددة مسبقاً للتحقق من دقة الكتابة في الوقت الفعلي. ترشد المستخدمين من خلال تمارين تفاعلية، وتوجه عملية الكتابة وتقدم ملاحظات فورية حول ترتيب الضربات. تتعامل الأداة مع استرجاع بيانات إحداثيات الأحرف من مصادر بعيدة لعرض رسوم متحركة لمسارات SVG. وتقوم بربط أحداث الماوس واللمس بقطاعات المسار هذه لاكتشاف والتحقق من اكتمال كل ضربة.

Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based workflow designers and visual flow editors. It provides a framework for rendering interconnected nodes, edges, and groups to model technical architectures, business processes, and data-driven workflows. The project is distinguished by its ability to integrate custom UI components as graph nodes and its specialized support for data lineage visualization. It enables the mapping of relationships between data fields, tables, and business entities to track provenance and monitor workfl

SVGKit هو إطار عمل رسومي لأنظمة iOS وmacOS مصمم لعرض رسومات متجهة قابلة للتوسع (SVG) عالية الأداء. يعمل كمكتبة تستخدم تسريع العتاد الأصلي لعرض الرسوم المتجهة والتفاعل معها على منصات Apple. يوفر المشروع واجهة برمجية لتحرير عناصر المتجهات وكتابة الملفات المحدثة على القرص. كما يتضمن أدوات لتحويل الرسوم المتجهة إلى تنسيقات صور نقطية (rasterized bitmap) لاستخدامها في عارضات الصور القياسية. يتولى إطار العمل ترجمة المستندات القائمة على XML إلى تسلسل هرمي من الطبقات المسرعة بواسطة العتاد. تتضمن هذه العملية تحليل هيكل XML، وتعيين مساحات الإحداثيات، وتحويل مسارات المتجهات إلى بدائيات هندسية أصلية.

Peity هي مكتبة تصور بيانات SVG خفيفة الوزن تحول محتوى النص الرقمي وسمات HTML إلى مخططات دائرية، وحلقية، وشريطية، وخطية صغيرة. تعمل كمحرك عرض يعتمد على السمات وأداة تحسين تدريجي، حيث تضيف رسومات متجهة إلى صفحات الويب عن طريق قراءة البيانات مباشرة من DOM دون الحاجة إلى أطر عمل JavaScript ثقيلة. تدعم المكتبة وظائف الرسم المخصصة وتعيينات الألوان الديناميكية، مما يسمح بتسجيل أنواع مخططات جديدة واستخدام وظائف مخصصة لتحديد ألوان الأجزاء. يغطي سطح قدراتها عرض مخططات البيانات المصغرة، مثل الخطوط المتقاربة (sparklines) وحلقات التقدم لمقاييس لوحة التحكم. تتضمن القدرة على إعادة رسم التصورات تلقائياً عند تغير نص العنصر الأساسي وتسمح بتهيئة المخطط الفردي من خلال سمات بيانات HTML.

Leafer UI هو محرك عرض HTML5 canvas عالي الأداء ومكتبة رسومات متجهة ثنائية الأبعاد. يستخدم شجرة مشهد هرمية لإدارة الأشكال، والمسارات، والنصوص، مما يوفر مجموعة أدوات لبناء تطبيقات canvas تفاعلية ولوحات قماشية لانهائية واسعة. تم تصميم المحرك كمجموعة أدوات canvas عبر المنصات تفصل المنطق الأساسي عن واجهة برمجة تطبيقات الرسم، مما يسمح له بالعمل عبر بيئات الويب، والهاتف المحمول، والخادم، والبرامج المصغرة. ويتميز بتوفير أدوات متخصصة لتطوير محررات الرسوم التفاعلية، بما في ذلك اكتشاف الضربات (Hit detection)، وتصاعد الأحداث، وعناصر التحكم في التحويل. تغطي مساحة إمكانياته عرض الأشكال المتجهة، وإنشاء المسارات المعقدة، ورسوم الحركة. يتضمن إطار العمل محرك تخطيط مع نموذج صندوق مرن، وترجمة مساحة الإحداثيات لتحديد المواقع بدقة، ودعم العرض خارج الشاشة متعدد الخيوط في عمال الويب (Web workers). كما يوفر أدوات لإدارة المشهد، وإخفاء العناصر، وتصدير محتوى canvas إلى صور أو JSON. يمكن دمج المكتبة عبر وسم script قياسي أو استخدامها داخل أطر عمل تفاعلية مثل React وVue وNuxt.

Vello هي مكتبة رسومات عبر الأنظمة الأساسية ومحرك عرض متجه ثنائي الأبعاد مسرع بواسطة GPU. يعمل كمحرك لرسم مشاهد ثنائية الأبعاد عالية الأداء، وعرض ملفات الرسومات المتجهة القابلة للتوسع، وتشغيل رسوم Lottie المتحركة. يستخدم المشروع تظليلات الحوسبة (compute shaders) الخاصة بـ GPU للتنقيط (rasterization) ويخزن هندسة المتجهات في رسم بياني للمشهد مقيم في GPU لتقليل نقل البيانات. يستخدم بنية عرض مبلطة (tiled) وعرض مسار متوازي لمعالجة الصور المعقدة عبر واجهات برمجة تطبيقات رسومات متنوعة. توفر المكتبة تركيباً مسرعاً بواسطة الأجهزة وتمكن من إخراج البيانات المرئية ثنائية الأبعاد المعروضة مباشرة إلى نوافذ نظام التشغيل الأصلي عبر منصات أجهزة مختلفة.

This library is a declarative React component toolkit for constructing interactive, node-based diagramming interfaces and flow charts. It provides the foundational UI elements required to render draggable nodes and scalable vector graphics paths within a web browser, enabling the creation of complex visual editors and data flow representations. The library distinguishes itself through a strictly stateless architecture that relies on external state management. By utilizing a controlled input pattern and component injection, it decouples diagram logic from data storage, allowing developers to m

React Native Animated Charts is a user interface component library for building interactive line graphs and data visualizations within mobile applications. It functions as a cross-platform component for rendering scalable vector graphics chart paths, touch-following indicators, and dynamic axis labels on iOS and Android devices. The library incorporates data processing capabilities to prepare raw datasets for display. It handles cubic spline data smoothing to transform coordinate sets into continuous curves, alongside downsampling algorithms to reduce point density while retaining critical e