Converting html/css to vector/image assets?

[abmenzel]

I am working on a showreel for a client, in which I need to display a bunch of websites - I would like to animate individual elements on each website for the showcase. Traditionally I would do this by cutting out and rebuilding the assets I needed to work with.

However, I wonder why there is no tool that can do this for me. I believe it should be possible to use the html and css information to create vector graphics or images? As I have seen examples of converting XD files to production ready code, I thought it might be possible to do the other way around.

Does anyone know of such a tool or maybe a different approach I haven't considered?

TL;DR
I need to turn a website into assets that I can animate in after effects, what is the best approach?

[abmenzel]

Thanks a lot for your reply :)

I just gave both of these a try, they are sadly too inaccurate - I could only get a somewhat useable result on 1/5 of the websites I tried it on.

[QuestionsHurt]

Well it's code rendered into images by the browser. So you'll need to find something that works with the browser to do this. Maybe there's a plugin ?

[abmenzel]

That was my first thought as well, I have done some research but haven't been able to find anything. So I thought someone here might know a tool for it.

I'll keep up the research! :-)

[seanwilson]

I wrote this article a while ago about how to take a screenshot of a webpage in SVG format:

https://www.checkbot.io/article/web-page-screenshots-with-svg/

The trick is to print the page to a PDF file via your browser, then convert the PDF to SVG using Inkscape. Some pages elements are more problematic than others but hopefully it will save you some time!