SVG Animation resize to stay within the viewport & stuck to the fold

Question

I have an SVG which I'm trying to get to scale down with the window viewport. While also being stuck to the bottom folder of the window.

Currently, if you scale down the width of the window the SVG will re-size too but as it maintains its aspect ratio the height of the svg will decrease which I do not want. I always want the height of the SVG to be 100vh.

I've tried to change the AspectRatio preserveAspectRatio:'xMidYMin slice'

It does maintain its size but is then cropped by the width as the browser is resized.

My SVG;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2489 1800" width="2489" height="1800" preserveAspectRatio="xMidYMin slice" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
    <defs>
        <clipPath id="animationMask_oMFKjCmaS2">
            <rect width="2489" height="1800" x="0" y="0"></rect>
        </clipPath>
        <clipPath id="cp_MJBYT3Jk">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
        <clipPath id="cp_3iMIjxYs">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
        <clipPath id="cp_LphEsRvd">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
    </defs>
    <g clip-path="url(#animationMask_oMFKjCmaS2)">
        <g clip-path="url(#cp_LphEsRvd)" transform="matrix(1.551110029220581,0,0,1.551110029220581,1.6119384765625,10.00048828125)" opacity="1" style="display: block;">
            <g transform="matrix(1,0,0,1,848,450)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
        </g>
        <g clip-path="url(#cp_3iMIjxYs)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-0.1380615234375,11.75048828125)" opacity="1" style="display: block;">
            <g transform="matrix(0.4881500005722046,0,0,0.4881500005722046,980,560)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,106,30)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
            <g transform="matrix(1,0,0,1,800,450)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(237,100,30)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                </g>
            </g>
        </g>
        <g clip-path="url(#cp_MJBYT3Jk)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-4.1380615234375,10.75048828125)" opacity="1" style="display: block;">
            <g transform="matrix(0.39351001381874084,0,0,0.39351001381874084,586,674)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,93,184)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,93,184)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
            <g transform="matrix(0.7595199942588806,0,0,0.7595199942588806,464,582)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(236,83,169)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

CodePen example - https://codepen.io/SamXronn/pen/MxvPER

I have updated your codepen, is this what you are looking for? https://codepen.io/anon/pen/rRqNow — osynligsebastian, Mar 20 '19 at 13:13
@osynligsebastian Hi that's working as expected just had a strange error with codepen reloading constantly. If you create an answer I can vote you — archvist, Mar 20 '19 at 13:49

SVG Animation resize to stay within the viewport & stuck to the fold

0 Answers0