0

I'm super new to designing. I've covered all the basic functionalities.

-- What am I trying to achieve? I'm trying to show SVG animation in the background and show a png image of a person and a box on left with the text. I managed to add the person image over the SVG animation at the right position.

-- Issue I'm facing

  • I want to stretch SVG animation to the width of the screen. But don't want to stretch the content inside the SVG animation.
  • I don't know how to put the small box on the left side with the content over SVG.

-- What I've tried? I added preserveAspectRatio="none" inside the SVG tag. It does stretch the animation but it also stretches the content inside it. I don't want that. I don't know what to do show content inside the SVG on left

<svg width="100%" height="30rem" id="svg" viewBox="0 70 1440 700" xmlns="http://www.w3.org/2000/svg"
    class="transition duration-300 ease-in-out delay-150">
    <style>
        .path-0 {
            animation: pathAnim-0 20s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes pathAnim-0 {
            0% {
                d: path("M 0,700 C 0,700 0,233 0,233 C 30.97425091062989,218.19027693419207 61.94850182125978,203.3805538683841 109,197 C 156.05149817874022,190.6194461316159 219.18024362559078,192.66806146065565 263,190 C 306.8197563744092,187.33193853934435 331.3305236763771,179.9472002889933 378,200 C 424.6694763236229,220.0527997110067 493.49766166890083,267.5431373833712 546,302 C 598.5023383310992,336.4568626166288 634.6788296480196,357.88025017752193 672,319 C 709.3211703519804,280.11974982247807 747.7870197390207,180.9358619065411 781,174 C 814.2129802609793,167.0641380934589 842.1730913958978,252.3763021963136 893,283 C 943.8269086041022,313.6236978036864 1017.520614677388,289.5589293082046 1066,271 C 1114.479385322612,252.44107069179543 1137.7444498945492,239.38798057086802 1171,244 C 1204.2555501054508,248.61201942913198 1247.5015857444146,270.8891484083234 1294,272 C 1340.4984142555854,273.1108515916766 1390.2492071277927,253.0554257958383 1440,233 C 1440,233 1440,700 1440,700 Z");
            }

            25% {
                d: path("M 0,700 C 0,700 0,233 0,233 C 46.564719798696345,269.75324896098766 93.12943959739269,306.5064979219754 130,317 C 166.8705604026073,327.4935020780246 194.04696140912563,311.72725727308625 244,297 C 293.95303859087437,282.27274272691375 366.68271476610494,268.5844729856796 409,250 C 451.31728523389506,231.4155270143204 463.22217952645474,207.93485078419533 503,208 C 542.7778204735453,208.06514921580467 610.4285671280762,231.6761238775391 655,263 C 699.5714328719238,294.3238761224609 721.0635519612408,333.3606537056483 762,314 C 802.9364480387592,294.6393462943517 863.3172250269604,216.88126129986773 912,206 C 960.6827749730396,195.11873870013227 997.6675479309179,251.11430109488083 1042,264 C 1086.3324520690821,276.88569890511917 1138.0125832493684,246.661534320609 1185,219 C 1231.9874167506316,191.338465679391 1274.282119071609,166.23956162268314 1316,169 C 1357.717880928391,171.76043837731686 1398.8589404641955,202.38021918865843 1440,233 C 1440,233 1440,700 1440,700 Z");
            }

            50% {
                d: path("M 0,700 C 0,700 0,233 0,233 C 45.49288761313149,246.0030758660502 90.98577522626297,259.0061517321004 132,249 C 173.01422477373703,238.9938482678996 209.54978670807964,205.9784689376486 250,219 C 290.45021329192036,232.0215310623514 334.81507794141874,291.07997251730507 385,302 C 435.18492205858126,312.92002748269493 491.18990152624576,275.7016409931311 537,246 C 582.8100984737542,216.2983590068689 618.4253159535982,194.11346351017056 653,195 C 687.5746840464018,195.88653648982944 721.1088346593615,219.8445049661867 766,215 C 810.8911653406385,210.1554950338133 867.1393454089558,176.50851662508256 922,179 C 976.8606545910442,181.49148337491744 1030.333783704816,220.12142853348305 1066,219 C 1101.666216295184,217.87857146651695 1119.5255197717804,177.0057692409853 1154,187 C 1188.4744802282196,196.9942307590147 1239.5641372080627,257.85549450257565 1290,274 C 1340.4358627919373,290.14450549742435 1390.2179313959687,261.5722527487122 1440,233 C 1440,233 1440,700 1440,700 Z");
            }

            75% {
                d: path("M 0,700 C 0,700 0,233 0,233 C 56.517896511362295,265.25479220638937 113.03579302272459,297.50958441277874 155,280 C 196.9642069772754,262.49041558722126 224.37472442046402,195.2164545552744 264,190 C 303.625275579536,184.7835454447256 355.46530929541944,241.62459736612368 405,267 C 454.53469070458056,292.3754026338763 501.76403839785814,286.28515598023085 546,281 C 590.2359616021419,275.71484401976915 631.4785371131483,271.2347787129528 668,282 C 704.5214628868517,292.7652212870472 736.3218131495487,318.7757291679579 782,293 C 827.6781868504513,267.2242708320421 887.2342102886568,189.66230461521573 926,173 C 964.7657897113432,156.33769538478427 982.7413456958238,200.57505237117925 1023,242 C 1063.2586543041762,283.42494762882075 1125.8004069280473,322.0374859000671 1174,314 C 1222.1995930719527,305.9625140999329 1256.0570265919864,251.27500402855222 1298,230 C 1339.9429734080136,208.72499597144778 1389.9714867040068,220.8624979857239 1440,233 C 1440,233 1440,700 1440,700 Z");
            }

            100% {
                d: path("M 0,700 C 0,700 0,233 0,233 C 30.97425091062989,218.19027693419207 61.94850182125978,203.3805538683841 109,197 C 156.05149817874022,190.6194461316159 219.18024362559078,192.66806146065565 263,190 C 306.8197563744092,187.33193853934435 331.3305236763771,179.9472002889933 378,200 C 424.6694763236229,220.0527997110067 493.49766166890083,267.5431373833712 546,302 C 598.5023383310992,336.4568626166288 634.6788296480196,357.88025017752193 672,319 C 709.3211703519804,280.11974982247807 747.7870197390207,180.9358619065411 781,174 C 814.2129802609793,167.0641380934589 842.1730913958978,252.3763021963136 893,283 C 943.8269086041022,313.6236978036864 1017.520614677388,289.5589293082046 1066,271 C 1114.479385322612,252.44107069179543 1137.7444498945492,239.38798057086802 1171,244 C 1204.2555501054508,248.61201942913198 1247.5015857444146,270.8891484083234 1294,272 C 1340.4984142555854,273.1108515916766 1390.2492071277927,253.0554257958383 1440,233 C 1440,233 1440,700 1440,700 Z");
            }
        }
    </style>
    <path id="circleView"
        d="M 0,700 C 0,700 0,233 0,233 C 30.97425091062989,218.19027693419207 61.94850182125978,203.3805538683841 109,197 C 156.05149817874022,190.6194461316159 219.18024362559078,192.66806146065565 263,190 C 306.8197563744092,187.33193853934435 331.3305236763771,179.9472002889933 378,200 C 424.6694763236229,220.0527997110067 493.49766166890083,267.5431373833712 546,302 C 598.5023383310992,336.4568626166288 634.6788296480196,357.88025017752193 672,319 C 709.3211703519804,280.11974982247807 747.7870197390207,180.9358619065411 781,174 C 814.2129802609793,167.0641380934589 842.1730913958978,252.3763021963136 893,283 C 943.8269086041022,313.6236978036864 1017.520614677388,289.5589293082046 1066,271 C 1114.479385322612,252.44107069179543 1137.7444498945492,239.38798057086802 1171,244 C 1204.2555501054508,248.61201942913198 1247.5015857444146,270.8891484083234 1294,272 C 1340.4984142555854,273.1108515916766 1390.2492071277927,253.0554257958383 1440,233 C 1440,233 1440,700 1440,700 Z"
        stroke="none" stroke-width="0" fill="#2a304188" class="transition-all duration-300 ease-in-out delay-150 path-0"
        transform="rotate(-180 720 350)"></path>
    <style>
        .path-1 {
            animation: pathAnim-1 9s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes pathAnim-1 {
            0% {
                d: path("M 0,700 C 0,700 0,466 0,466 C 28.170884988817434,461.7535021842722 56.34176997763487,457.5070043685443 106,472 C 155.65823002236513,486.4929956314557 226.8038050782779,519.7254847100947 280,515 C 333.1961949217221,510.27451528990525 368.4430097092536,467.5910567910766 403,472 C 437.5569902907464,476.4089432089234 471.42415608470765,527.9102881255988 510,514 C 548.5758439152924,500.0897118744012 591.8603659519157,420.76779070652833 644,414 C 696.1396340480843,407.23220929347167 757.1343801076289,473.01854904828775 798,487 C 838.8656198923711,500.98145095171225 859.6021136175689,463.1580131003207 903,430 C 946.3978863824311,396.8419868996793 1012.4571654220952,368.3493985504295 1063,397 C 1113.5428345779048,425.6506014495705 1148.5692246940512,511.44439269796123 1187,521 C 1225.4307753059488,530.5556073020388 1267.2659358016997,463.87303065772534 1310,442 C 1352.7340641983003,420.12696934227466 1396.36703209915,443.0634846711373 1440,466 C 1440,466 1440,700 1440,700 Z");
            }

            25% {
                d: path("M 0,700 C 0,700 0,466 0,466 C 34.06407080335529,508.2125552708515 68.12814160671059,550.425110541703 109,547 C 149.87185839328941,543.574889458297 197.55150437651298,494.5121131040393 244,459 C 290.448495623487,423.4878868959607 335.6658408872377,401.52643704213955 384,433 C 432.3341591127623,464.47356295786045 483.78513207453625,549.3821387274025 521,535 C 558.2148679254637,520.6178612725975 581.1936308146174,406.94500804825054 631,389 C 680.8063691853826,371.05499195174946 757.4403446669937,448.8378290795952 807,474 C 856.5596553330063,499.1621709204048 879.0449905174077,471.7036756333681 921,437 C 962.9550094825923,402.2963243666319 1024.3796932633754,360.34746838693223 1068,394 C 1111.6203067366246,427.65253161306777 1137.436236429091,536.9064508189028 1179,551 C 1220.563763570909,565.0935491810972 1277.8753610202598,484.02672833745635 1324,454 C 1370.1246389797402,423.97327166254365 1405.06231948987,444.9866358312718 1440,466 C 1440,466 1440,700 1440,700 Z");
            }

            50% {
                d: path("M 0,700 C 0,700 0,466 0,466 C 34.19229740809146,460.9159103908315 68.38459481618293,455.8318207816631 116,452 C 163.61540518381707,448.1681792183369 224.65391814335976,445.5886272641792 270,440 C 315.34608185664024,434.4113727358208 344.9997326103779,425.8136701616202 386,408 C 427.0002673896221,390.1863298383798 479.34715141512856,363.15669208934 524,380 C 568.6528485848714,396.84330791066 605.6116617291077,457.5595614810198 648,481 C 690.3883382708923,504.4404385189802 738.2062016684405,490.6050619865809 780,488 C 821.7937983315595,485.3949380134191 857.5635315971305,494.0201905726565 899,492 C 940.4364684028695,489.9798094273435 987.5396719430371,477.31417572279304 1041,450 C 1094.460328056963,422.68582427720696 1154.2777806307208,380.7231065361711 1200,389 C 1245.7222193692792,397.2768934638289 1277.3492055340796,455.79339813252255 1315,477 C 1352.6507944659204,498.20660186747745 1396.3253972329603,482.10330093373875 1440,466 C 1440,466 1440,700 1440,700 Z");
            }

            75% {
                d: path("M 0,700 C 0,700 0,466 0,466 C 49.11714675794509,494.0424352642642 98.23429351589019,522.0848705285284 145,503 C 191.7657064841098,483.91512947147163 236.17997269438428,417.7029531501507 276,428 C 315.8200273056157,438.2970468498493 351.04581570657274,525.1033168708685 394,532 C 436.95418429342726,538.8966831291315 487.63676447932505,465.8837793663752 537,448 C 586.363235520675,430.1162206336248 634.4071263761269,467.3615656636309 678,501 C 721.5928736238731,534.6384343363691 760.7347300161673,564.6699579791011 803,546 C 845.2652699838327,527.3300420208989 890.6539535592037,459.9586024199646 934,464 C 977.3460464407963,468.0413975800354 1018.6494557470176,543.4956323410404 1064,531 C 1109.3505442529824,518.5043676589596 1158.7482234527258,418.05886821587376 1197,390 C 1235.2517765472742,361.94113178412624 1262.3576504420785,406.26889479546463 1301,431 C 1339.6423495579215,455.73110520453537 1389.8211747789608,460.8655526022677 1440,466 C 1440,466 1440,700 1440,700 Z");
            }

            100% {
                d: path("M 0,700 C 0,700 0,466 0,466 C 28.170884988817434,461.7535021842722 56.34176997763487,457.5070043685443 106,472 C 155.65823002236513,486.4929956314557 226.8038050782779,519.7254847100947 280,515 C 333.1961949217221,510.27451528990525 368.4430097092536,467.5910567910766 403,472 C 437.5569902907464,476.4089432089234 471.42415608470765,527.9102881255988 510,514 C 548.5758439152924,500.0897118744012 591.8603659519157,420.76779070652833 644,414 C 696.1396340480843,407.23220929347167 757.1343801076289,473.01854904828775 798,487 C 838.8656198923711,500.98145095171225 859.6021136175689,463.1580131003207 903,430 C 946.3978863824311,396.8419868996793 1012.4571654220952,368.3493985504295 1063,397 C 1113.5428345779048,425.6506014495705 1148.5692246940512,511.44439269796123 1187,521 C 1225.4307753059488,530.5556073020388 1267.2659358016997,463.87303065772534 1310,442 C 1352.7340641983003,420.12696934227466 1396.36703209915,443.0634846711373 1440,466 C 1440,466 1440,700 1440,700 Z");
            }
        }
    </style>
    <path
        d="M 0,700 C 0,700 0,466 0,466 C 28.170884988817434,461.7535021842722 56.34176997763487,457.5070043685443 106,472 C 155.65823002236513,486.4929956314557 226.8038050782779,519.7254847100947 280,515 C 333.1961949217221,510.27451528990525 368.4430097092536,467.5910567910766 403,472 C 437.5569902907464,476.4089432089234 471.42415608470765,527.9102881255988 510,514 C 548.5758439152924,500.0897118744012 591.8603659519157,420.76779070652833 644,414 C 696.1396340480843,407.23220929347167 757.1343801076289,473.01854904828775 798,487 C 838.8656198923711,500.98145095171225 859.6021136175689,463.1580131003207 903,430 C 946.3978863824311,396.8419868996793 1012.4571654220952,368.3493985504295 1063,397 C 1113.5428345779048,425.6506014495705 1148.5692246940512,511.44439269796123 1187,521 C 1225.4307753059488,530.5556073020388 1267.2659358016997,463.87303065772534 1310,442 C 1352.7340641983003,420.12696934227466 1396.36703209915,443.0634846711373 1440,466 C 1440,466 1440,700 1440,700 Z"
        stroke="none" stroke-width="0" fill="#2a3041ff" class="transition-all duration-300 ease-in-out delay-150 path-1"
        transform="rotate(-180 720 350)"></path>
    <g transform="translate(800,0)">
       <image width="50rem" height="50rem"
            xlink:href="https://www.freepnglogos.com/uploads/people-png/pin-vito-human-source-people-cutout-33.png"
            clip-path="url(#circleView)" />
    </g>

</svg>

You can check this here http://jsfiddle.net/

Faizan Kamal
  • 1,732
  • 3
  • 27
  • 56

1 Answers1

1

Stacking one element on top of another

The traditional way with position: absolute

.parent {
  position: relative;
  width: 200px;
  height: 150px;
}

.child-one {
  display: block;
}

.child-two {
  position: absolute;
  top: 0;
}
<div class="parent">
  <svg class="child-one" width="200" height="150">
     <rect x="0" y="0" width="200" height="150" fill="linen"/>
     <circle cx="50" cy="50" r="40" fill="red"/>
  </svg>

  <div class="child-two" width="200" height="150">
     Some text.<br>
     Some more text.<br>
     Etcetera.
  </div>
</div>

The more modern way: grid stacking

.parent {
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: 150px;
}

.child-one, .child-two {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
<div class="parent">
  <svg class="child-one" width="200" height="150">
     <rect x="0" y="0" width="200" height="150" fill="linen"/>
     <circle cx="50" cy="50" r="40" fill="red"/>
  </svg>

  <div class="child-two" width="200" height="150">
     Some text.<br>
     Some more text.<br>
     Etcetera.
  </div>
</div>

For the solution to scaling the SVG to fill its container

How to make SVG "fill" act in a similar way to CSS "background-size: cover"

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181