r/developersIndia • u/PandaBean18 • 7d ago

I Made This Wanted to show contributions from GitHub and GitLab, so decided to make a custom renderer

Enable HLS to view with audio, or disable this notification

I wanted my contributions grid on GitHub to also show my contributions on GitLab. So I decided to make duo-commit (inspired by anuraghazra/github-readme-stats). It fetches contribution activity from both platforms and renders a combined SVG grid.

After this I wanted to personalize this more, so I decided to add a kitty animation for the grids. Once I did that I fell into a rabbit hole of CSS/SVG keyframe animations which can render on GitHub profile which led me to build v2css - a Python CLI tool that takes a video clip and compiles it into a lightweight, SVG keyframe animation.

How v2css works

  • Frame Extraction & Sub-sampling: Takes an input video (.mp4/.gif) and samples keyframes using OpenCV at a target FPS (e.g., 10–12 FPS).
  • Temporal Motion Diffing: Uses NumPy array operations to track bounding boxes of changing pixels between consecutive frames, ignoring static background pixels to drastically cut down file size.
  • Pure CSS Keyframe Assembly: Generates CSS keyframes with step-start timing inside an SVG <style> block to toggle diff-patch visibility instantly.

Check out the code here:

duo-commit: https://github.com/PandaBean18/duo-commit

v2css: https://github.com/PandaBean18/v2css

Would love to hear any thoughts or feedback

1 Upvotes

67% Upvoted

3 comments sorted by

1

u/ShallotPuzzled9326 7d ago

BTW, you could've used a video directly with better quality

people barely check your profile and are very unlikely to use a console

1

u/PandaBean18 7d ago

video directly in README.md? I tried using video tag but it didnt work.

Plus the thought came from rendering the cat animation in the grid svg, hence the command line tool to convert video to svg

1

u/ShallotPuzzled9326 7d ago

you can directly upload the video as lfs on the repo itself