CODEWITHSUNDEEP
htmlcssbackground
Tom Bushell
Tom Bushell

Reputation: 109

Arranging background SVG

I am trying to create a responsive background using 3 svg images but I'm having trouble organising them.
I have tried using css similar to below on each of the images but it screws up when I resize the browser.

z-index: -1;
position: absolute;
left: 60vw;
top: -50vh;


<div>

  <svg class="circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593.13 593.13">
    <path
        id="Path_1"
        data-name="Path 1"
d="M296.565,0C460.353,0,593.13,132.777,593.13,296.565S460.353,593.13,296.565,593.13,0,460.353,0,296.565,132.777,0,296.565,0Z"
        fill="#f16161"/>
  </svg>
  <svg class="rightTri" xmlns="http://www.w3.org/2000/svg" width="1235" height="980" viewBox="0 0 1235 980">
  <path id="Polygon_1" data-name="Polygon 1" d="M617.5,0,1235,980H0Z" fill="#81ecb7"/>
  </svg>


  <svg class="topLeftTri" xmlns="http://www.w3.org/2000/svg" width="1490.697" height="1398.557" viewBox="0 0 1490.697 1398.557">
    <path id="Polygon_3" data-name="Polygon 3" d="M264.738,73.677c2.846-15.239,24.677-15.239,27.524,0L553.9,1474.429A14,14,0,0,1,540.143,1491H16.857A14,14,0,0,1,3.1,1474.429Z" transform="translate(1490.697 978.184) rotate(131)" fill="#81ecb7"/>
  </svg>

  <svg class="bottomLeftTri" xmlns="http://www.w3.org/2000/svg" width="1533.641" height="1327.01" viewBox="0 0 1533.641 1327.01">
    <path id="Polygon_2" data-name="Polygon 2" d="M278.5,0,557,1491H0Z" transform="matrix(0.588, 0.809, -0.809, 0.588, 1206.244, 0)" fill="#81ecb7"/>
  </svg>

</div>

This is what I was attempting to create

Website## Heading ##

Upvotes: 0

Views: 25

Answers (1)

Temani Afif
Temani Afif

Reputation: 273080

a CSS only solution if intrested:

html {
  min-height:100%;
  
  background:
    radial-gradient(circle     at calc(70% - 40px) calc(35% - 40px),#f16161 8px,transparent 9px),
    conic-gradient(from -60deg at calc(70% - 40px) calc(35% - 40px),#81ecb7 0deg 30deg,transparent 30.2deg),
    radial-gradient(circle     at 70% 35%,#f16161 80px,transparent 81px),
    conic-gradient(            at 70% 35%,#1d2534 30deg,#81ecb7 31deg 90deg,#1d2534 90.1deg 220deg,#81ecb7 220.05deg 240deg,#1d2534 240.1deg);
}

Upvotes: 1

Related Questions