yun

Updated I managed to solve the issue of placing the image in the SVG however I'm encountering an issue with fitting the SVG to the full height of its container. Presently, it appears too large and gets cut off. I attempted to use preserveAspectRatio(xMidYMid meet), but it doesn't stretch to fill the container. Any suggestions on how to resolve this? This is the link to the website: https://cyan-rhombus-xz7h.squarespace.com Password: 1234

This is the link to the website: https://cyan-rhombus-xz7h.squarespace.com Password: 1234 This is the look I'm hoping to achieve.

I'm looking for help to insert an image into a white SVG container. I want the SVG to be resizable based on width and height, without stretching the image. Once the image is "inside" the SVG, I should be able to see the blue background. Below is my current code. <style> .svg-container{ background-image: url( 'https://dummyimage.com/1080x1920/000/fff.png' ); background-size:cover; background-position: center; } </style> <div class="parent" style="height: 500px; display: flex;"> <div class="clild1" style="width: 50%; height: 100%; background-color: bisque;"> </div> <div class="child2" style="width: 50%; height: 100%; background-color: blue;"> <div class="svg-container" style="width: 100%; height: 100%;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.967 906.027" style="width: 100%; height: 100%;" preserveAspectRatio="none"> <!-- SVG content --> <g id="DSC_5358-Edit" transform="translate(-0.033 23.834)" fill="white"> <path d="M.033,84.049,512-23.834V882.192L.033,696.119Z" stroke="none"/> <path d="M 507.0001220703125 -17.6710205078125 L 5.0333251953125 88.10479736328125 L 5.0333251953125 692.6162719726562 L 507.0001220703125 875.0551147460938 L 507.0001220703125 -17.6710205078125 M 512.0001220703125 -23.83447265625 L 512.0001220703125 882.1923828125 L 0.0333251953125 696.1190795898438 L 0.0333251953125 84.048583984375 L 512.0001220703125 -23.83447265625 Z" stroke="none" fill="#6e6e6e"/> </g> </svg> </div> </div> </div>

I'd like to add line animation on scroll to my page. Can anyone help me with this? I took the reference link from https://www.youtube.com/watch?v=FJ44qmE5odc . My website link:https://garlic-cat-a9yl.squarespace.com/home-test password: 1234 I tried pasting the script and CSS in the page header but it doesn't work too.