Keeping parts of an SVG at fixed size

user_6787580 0
Viewed 216

Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
 <path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>

svg javascript
1 Answers

So I managed to do something after some editing to your SVG.

To achieve what you're asking you'll need to use / have : - the SVG mask attribute - A very large shape for the mask ( as much large as the max scale you want to use on the visible shape ) - The shape that you want to resize - Resize the shape with transforms

Your SVG should looks like the following

<svg>
    <defs>
       <mask id="theMask">
          <path fill="#ffffff" d=""/>
       </mask>
    </defs>
    <g mask="url(#theMask)">
        <path fill="#ffffff" id="shapetoresize" d=""/>
    </g>
</svg>

enter image description here

I posted a pen as a "Proof of concept" Feel free to fork it and use it to achieve what you're trying to do. Codepen

note: as pointed out by @thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.

user_69982830
Related