svg on codepen has scrollbars can't get rid of it - html

Question

I don't know how to get rid of the scrollbars on my codepen example could someone please have a look at my SVG and CSS and see if you can remove the scrollbars without disrupting the image that's been generated. I need the image to fit without the scrollbars somehow there is overlapping I think
codepen
<svg viewBox="0 0 500 800" width="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%" >
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask" x="0" y="0" width="100%" height="100%" >
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>

Answer 1

If I understand correctly you want to get rid of the scrollbars but you also need the image to fit.
For the 1st part you just gotta add :
overflow: hidden;
to your body CSS. This will hide the scrollbars but wont prevent your svg to have a bigger height than the window and overflow.
So, for that you want to add :
svg {
max-height : 100%;
width: 100%;
}
(I put the width there instead of in the HTML code because it makes more sense to me but you can also leave it there and just add the max-height)
Edit : max-height is optional depending on the size/ratio of the picture in your project. It does mean that after a point your image could be smaller than width of the screen. But without it, in your current codepen the image would grow higher than the height of the frame.
Edit 2 : codepen link with adjustable hexagon sizes, min size and spacing.