I would consider this more of a proof of concept than anything really useful. While it can be argued that CSS is intended for presentation, there doesn’t seem to be any significant savings in terms of the number of bytes compared to a PNG. In either case, an SVG would be more appropriate for embedded graphics.
This is true if the specific page exists in a vacuum. If the logo file is cached on the first visit, the HTTP request will not be sent when viewing subsequent pages featuring the logo. This is of course true for the CSS as well (assuming an external CSS file), however, if all the graphics on the website, not all of which is likely to be present on each page, are created using CSS, the user will have to download a much larger CSS-file on the first visit. A solution could of course be made in which the CSS-file served is generated based on which graphics are going to be displayed on each specific page, with subsequent CSS files being served with additional CSS if additional pages require more CSS graphics, on a session-basis, but I would consider this slightly overkill.
As mentioned, if you really want to get rid of the HTTP request, an SVG image loaded as part of the page code would be a much more straight-forward approach.
Another alternative could be to use sprites for the graphics, but that’s another matter entirely.
Interesting exercise but I don’t quite understand the practical use of such a technique unless the end goal includes animation. I don’t believe the cost is justifiable either in comparison to simply saving an image. Also, search engines won’t be able to discern that as an “image”. As far as saving bandwidth goes I think that will nearly equal out considering the mountain of none semantic mark-up and styles. Neat idea but unless there is animation involved waste of time. I believe though the could achieve the same type of dynamic effects using svg. So perhaps it is a waste of time all around from a practical stand-point.