Related
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.
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>
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 have an image(marker) for map, i need to change color scheme depending on data which i get.
I try to use mask-image to cover image with patern and color it, guess i did smth wrong, is there any way to do it without downloading images with different colors.
Inner icon:
Result i need to achive:
I tried to use such masks, first two are png, and 3 one is svg:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 40 52" xmlns="http://www.w3.org/2000/svg">
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-dashoffset: 1px; stroke-width: 0px;" d="M 20.946 51.817 C 10.713 43.246 3.804 33.213 1.433 22.624 C -0.406 14.397 3.88 7.137 14.292 0.844 C 15.759 -0.043 19.7 0.385 26.24 1.298 C 28.303 1.586 31.522 3.442 33.851 5.838 C 36.849 8.917 38.738 12.772 38.548 14.094 C 38.483 14.574 39.33 19.601 38.978 22.082 C 38.086 28.373 38.008 23.023 37.518 22.77 C 35.029 21.486 28.843 10.752 29.337 13.09 C 29.337 13.09 30.241 13.646 28.478 11.864 C 28.478 11.864 27.497 10.787 26.513 10.047 C 25.267 9.114 23.458 8.631 22.85 8.367 C 20.053 7.16 16.907 8.18 13.958 10.098 C 13.958 10.098 8.152 14.306 10.169 23.533 C 11.085 27.713 17.317 30.691 19.612 30.613 C 24.104 30.461 27.391 29.864 30.116 24.2 C 30.408 23.592 31.712 21.959 31.905 20.026 C 32.213 16.94 28.503 11.89 29.092 11.812 C 30.757 11.591 40.573 21.59 38.247 23.558 C 38.482 25.947 38.561 24.793 38.316 27.736 C 37.797 33.962 29.758 44.365 20.946 51.817 Z"/>
</svg>
And results i get using this masks:
Code i use to set mask
<img class="icon-wraper" src="botAdded.png"/>
.icon-wraper{
-webkit-mask-image: url("./POIwraper.svg");
mask-image: url("./POIwraper.svg");
mask-size: cover;
}
I realy have no idea what problem with it and how to change achive that result.
Well because i use react-leaflet, i found such component as divIcon, this let me use html components as i want,not only default img, so here is code that describes icon right now
<Marker
position={coordinates}
icon={
divIcon({
html:`
<div class="leaflet-div-icon-wraper">
<img class="wraper_icon" src="${image}" />
<svg class="svg_filler" viewBox="0 0 40 55" xmlns="http://www.w3.org/2000/svg">
<path style="fill: ${chosenemmissionsStats?chosenemmissionsStats.color:'grey'}; stroke: rgb(0, 0, 0); paint-order: stroke;" d="M 19.742 52.481 C 19.35 52.248 18.131 52.182 16.788 50.942 C 15.401 49.661 14.267 48.988 13.077 47.734 C 11.293 45.855 10.319 44.263 9.121 42.344 C 5.898 37.183 2.623 32.147 1.758 25.723 C 1.22 21.729 0.502 17.489 1.721 13.391 C 3.248 8.256 6.509 4.389 12.588 2.157 C 13.066 1.982 14.057 1.564 14.609 1.472 C 15.143 1.383 15.752 1.299 16.256 1.151 C 21.974 -0.523 27.779 0.952 34.097 6.63 C 37.688 9.857 39.355 15 39.127 20.994 C 38.933 26.087 39.102 31.087 35.405 36.007 C 37.668 32.5 25.365 54.955 19.716 52.365 C 18.622 51.863 30.639 29.002 29.861 27.599 C 29.864 27.599 30.627 26.058 31.425 23.619 C 32.146 21.415 33.086 17.55 30.789 13.627 C 29.632 11.652 27.689 9.557 25.593 8.408 C 23.982 7.525 22.01 7.32 20.447 7.505 C 18.226 7.768 16.089 8.043 14.533 8.742 C 13.397 9.252 11.812 10.129 10.421 11.136 C 9.579 11.746 9.003 13.211 8.631 14.522 C 8.32 15.616 8.256 16.698 8.122 17.938 C 7.787 21.042 8.564 24.565 10.941 27.718 C 12.408 29.664 15.125 30.955 17.804 31.57 C 21.789 32.485 25.982 31.036 29.742 27.499 C 32.037 25.34 35.748 33.857 35.748 33.857"/>
</svg>
</div>
`,
})}>
I made svg and change its color depending from few params that i count according to some data.
I'm not particularly clear on the ins and outs of rendering svg in html. I have loaded an svg file via svg-inline-loader, and the data appears to be present, but nothing is rendering. I imagine I'm missing something rather basic here, but I can't see what, and I haven't been able to find any resources on what may cause this.
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" viewBox="0 0 306.000000 599.000000" preserveAspectRatio="xMidYMid meet" id="svg3755" sodipodi:docname="car.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)"><defs id="defs3759"></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview3757" showgrid="false" inkscape:zoom="1.501569" inkscape:cx="133.29366" inkscape:cy="404.34747" inkscape:window-x="1912" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g3753"><metadata id="metadata3737"> Created by potrace 1.15, written by Peter Selinger 2001-2017 <rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"><dc:title></dc:title></dc:type></cc:work></rdf:rdf></metadata><g transform="matrix(0.1,0,0,-0.1,3,599)" id="g3753" style="fill:#000000;stroke:#000000"><path d="M 1310,5984 C 1097,5959 960,5927 828,5870 592,5769 410,5601 303,5385 213,5205 181,5053 173,4770 c -6,-222 6,-337 47,-440 18,-47 20,-74 20,-354 v -303 l -84,-33 C 44,3597 0,3549 0,3470 c 0,-27 37,-140 45,-140 2,0 41,9 87,20 46,11 89,20 97,20 22,0 9,-986 -18,-1370 C 168,1397 171,1170 226,850 260,651 342,316 386,194 418,105 550,58 870,18 1017,0 1983,0 2130,18 c 320,40 452,87 484,176 44,122 126,457 160,656 55,320 58,547 15,1150 -27,384 -40,1370 -18,1370 8,0 51,-9 97,-20 46,-11 85,-20 87,-20 8,0 45,113 45,140 0,79 -44,127 -156,170 l -84,33 v 303 c 0,280 2,307 20,354 41,103 53,218 47,440 -8,283 -40,435 -130,615 -154,311 -451,511 -862,581 -86,15 -448,27 -525,18 z m 418,-74 c 114,-12 227,-35 312,-63 64,-22 65,-23 76,-67 38,-153 150,-238 344,-260 68,-8 78,-12 102,-41 76,-91 155,-302 183,-491 31,-204 16,-525 -29,-633 -14,-32 -18,-100 -23,-382 l -6,-343 34,-14 c 177,-72 187,-78 198,-102 6,-14 11,-37 11,-52 0,-53 -8,-55 -121,-27 -57,14 -108,25 -113,25 -4,0 -6,-248 -3,-552 4,-452 10,-629 32,-968 47,-728 27,-979 -120,-1535 -25,-93 -49,-180 -55,-192 C 2511,122 2083,60 1500,60 917,60 489,122 450,213 c -6,12 -30,99 -55,192 -147,556 -167,807 -120,1535 22,339 28,516 32,968 3,304 1,552 -3,552 -5,0 -56,-11 -113,-25 -113,-28 -121,-26 -121,27 0,15 5,38 11,52 11,24 21,30 198,102 l 34,14 -6,343 c -5,282 -9,350 -23,382 -45,108 -60,429 -29,633 28,189 107,400 183,491 24,29 34,33 102,41 194,22 306,107 344,260 11,44 12,45 76,67 79,26 207,53 304,63 106,11 358,11 464,0 z" id="path3739" inkscape:connector-curvature="0"></path><path d="m 1290,4498 c -343,-35 -617,-174 -711,-359 -49,-98 -49,-154 0,-409 58,-300 103,-388 216,-419 56,-15 1354,-15 1410,0 113,31 158,119 216,419 49,255 49,311 0,409 -133,262 -610,414 -1131,359 z" id="path3743" inkscape:connector-curvature="0"></path><path d="m 445,2748 c 2,-940 0,-912 59,-1026 32,-60 60,-92 115,-131 33,-23 47,-28 52,-19 21,40 38,555 28,819 -17,422 -71,764 -165,1041 -39,115 -67,178 -79,178 -9,0 -11,-223 -10,-862 z" id="path3745" inkscape:connector-curvature="0"></path><path d="m 2512,3558 c -122,-296 -192,-682 -211,-1167 -10,-264 7,-779 28,-819 5,-9 19,-4 52,19 55,39 83,71 115,131 59,114 57,86 59,1026 1,639 -1,862 -10,862 -6,0 -21,-24 -33,-52 z" id="path3747" inkscape:connector-curvature="0"></path><path d="m 842,1453 c -41,-20 -69,-54 -83,-103 -10,-32 -5,-78 31,-301 23,-145 49,-277 57,-292 80,-155 359,-271 653,-271 294,0 573,116 654,271 8,16 33,148 57,295 42,265 42,267 25,313 -11,27 -32,56 -54,73 l -35,27 -636,2 c -572,3 -639,1 -669,-14 z" id="path3749" inkscape:connector-curvature="0"></path></g></sodipodi:namedview></svg>
When something like this is happening I try to manually edit the svg. I'm not very sure this is answering your question, but in case you need to use the svg:
<svg viewBox="0 0 3000 6000"> <g id="g3753" style="fill:#000000;stroke:#000000"><path d="M 1310,5984 C 1097,5959 960,5927 828,5870 592,5769 410,5601 303,5385 213,5205 181,5053 173,4770 c -6,-222 6,-337 47,-440 18,-47 20,-74 20,-354 v -303 l -84,-33 C 44,3597 0,3549 0,3470 c 0,-27 37,-140 45,-140 2,0 41,9 87,20 46,11 89,20 97,20 22,0 9,-986 -18,-1370 C 168,1397 171,1170 226,850 260,651 342,316 386,194 418,105 550,58 870,18 1017,0 1983,0 2130,18 c 320,40 452,87 484,176 44,122 126,457 160,656 55,320 58,547 15,1150 -27,384 -40,1370 -18,1370 8,0 51,-9 97,-20 46,-11 85,-20 87,-20 8,0 45,113 45,140 0,79 -44,127 -156,170 l -84,33 v 303 c 0,280 2,307 20,354 41,103 53,218 47,440 -8,283 -40,435 -130,615 -154,311 -451,511 -862,581 -86,15 -448,27 -525,18 z m 418,-74 c 114,-12 227,-35 312,-63 64,-22 65,-23 76,-67 38,-153 150,-238 344,-260 68,-8 78,-12 102,-41 76,-91 155,-302 183,-491 31,-204 16,-525 -29,-633 -14,-32 -18,-100 -23,-382 l -6,-343 34,-14 c 177,-72 187,-78 198,-102 6,-14 11,-37 11,-52 0,-53 -8,-55 -121,-27 -57,14 -108,25 -113,25 -4,0 -6,-248 -3,-552 4,-452 10,-629 32,-968 47,-728 27,-979 -120,-1535 -25,-93 -49,-180 -55,-192 C 2511,122 2083,60 1500,60 917,60 489,122 450,213 c -6,12 -30,99 -55,192 -147,556 -167,807 -120,1535 22,339 28,516 32,968 3,304 1,552 -3,552 -5,0 -56,-11 -113,-25 -113,-28 -121,-26 -121,27 0,15 5,38 11,52 11,24 21,30 198,102 l 34,14 -6,343 c -5,282 -9,350 -23,382 -45,108 -60,429 -29,633 28,189 107,400 183,491 24,29 34,33 102,41 194,22 306,107 344,260 11,44 12,45 76,67 79,26 207,53 304,63 106,11 358,11 464,0 z" id="path3739" ></path><path d="m 1290,4498 c -343,-35 -617,-174 -711,-359 -49,-98 -49,-154 0,-409 58,-300 103,-388 216,-419 56,-15 1354,-15 1410,0 113,31 158,119 216,419 49,255 49,311 0,409 -133,262 -610,414 -1131,359 z" id="path3743" ></path><path d="m 445,2748 c 2,-940 0,-912 59,-1026 32,-60 60,-92 115,-131 33,-23 47,-28 52,-19 21,40 38,555 28,819 -17,422 -71,764 -165,1041 -39,115 -67,178 -79,178 -9,0 -11,-223 -10,-862 z" id="path3745" ></path><path d="m 2512,3558 c -122,-296 -192,-682 -211,-1167 -10,-264 7,-779 28,-819 5,-9 19,-4 52,19 55,39 83,71 115,131 59,114 57,86 59,1026 1,639 -1,862 -10,862 -6,0 -21,-24 -33,-52 z" id="path3747" ></path><path d="m 842,1453 c -41,-20 -69,-54 -83,-103 -10,-32 -5,-78 31,-301 23,-145 49,-277 57,-292 80,-155 359,-271 653,-271 294,0 573,116 654,271 8,16 33,148 57,295 42,265 42,267 25,313 -11,27 -32,56 -54,73 l -35,27 -636,2 c -572,3 -639,1 -669,-14 z" id="path3749"></path></g></svg>