Svg height greater than path height - html

I'm trying to make the top edge of a website footer wavvy by using a svg.
My svg:
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 190.97">
<path class="cls-2" d="M924.04,146.21c-76.43,5.57-72.82,6.94-181.21,15.68-101.37,8.17-186.53,15.03-294.66,19.39-127.28,5.13-225.98,4.36-297.61,3.71-44.28-.4-94.82-1.28-150.55-3v10.98H1335v-63.26c-40.08,.65-76.99,1.52-110.4,2.47-84.89,2.41-179.64,5.22-300.56,14.03Z"></path>
</svg>
For some reason, the svg ends up with height=272.22px but the path height=90.17px.
I can't see any css settings that interferes with anything here.
Here's the result I'm getting:
I want to get rid of this extra white space:
.
Can anyone advise please?
NB: I'm not very experienced and have rarely used svgs before so it's very possible I've left something out or I've overlooked something. I've already tried looking this up but couldn't come up with a solution. All I can find is in relation to making the path the same height as the svg element but I want to achieve the opposite.
Many thanks!


The width and en height of the viewbox should match the size of the elements in the SVG. Your path has a height of 63.26, so here I moved up the path shape and made the height of the viewbox 63.26.
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 63.26">
<path class="cls-2" d="M 924.04 16.5 c -76.43 5.57 -72.82 6.94 -181.21 15.68 c -101.37 8.17 -186.53 15.03 -294.66 19.39 c -127.28 5.13 -225.98 4.36 -297.61 3.71 c -44.28 -0.4 -94.82 -1.28 -150.55 -3 v 10.98 H 1335 v -63.26 c -40.08 0.65 -76.99 1.52 -110.4 2.47 c -84.89 2.41 -179.64 5.22 -300.56 14.03 Z"></path>
</svg>


Use preserveAspectRatio="none":
svg {
width: 500px;
height: 50px;
}
<svg viewBox='0 0 100 100' preserveAspectRatio="none">
<path d="M 0,80 C 50,120 50,-50 100,20 V 100 H 0 Z" fill='lightblue' />
</svg>

Related

How to change position of SVG path (elliptical arc) with CSS

I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>

You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>

The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>

I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");

I don't understand SVG scaling. Svg is not it's full canvas width and height

I want this svg to be 69px width and height. But it's not scaling or I don't understand viewbox.
picture is here
I understand that width and height applies to rect, path etc and viewbox is the canvas in which the svg is inside.
AS you can see from the code snippet below. The svg is 69px, but the logo inside sticks to the top left corner, but I want it to be as wide an tall as possible: 69px
<svg width="69" height="69" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4415 6.28449C10.4415 7.10822 10.4463 7.93207 10.4381 8.75576C10.4361 8.95977 10.5112 9.03203 10.713 9.02471C11.0684 9.01173 11.4277 9.0434 11.7797 9.00514C12.7047 8.90464 13.4368 8.49129 13.8053 7.60841C14.1704 6.73343 14.1651 5.83436 13.8403 4.94898C13.5425 4.1373 12.8973 3.74903 12.0656 3.6199C11.6197 3.55068 11.1704 3.58806 10.7227 3.58223C10.4551 3.57876 10.4422 3.59445 10.4418 3.85541C10.4407 4.6651 10.4414 5.47479 10.4415 6.28449ZM5.98329 6.20077C5.98329 4.89727 5.98184 3.59381 5.98462 2.29031C5.98513 2.06529 6.00176 1.84022 6.01377 1.61529C6.05083 0.922079 6.61303 0.369839 7.27299 0.263374C7.46967 0.23162 7.66715 0.213693 7.86776 0.214073C9.54884 0.216906 11.2301 0.20215 12.911 0.219655C14.2466 0.233565 15.4895 0.594481 16.5741 1.3772C17.6351 2.14283 18.2553 3.20655 18.4851 4.47521C18.7648 6.01934 18.7748 7.55987 18.2195 9.0582C17.6923 10.4806 16.6843 11.4255 15.2541 11.9599C14.3371 12.3026 13.3866 12.3915 12.4238 12.4004C10.9636 12.4138 9.50323 12.408 8.04298 12.4028C7.47219 12.4007 6.95239 12.2657 6.52485 11.8465C6.11906 11.4488 5.97962 10.9621 5.97598 10.4283C5.96645 9.01918 5.97274 7.60993 5.97274 6.20077H5.98329Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.62759 7.66138C4.57612 8.67961 4.61447 9.66663 4.57702 10.6511C4.53697 11.7049 3.84084 12.5047 2.67921 12.5854C2.10363 12.6254 1.54002 12.6071 1.01745 12.3268C0.417807 12.005 0.115548 11.4857 0.0332615 10.8337C-0.0233346 10.3855 0.0103495 9.93313 0.00808393 9.48266C0.00295437 8.47551 0.00739998 7.46837 2.34042e-05 6.46122C-0.00136301 6.26698 0.0585673 6.15704 0.254303 6.0836C1.23221 5.71668 2.20494 5.33615 3.17828 4.9573C3.56209 4.80792 3.94194 4.64865 4.32499 4.49732C4.60865 4.38519 4.62703 4.39787 4.62729 4.69385C4.62806 5.69398 4.62759 6.69406 4.62759 7.66138Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0324214 3.16745C0.0566586 2.70299 -0.0246875 2.12373 0.113853 1.55369C0.343614 0.608484 1.10364 0.0115526 2.08552 0.000855396C2.5353 -0.00404927 2.97858 0.00707082 3.40737 0.172054C4.10045 0.438639 4.6214 1.16368 4.63196 1.90255C4.63538 2.14191 4.61777 2.38254 4.63705 2.62041C4.6553 2.84581 4.56994 2.95562 4.35638 3.03722C3.11665 3.51082 1.88252 3.99879 0.646386 4.4816C0.50092 4.53843 0.352762 4.58887 0.209434 4.65044C0.0699954 4.71035 0.0308826 4.65496 0.0316092 4.52393C0.0338321 4.10851 0.0324214 3.6931 0.0324214 3.16745Z" fill="black"/>
</svg>

My suggestion is to use an external editor (like https://jakearchibald.github.io/svgomg/), as there would be too many changes to be made within path and d.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 69" style="enable-background:new 0 0 69 69;width: 69px;height: 69px;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M38.6,34.4c0,3,0,6.1,0,9.1c0,0.8,0.3,1,1,1c1.3,0,2.6,0.1,3.9-0.1c3.4-0.4,6.1-1.9,7.5-5.2
c1.3-3.2,1.3-6.6,0.1-9.8c-1.1-3-3.5-4.4-6.6-4.9c-1.6-0.3-3.3-0.1-5-0.1c-1,0-1,0-1,1C38.6,28.5,38.6,31.4,38.6,34.4z M22.1,34.1
c0-4.8,0-9.6,0-14.4c0-0.8,0.1-1.7,0.1-2.5c0.1-2.6,2.2-4.6,4.7-5c0.7-0.1,1.5-0.2,2.2-0.2c6.2,0,12.4,0,18.6,0
c4.9,0.1,9.5,1.4,13.5,4.3c3.9,2.8,6.2,6.8,7.1,11.4c1,5.7,1.1,11.4-1,16.9c-1.9,5.3-5.7,8.7-11,10.7C53,56.7,49.5,57,45.9,57
c-5.4,0-10.8,0-16.2,0c-2.1,0-4-0.5-5.6-2.1c-1.5-1.5-2-3.3-2-5.2C22,44.5,22.1,39.3,22.1,34.1L22.1,34.1z"/>
<path class="st0" d="M17.1,39.5c-0.2,3.8,0,7.4-0.2,11c-0.1,3.9-2.7,6.8-7,7.1c-2.1,0.1-4.2,0.1-6.1-1c-2.2-1.2-3.3-3.1-3.6-5.5
c-0.2-1.7-0.1-3.3-0.1-5c0-3.7,0-7.4,0-11.2c0-0.7,0.2-1.1,0.9-1.4c3.6-1.4,7.2-2.8,10.8-4.2c1.4-0.6,2.8-1.1,4.2-1.7
c1-0.4,1.1-0.4,1.1,0.7C17.1,32.3,17.1,36,17.1,39.5z"/>
<path class="st0" d="M0.1,22.9c0.1-1.7-0.2-3.9,0.3-6c0.8-3.5,3.7-5.7,7.3-5.7c1.7,0,3.3,0,4.9,0.6c2.6,1,4.5,3.7,4.5,6.4
c0,0.9-0.1,1.8,0,2.7c0.1,0.8-0.2,1.2-1,1.5C11.5,24.2,7,26,2.4,27.8c-0.5,0.2-1.1,0.4-1.6,0.6c-0.5,0.2-0.7,0-0.7-0.5
C0.1,26.4,0.1,24.9,0.1,22.9z"/>
</svg>
Basically the changes to width and height (to 68px) only apply to the canvas but the content is inside path so you should, point by point, move the image.
It is doable but it is hard work, I prefer to help myself with external editors.

i was having issues with svg scaling also recently. What i found helpful was this post by css-tricks. I will attach the link here: https://css-tricks.com/scale-svg/
i hope this brings more clarity to your issue :)
edit: playing around with the svg you provided i changed the aspect ratio and viewbox to fit in the svg (making it 'scale' to the wanted width, with reduced height in order to preserve its aspect ratio without distorting or cutting the svg).
here is what i changed:
<svg width="69" height="49" viewBox="0 -2 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">

SVG pattern set as background-image, blurry in Safari but not Firefox?

I have a SVG that I want to use as the background for a website, I made it so that the SVG itself repeats and fills up the screen. I also rotated the pattern -25 degrees in order to achieve the effect that I wanted. I took the whole SVG, encoded it using an online URL-encoder and made it the background-image of an element.
Problem:
The pattern looks great on Firefox, but on Safari, the SVG pattern looks blurry/pixelated on both macOS and iOS.
Screenshot of SVG Pattern on Firefox
Screenshot of SVG Pattern on Safari
Example up on CodePen
<svg version="1.1" id="BlackOnBlackPattern" width="100%" height="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs7"/>
<pattern id="pattern" x="0" y="0" width="512" height="512" patternTransform="rotate(-25)" patternUnits="userSpaceOnUse">
<path id="blackSquare" style="fill:#000000" d="M 0,384 V 256 H 128 256 V 128 0 H 384 512 V 128 256 H 384 256 V 384 512 H 128 0 Z" />
<path id="logoBird" style="fill:#000000;stroke-width:0.680128" d="m 129.64298,40.000872 c -9.21804,0.03838 -18.59563,1.456395 -27.85009,4.403021 C 88.498002,48.636982 77.894858,54.853476 67.654423,64.420807 50.405565,80.535864 41.234652,100.07299 40.094015,123.13291 c -1.213221,24.52736 9.377815,49.56649 28.161493,66.57969 3.057867,2.76963 7.493507,6.27893 9.856924,7.79847 5.872595,3.77573 6.702193,3.52936 8.86867,-2.63686 l 1.75857,-5.00519 0.0094,-26.02708 c 0.01049,-25.11511 0.06724,-26.21112 1.596113,-31.29034 1.942724,-6.45424 3.259875,-8.96541 7.347003,-14.00287 1.748214,-2.15469 3.178692,-4.26503 3.178692,-4.68976 0,-1.77256 -2.232527,-3.61866 -5.268931,-4.35481 -5.352708,-1.2977 -8.390585,-3.15065 -10.296911,-6.28258 -0.969515,-1.59281 -1.762633,-3.71266 -1.762633,-4.710626 0,-1.741713 0.06183,-1.772779 1.540606,-0.77554 2.011443,1.356475 13.522274,1.471495 15.393929,0.153803 2.11787,-1.491029 0.75915,-3.647459 -3.418319,-5.426211 -4.481984,-1.908443 -5.962952,-3.925071 -6.701249,-9.122771 -0.309343,-2.177873 -1.041901,-4.852565 -1.627256,-5.942377 -1.298632,-2.417897 -0.58623,-2.540303 3.549635,-0.612624 1.61468,0.752577 3.77541,2.430399 4.803231,3.727843 2.371759,2.993897 5.619358,4.908066 8.328508,4.911355 4.6624,0.0069 5.03416,-3.701391 1.00451,-10.007812 -2.9553,-4.625079 -3.87886,-8.484827 -1.55956,-6.518495 0.66714,0.565614 2.84522,1.815329 4.83977,2.777632 4.37796,2.112169 5.50175,3.634048 6.49278,8.795604 1.2003,6.251496 2.82391,8.292483 6.59698,8.292483 2.84562,0 5.81535,-2.461849 5.79964,-4.807082 -0.007,-0.842555 -0.44966,-3.332537 -0.98691,-5.531802 -0.53735,-2.199255 -0.8713,-4.099913 -0.74188,-4.224447 0.12941,-0.124524 0.90057,0.116604 1.71392,0.535716 1.73794,0.895544 2.10334,1.743493 5.30683,12.334451 1.91179,6.320658 2.86585,8.424307 4.47695,9.868342 2.648,2.373347 6.04559,2.461492 8.74547,0.225493 2.97024,-2.459893 2.67974,-5.99289 -1.06407,-12.965321 -1.64383,-3.061467 -2.82293,-5.725786 -2.62093,-5.920227 1.25067,-1.204157 17.29143,15.096115 19.8357,20.156394 1.68357,3.348439 1.84464,9.344059 0.34388,12.802389 -0.5751,1.3251 -2.13462,3.86784 -3.46572,5.65172 -1.33106,1.78385 -2.42058,3.50646 -2.42058,3.82818 0,0.32172 1.07814,2.30811 2.39486,4.41346 1.31674,2.10535 2.75411,5.5202 3.19493,7.58861 0.68757,3.2263 1.32054,4.23465 4.45535,7.09723 2.00968,1.83527 4.78314,4.78598 6.16242,6.55759 4.446,5.71057 3.01595,7.53159 -4.77075,6.07665 -6.79305,-1.26938 -10.29442,-1.20507 -11.62362,0.21237 -1.41968,1.51408 -2.85846,7.05014 -2.33796,8.99633 0.22293,0.83343 2.63244,4.21456 5.35422,7.51433 5.26001,6.37714 9.23075,13.38707 13.42281,23.69783 1.41767,3.48697 2.84312,6.60571 3.16787,6.93039 1.83629,1.83572 21.15877,-15.28758 27.28826,-24.18271 9.79595,-14.21573 14.73692,-28.73015 15.48329,-45.4796 0.40615,-9.11498 -0.41442,-16.89883 -2.64663,-25.10423 C 206.51682,65.570109 169.58784,39.834701 129.6429,40.000799 Z m 0.33981,4.057607 c 36.17205,0 68.93348,22.414671 80.94839,55.383139 3.53162,9.690692 4.59635,15.932242 4.60423,27.028102 0.0157,18.46361 -5.07202,33.85913 -16.0302,48.5127 -3.85717,5.15791 -13.59136,14.74323 -18.05954,17.78415 -2.11881,1.44201 -2.28261,1.46091 -2.70215,0.31932 -3.50764,-9.54505 -9.09707,-19.53483 -14.83073,-26.50674 -4.34649,-5.28507 -4.83345,-6.16553 -4.43096,-8.00832 0.24864,-1.13873 0.7098,-2.33408 1.02481,-2.65772 0.32987,-0.33872 2.80982,-0.26806 5.84701,0.16672 8.20879,1.17551 10.56234,1.00878 12.52796,-0.88373 1.0007,-0.96348 1.70018,-2.40634 1.69494,-3.50364 -0.0109,-2.84955 -3.57141,-8.21029 -8.18636,-12.32403 -3.63685,-3.24184 -4.28996,-4.21322 -5.24188,-7.79064 -0.5981,-2.24781 -1.85041,-5.53441 -2.78202,-7.3045 l -1.6936,-3.21818 2.13495,-3.29899 c 5.06087,-7.81999 5.80285,-14.26131 2.38807,-20.726001 -2.14527,-4.061307 -9.83387,-12.634487 -16.14527,-18.003103 -5.97051,-5.07863 -7.46455,-5.881945 -9.23688,-4.968703 -2.88894,1.488611 -2.64115,5.765255 0.70261,12.142828 2.28346,4.355264 2.63543,7.717995 0.87588,8.368074 -1.87962,0.694468 -3.52211,-2.050447 -6.21386,-10.384504 -3.09619,-9.586068 -3.91124,-11.1484 -6.47924,-12.426968 -2.68712,-1.337803 -7.55948,-1.342868 -8.09159,-0.0075 -0.22031,0.552842 0.13125,2.897052 0.78115,5.208535 1.35351,4.814278 1.20574,7.361666 -0.44405,7.664219 -1.22299,0.224294 -2.16489,-1.933526 -2.99998,-6.870423 -0.70793,-4.185096 -3.24541,-7.302962 -7.61777,-9.362597 -2.12525,-1.001114 -4.50175,-2.683158 -5.28112,-3.736961 -1.00434,-1.357979 -2.00419,-1.916059 -3.43321,-1.916059 -4.824851,0 -5.601177,7.643229 -1.4147,13.924639 2.73023,4.096455 2.53457,5.790327 -0.31679,2.745051 -5.734741,-6.124736 -9.02434,-7.955952 -14.336614,-7.979657 -2.687222,-0.01211 -3.469626,0.26897 -4.348368,1.560213 -1.158629,1.702511 -0.881886,3.055999 1.1805,5.782056 0.700599,0.926068 1.467598,3.32856 1.704422,5.338877 0.47155,4.00334 2.492113,8.512228 4.077607,9.098016 0.554603,0.204899 1.008572,0.640669 1.008572,0.968442 0,1.02671 -2.337887,0.643076 -4.505404,-0.739036 -4.299778,-2.741716 -7.289226,-0.825576 -7.261714,4.653276 0.03057,6.066906 5.149227,12.492876 11.203944,14.062826 5.903135,1.53062 5.773001,1.21032 2.306849,5.64258 -3.726939,4.76572 -5.565838,9.13762 -7.439059,17.68505 -1.288518,5.87941 -1.358435,7.93967 -0.958482,28.36286 0.346564,17.69787 0.241462,22.78845 -0.538804,25.92018 -0.534035,2.1434 -1.269046,4.18327 -1.632669,4.53336 -0.970853,0.93473 -8.098208,-4.46368 -14.499065,-10.98151 C 40.16197,155.12747 36.462617,113.16696 58.812837,80.896297 74.584479,58.124198 101.75849,44.058494 129.98279,44.058494 Z m 13.07894,82.854411 c -0.24205,-0.0125 -0.49103,-0.007 -0.74728,0.0177 -4.62221,0.44466 -6.0251,6.12215 -2.02663,8.20124 2.16058,1.12347 4.1384,0.74217 5.81046,-1.11966 2.53349,-2.82102 0.59395,-6.92306 -3.03655,-7.09984 z m -0.54017,2.77632 c 0.94864,0.0789 1.95196,1.17436 1.55551,2.16893 -0.20879,0.52378 -0.82431,0.95151 -1.36731,0.95151 -1.30519,0 -2.02119,-1.89781 -1.06408,-2.81934 0.25019,-0.24087 0.55968,-0.32736 0.87588,-0.3011 z" />
<path id="logoBird-5" style="fill:#000000;stroke-width:0.680128" d="m 389.64318,300.00088 c -9.21807,0.0383 -18.59568,1.4564 -27.85016,4.40302 -13.29492,4.23309 -23.89808,10.44958 -34.13854,20.01692 -17.2489,16.11505 -26.41983,35.65218 -27.56047,58.71209 -1.21322,24.52736 9.37784,49.56649 28.16156,66.57969 3.05787,2.76963 7.49352,6.27894 9.85694,7.79847 5.87261,3.77573 6.70221,3.52937 8.86869,-2.63686 l 1.75858,-5.00519 0.009,-26.02708 c 0.0105,-25.1151 0.0672,-26.21112 1.59611,-31.29034 1.94273,-6.45424 3.25988,-8.9654 7.34702,-14.00287 1.74822,-2.15469 3.1787,-4.26503 3.1787,-4.68976 0,-1.77256 -2.23253,-3.61866 -5.26894,-4.35481 -5.35272,-1.2977 -8.3906,-3.15065 -10.29694,-6.28257 -0.96951,-1.59282 -1.76263,-3.71267 -1.76263,-4.71063 0,-1.74171 0.0618,-1.77278 1.54061,-0.77554 2.01144,1.35647 13.5223,1.47149 15.39395,0.1538 2.11788,-1.49103 0.75915,-3.64745 -3.41831,-5.4262 -4.482,-1.90845 -5.96297,-3.92507 -6.70127,-9.12277 -0.30935,-2.17788 -1.04191,-4.85258 -1.62726,-5.94239 -1.29863,-2.41789 -0.58624,-2.54029 3.54964,-0.61262 1.61469,0.75258 3.77542,2.43041 4.80325,3.72785 2.37176,2.9939 5.61936,4.90806 8.32852,4.91135 4.66241,0.007 5.03417,-3.70139 1.00451,-10.00781 -2.95531,-4.62508 -3.87887,-8.48483 -1.55957,-6.51849 0.66715,0.56561 2.84524,1.81532 4.83979,2.77762 4.37797,2.11217 5.50176,3.63405 6.49279,8.7956 1.2003,6.25151 2.82392,8.29249 6.597,8.29249 2.84562,0 5.81536,-2.46184 5.79965,-4.80708 -0.007,-0.84255 -0.44967,-3.33253 -0.98691,-5.5318 -0.53736,-2.19926 -0.8713,-4.09992 -0.74189,-4.22445 0.12942,-0.12453 0.90058,0.11661 1.71393,0.53572 1.73795,0.89554 2.10335,1.74349 5.30684,12.33445 1.91179,6.32066 2.86586,8.4243 4.47696,9.86834 2.64801,2.37334 6.0456,2.46149 8.7455,0.22549 2.97024,-2.45989 2.67974,-5.99288 -1.06408,-12.96532 -1.64384,-3.06146 -2.82294,-5.72578 -2.62094,-5.92023 1.25068,-1.20416 17.29147,15.09612 19.83575,20.1564 1.68357,3.34843 1.84465,9.34405 0.34388,12.80238 -0.57511,1.3251 -2.13462,3.86784 -3.46572,5.65172 -1.33107,1.78386 -2.42059,3.50646 -2.42059,3.82818 0,0.32172 1.07813,2.30811 2.39486,4.41346 1.31674,2.10535 2.75412,5.5202 3.19494,7.58862 0.68757,3.22629 1.32054,4.23464 4.45536,7.09722 2.00968,1.83527 4.78315,4.78599 6.16244,6.5576 4.446,5.71057 3.01595,7.53158 -4.77077,6.07665 -6.79306,-1.26938 -10.29444,-1.20508 -11.62365,0.21236 -1.41968,1.51408 -2.85846,7.05014 -2.33796,8.99633 0.22293,0.83344 2.63245,4.21456 5.35424,7.51433 5.26001,6.37714 9.23076,13.38708 13.42284,23.69783 1.41766,3.48697 2.84312,6.60572 3.16787,6.93039 1.83629,1.83572 21.15881,-15.28758 27.28833,-24.18271 9.79596,-14.21573 14.73695,-28.73014 15.48332,-45.4796 0.40615,-9.11498 -0.41443,-16.89883 -2.64664,-25.10423 -10.73614,-39.46578 -47.66521,-65.20119 -87.61023,-65.0351 z m 0.33981,4.05761 c 36.17213,0 68.93363,22.41467 80.94857,55.38313 3.53163,9.69069 4.59636,15.93225 4.60424,27.0281 0.0157,18.46361 -5.07203,33.85913 -16.03024,48.5127 -3.85718,5.15791 -13.59139,14.74323 -18.05958,17.78415 -2.11881,1.44201 -2.28262,1.46091 -2.70216,0.31932 -3.50765,-9.54505 -9.09709,-19.53483 -14.83076,-26.50674 -4.3465,-5.28507 -4.83346,-6.16553 -4.43096,-8.00832 0.24863,-1.13873 0.7098,-2.33408 1.0248,-2.65771 0.32987,-0.33873 2.80983,-0.26807 5.84703,0.16672 8.20881,1.17551 10.56236,1.00878 12.52798,-0.88374 1.0007,-0.96348 1.70019,-2.40634 1.69495,-3.50364 -0.0109,-2.84955 -3.57142,-8.21029 -8.18638,-12.32403 -3.63686,-3.24184 -4.28997,-4.21322 -5.24189,-7.79064 -0.5981,-2.24781 -1.85042,-5.53441 -2.78202,-7.3045 l -1.69361,-3.21818 2.13495,-3.29899 c 5.06089,-7.81999 5.80286,-14.26131 2.38808,-20.726 -2.14528,-4.0613 -9.8339,-12.63448 -16.1453,-18.0031 -5.97053,-5.07863 -7.46457,-5.88194 -9.23691,-4.9687 -2.88894,1.48861 -2.64115,5.76525 0.70262,12.14283 2.28345,4.35527 2.63543,7.718 0.87588,8.36808 -1.87963,0.69446 -3.52212,-2.05045 -6.21388,-10.38451 -3.0962,-9.58607 -3.91125,-11.1484 -6.47925,-12.42696 -2.68713,-1.33782 -7.55951,-1.34288 -8.09161,-0.008 -0.22031,0.55284 0.13125,2.89704 0.78115,5.20853 1.35351,4.81428 1.20574,7.36167 -0.44406,7.66422 -1.22298,0.2243 -2.16489,-1.93352 -2.99998,-6.87043 -0.70793,-4.18509 -3.24542,-7.30295 -7.61778,-9.36259 -2.12526,-1.00112 -4.50177,-2.68315 -5.28114,-3.73696 -1.00434,-1.35798 -2.0042,-1.91606 -3.43322,-1.91606 -4.82485,0 -5.60118,7.64322 -1.4147,13.92463 2.73024,4.09646 2.53458,5.79034 -0.31679,2.74506 -5.73475,-6.12474 -9.02436,-7.95595 -14.33664,-7.97966 -2.68723,-0.0121 -3.46964,0.26897 -4.34838,1.56022 -1.15863,1.7025 -0.88189,3.056 1.1805,5.78205 0.7006,0.92607 1.4676,3.32856 1.70443,5.33888 0.47155,4.00334 2.49212,8.51223 4.07762,9.09802 0.5546,0.2049 1.00857,0.64067 1.00857,0.96844 0,1.02671 -2.3379,0.64308 -4.50542,-0.73904 -4.29978,-2.74171 -7.28923,-0.82557 -7.26173,4.65327 0.0306,6.06691 5.14925,12.49288 11.20398,14.06283 5.90314,1.53061 5.77301,1.21032 2.30685,5.64257 -3.72695,4.76573 -5.56585,9.13762 -7.43907,17.68506 -1.28853,5.87941 -1.35845,7.93966 -0.9585,28.36286 0.34658,17.69787 0.24147,22.78845 -0.53879,25.92018 -0.53404,2.1434 -1.26906,4.18327 -1.63268,4.53336 -0.97085,0.93472 -8.09823,-4.46369 -14.4991,-10.98151 -27.6807,-28.18668 -31.38006,-70.14719 -9.02979,-102.41785 15.77168,-22.7721 42.94575,-36.83781 71.17012,-36.83781 z m 13.07897,82.8544 c -0.24206,-0.0125 -0.49104,-0.007 -0.74729,0.0177 -4.62222,0.44467 -6.02511,6.12215 -2.02663,8.20125 2.16059,1.12346 4.13841,0.74216 5.81047,-1.11966 2.5335,-2.82103 0.59395,-6.92307 -3.03655,-7.09985 z m -0.54017,2.77633 c 0.94864,0.0789 1.95195,1.17435 1.55551,2.16892 -0.20879,0.52378 -0.82432,0.95151 -1.36732,0.95151 -1.30519,0 -2.02119,-1.89781 -1.06408,-2.81934 0.25019,-0.24086 0.55969,-0.32735 0.87589,-0.30109 z" />
</pattern>
<rect x="0" y="0" width="1000%" height="1000%" fill="url(#pattern)" transform="scale(1)"/>
</svg>
I tried different methods to achieve the same effect but each method brought up its own complexities.
One of these workarounds involved using a png version of the SVG for the background but I could not achieve a true tiling effect since I wanted the whole pattern to be rotated by about 25 degrees.
I tried finding a solution for this for 2 days straight but I came up empty handed with still no solution.

Morph SVG with <animate> SVG or CSS transition

I'm struggling to make an animation work. I've created two SVG shapes in Illustrator with the same amount of path points. Now i want to code a morphing animation. My first try was an animate object as suggested here:
<span class="svgspan">
<svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 398 369.4"
style="enable-background:new 0 0 398 369.4;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path id="pfad" class="st0" d="M398 184.7c0 51-20.7 97.2-54.1 130.6s-79.6 54.1-130.6 54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M398,184.7c0,51-20.7,97.2-54.1,130.6s-79.6,54.1-130.6,54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z" to="M195 369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8 131.7-6.1 85 17.2 50C57.9-16 157.7-15.8 199.1 49.4
c32.3-51.6 107.8-65.7 155.7-27.5c54.5 39.2 53.8 119.8 15.8 170.4c-49 65.4-124.1 107-167.6 177.1H195z"></path>
</svg></span>
I got an animation, but it didn't morph but instantly switch to the second path.
My next approach was a css animation like this:
#pfad {
d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
transition: 1s;
}
This didn't work either. I even got an 'Unknown property: d' error in VS Code and Chrome:
It would be nice if someone could help me get this working.
Edit: The anchor points are in the right position now i guess, but i still have the same problem. New anchor points:
<path id="pfad" class="st0" d="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z" to="M199,369.4C150.6,291.4,54.8,251,12.9,169C-3.6,131.6-5.9,84.9,17.4,49.9c40.7-66,140.5-65.8,181.9-0.6
C231.6-2.3,307.1-16.4,355,21.8c54.5,39.2,53.8,119.8,15.8,170.4C321.8,257.6,242.5,299.3,199,369.4L199,369.4z"></path>```

Like the comments suggest, it is a good idea to be precise with the point in the path. So, your code is ok. It is just the path that need a helping hand.
I copied your path to Inkscape and make the two shapes there.
path {
fill: red;
}
<span class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
<animate id="trs" begin="1s" fill="freeze" attributename="d" dur="2s"
from ="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z"
to="M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z" />
</path>
</svg>
</span>

The main condition for the implementation of smooth animation path changes
using the attribute d are:
Equal number of nodes in both shapes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path
These conditions can be met in different ways, but it is better to do this in the vector editor.
You must have the same number of node points by the heart and the circle
Below is a screenshot from Inkscape. Drag matching points from the outline of the heart to the outline of the circle
#chrwahl did this work in his answer while solving this problem
All credits to #chrwahl for a job well done
#jayjay9601 comments
I'll definitely try that even though i would prefer the html/css-only
version
Below is the complete CSS animation code using the d attribute:
.svgspan {
width:30vw;
height:30vh;
}
#pfad{
fill: crimson;
transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z");
fill: red;
}
<div class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" >
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
</path>
</svg>
</div>

I am not able to understand this svg path code

I can't understand this SVG path code. Normally SVG path code is not like this. This code draws letters "The Verge". I want to draw some other stuff by doing the same method. By I can't understand the code, I tried many different things but could not draw the letters, I want to draw by applying the same code method as mentioned below.
Below is the code
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewbox="0 291.4 1280 217.2">
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8 363.6c0-45.6-33.7-71.5-81.5-71.5h-74.7v211.2h67.1v-54.1l38.4 54.1h75.7l-54.4-81c19.6-10.7 29.4-30.2 29.4-58.7M865.5 387v-39.3c9.3 0 20.7 2.8 24.1 13 .3.9.5 1.9.8 2.9 0 .1 0 .3.1.4.1 1 .3 2.2.3 3.4 0 15.7-14.3 19.6-25.3 19.6M559.2 420.8h-.6l-4.8-17.4-15-53.1h26.4l17.4-58.2h-134l76.8 211.2h68.8l8.3-22.6s36.8-99.8 56.9-154.2v176.8h124.3v-58.2h-60.2v-24.6h38.2v-48.1h-38.2v-22.2h60.2V292H598l-38.8 128.8zM1280 350.3v-58.1h-124.3v211.2H1280v-58.2h-60.3v-24.6h38.3v-48h-38.3v-22.3">
</path>
<path d="M1142.8 459.1V373H1048v48h35.3v17.1c-2.7 2.4-8.5 3.7-14.5 3.7-24.6 0-42.8-19.4-42.8-43.1s17.7-44.7 42.3-44.7c14.9 0 50.2.1 50.2.1v-62.6h-16.1c-30 0-59.9-2.4-87.4 11.8-21.7 11.2-38.9 30.2-48 52.8-5.3 13.3-8 27.7-8 42 0 59.9 47 110.4 107.9 110.4 30.2 0 59.7-11.3 75.8-25.4.1-14.6.1-16.8.1-24">
</path>
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8">
</path>
</svg>