DEV Community

 ✽

Posted on

custom profile readme

So I wanted to make one of those fancy custom profile readmes,
Initially I was just going to have a few links there and some description - but since I saw someone using svg I thought I'd try using foreignObject to actually have some custom CSS and markup.

So I spend around an hour designing a silly readme layout, only to realize GitHub renders a static version of it, so none of my custom animations will work :(

I ended up completing it anyway, and it seems clicking on the rendered svg on my profile opens up a version of it (cached by github) in which the animations actually work!

profile

The above image is the final result. The code for the backend which populates the svg template can be seen at avail/readme-backend

Top comments (2)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I love the button animations. It's quite annoying that github serves pre-rendered versions of SVG Images, because it just breaks them. Then again, it's probably for security reasons, and definitely easier than sandboxing the whole readme.

Collapse
 
saboorhamedi profile image
saboor

👍👍👍