 I don't know if you remember me saying those masked head images, I've got a plan for that. That should mean that I can do this kind of effect and then have other stuff behind it peaking through and all the rest of it, which is exactly the effect that I want. And I didn't know exactly how I was going to achieve it. I was wrong. I was very wrong because it turns out Edge doesn't support clip path. Fair enough, every browser is at a different stage of supporting this and that, so it's not a big deal. But it was going to be my solution. If you remember, this is what I had, these images. I wanted the image itself to do kind of a background size cover and then for the clip at the bottom to just be applied kind of after the fact, just to do that diagonal slice along the bottom. And I know I could use a canvas because it would be a few lines of code to actually clip like that. But I didn't want to. And the reason I didn't want to is because it felt like it would make JavaScript a requirement to get the basic page content there. And that's not something I wanted to do. And I felt like it should be doable either directly with SVG or, well, it was going to be fine with clip path. But as I say, I can't use that. So here's where we kind of left the SVG version because I had to go back to the drawing board a little bit. So it was either going to scale down like this, which would leave a gap at the top of the page. Or it would squash and stretch and causing the image to distort. And I was like, neither is good. This one was the least bad version, though. I felt that if I set this as a background image and it told it to background size cover from the bottom, then I would end up with something like this, which actually wasn't miles off until it kind of gets to this. Maybe a bit smaller. There we are. This point where if you've got the wrong kind of image, I say wrong, it's a bit hard on Darren. Darren's getting clipped. And so that wasn't good. And so my solution there was to do this, where as it gets wider, we transform it down. And you can do that with some CSS inside the SVG, which you can see here. And it's basically done on breakpoints. So I have to kind of tweak it as we go. The idea is that you can transform the image that is inside the pattern. And that will probably be in here in the depths, inside the pattern. There you are. There's the image. We can transform that down proportional to the viewport width. So as it gets wider, it gets pushed down more. It gets transformed down even more. Problem being, Edge doesn't support transforms CSS transforms on SVG elements yet. Right. So that solution didn't work. And to be clear, I spent six hours on this particular problem trying every different permutation, trying to get something that would work happily in Chrome, in Firefox, in Safari, and Edge. And it was a real toughy, actually. It really took it out of me because I was just trying so many different combinations and thinking, one of these should work anyway. The clue that I should have heard in my inside voice, inside my head, was I want something that behaves like a div with background size cover and yet to be like it's in SVG with the clipping. If you've not come across for an object, welcome to foreign object 101 with me, where I explain how it is that I'm actually using foreign object. This, in fact, gives me, by the way, the same kind of look as I had in the previous one, but it actually works everywhere. And the way it does it, let me switch across to the code, is we have foreign object inside of the SVG. And we can apply that clip to the foreign object. So that's going to clip whatever the foreign object is. And the foreign object is just 100% width and height. What is foreign object? Right. It allows you to embed some HTML inside of an SVG. So I have in here a div. And I probably need to add some ARIA roles to that to make sure that this is showing up correctly for screen readers and the like. But you can see all these breakpoints. Basically, that div has a background. And you can see that's kind of dynamically set. But all the same, it has a background image set to background size cover. And so the foreign object is basically drop that image inside of the SVG as this kind of totally other rendered thing, which happens to be the correct thing that I want. And I set it with background position to move it down proportional to the screens width. Why don't I use transform? Well, two reasons. Firstly, thankfully, I'm not animating this. So I don't need to worry about using, say, just transforms an opacity. If I did, then this would be problematic. Because if you try and transform this down, the foreign object and the clip and the transform don't work with Safari. That particular combination, it stops clipping and just starts to transform the content down. So the fact that I want it transformed or at least to be moved and clipped and in HTML and all the rest of it means foreign object. It means using background position, which I can set and I can use to move things in, as I say, because I'm not animating background position, it's not going to be a performance issue. And there you go. That's six hours of my life fighting. I know you can see there's quite a lot of break points, but it does at least work to which we can say, Paul won. Browsers, nil.