HTML5 SVG制作滚动变形的半圆形页面头部特效 A curved cut header image effect

Scroll down to see the effect. Actually I just wanted to code a layout idea with a curved cut header image, but ended up with this one. Even though it looks fine and performance quite good, I dislike the idea of having an inline svg in the markup, that only has an asthetic/design function. Any ideas on how to improve this pen are welcome.

If you browsing with Chrome, make sure you have the "experimental Web Platform features" enabled (go to chrome://flags/), to see image's mix-blend-mode effect.