Trying to get the svg's on top of the circle

asasass · June 30, 2021, 7:32am

Is this code not set up correctly to do what I am trying to do?

How would I be able to move the svg’s closer together?

Should I be using flex instead of grid here?

body {
  margin: 0;
  background: beige;
}

.grid {
  width: 150px;
  height: 150px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: black;
  transform: rotate(45deg);
}

.circle {
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 50%;
}

.item {
  transform: rotate(315deg);
  margin: auto;
}

<div class="grid circle"  >

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

</div>

PaulOB · June 30, 2021, 10:12am

You could just add padding to the circle if I understand you correctly (and border-box to stop it all getting bigger).

    padding: 20px;
    box-sizing: border-box;

e.g.

.circle {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
}

That will produce this result.

asasass · June 30, 2021, 10:20am

Thank you for that, I have a follow up question.

How would I add a background image to it without the image appearing sideways?

I want to keep this:
transform: rotate(45deg);

But I want the background image to appear normal, and not rotated.

code: https://jsfiddle.net/myk8f4as/1/


.circle {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
    background-image: url("https://via.placeholder.com/150");
    background-repeat: no-repeat;
    background-size: cover;
}

PaulOB · June 30, 2021, 10:53am

You’d have to apply the image to another element and then rotate it back to normal. You can use the :before pseudo element to do that to avoid extra divs.

e.g.

.circle {
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 50%;
  position:relative;/* stacking context for absolute background image*/
  padding:10px;
  box-sizing:border-box;
}
.circle:before{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-image: url("https://via.placeholder.com/150");
  transform: rotate(-45deg);
}
.item{position:relative;z-index:2;}/* ensure svg is on top of image*/

asasass · June 30, 2021, 10:56am

I was wondering something else.

Would there be a way to remove this from the code?

transform: rotate(45deg);
transform: rotate(315deg);

or does that need to stay?

Utilizing grid, would it be able to do all that?

or no?

Would either of those be able to be removed?

asasass · June 30, 2021, 11:03am

You forgot to put:
margin: auto;

Without it, the svg’s float to the top.

code: https://jsfiddle.net/fsnqy1x7/1/

.item {
  position: relative;
  z-index: 2;
  margin: auto;
}

PaulOB · June 30, 2021, 11:06am

No I didn’t forget it I just didn’t show all your code. I just showed the bits I changed

asasass · June 30, 2021, 11:12am

border-radius: 50%;

Would go here:

.circle:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://via.placeholder.com/150");
  transform: rotate(-45deg);
  border-radius: 50%;
}

If I have that correct.

code: https://jsfiddle.net/kh8ge0x1/1/

asasass · June 30, 2021, 11:15am

I messed up somewhere in the code.

code: https://jsfiddle.net/kh8ge0x1/1/

The svg’s aren’t facing forward.

What needs to be fixed here?

PaulOB · June 30, 2021, 11:30am

Do you understand what that code is doing and why it is used?

The grid css creates 3 horizontal rows of three. The whole div is then rotated by 45% to give the diamond shape. That means the little diamonds are rotated so they need to be rotated back to their original position.

e.g.

It starts out like this:

Then the grid element is rotated 45degrees.

Then lastly the diamonds are rotated back to where they were.

So to answer your question yes you could get rid of the transforms but instead you would have to make your grid have 5 rows. That would mean one diamond in the first row, 2 diamonds in second row, 3 diamonds in third row, 2diamonds in 4th row, and finally one diamond in the 5th row.

That is possible but we would need to add class to each diamond and place in the grid at the correct position. It was much easier just to rotate the whole thing with transform and avoid any extra classes.

Here’s the example without transform:

…and this is how the grid is working via devtools.

PaulOB · June 30, 2021, 11:34am

Why did you remove the 315degree transform and what do you think it does?

transform: rotate(315deg);

asasass · June 30, 2021, 11:37am

Fixed: https://jsfiddle.net/hrj4nLw7/1/

asasass · June 30, 2021, 11:45am

With: transform
code: https://jsfiddle.net/hrj4nLw7/1/

Without: transform
code: https://jsfiddle.net/qhextjav/

What needs to be adjusted with this one?

PaulOB · June 30, 2021, 11:48am

Probably just needs the margin:auto

.item{margin:auto}

asasass · June 30, 2021, 4:42pm

Question:

Can these be removed, or are they still needed?

Was there a specific reason why you kept them in the code, or are they no-longer needed?

grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto;

Without: https://jsfiddle.net/jykvxanL/1/

With: https://jsfiddle.net/jykvxanL/2/

PaulOB · June 30, 2021, 5:00pm

Probably not needed in this case as the grid-template-areas should define the grid.

asasass · June 30, 2021, 6:53pm

What are your thoughts on setting it up like this?

or maybe, could it be improved further, or no?

code: https://jsfiddle.net/79n4qpkw/

grid {
  width: 150px;
  height: 150px;
  margin: 5%;
  display: grid;
  grid-template-areas:
    ".   .   item1   .   ."
    ". item2   .   item3 ."
    "item4 . item5 . item6"
    ". item7   .   item8 ."
    ".   .   item9   .   .";
  border-radius: 50%;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  background-image: url("https://via.placeholder.com/300");
  background-size: cover;
  background-repeat: no-repeat;
}

.item {
  width: 18px;
  margin: auto;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

<div class="grid circle">

  <svg class="item item1" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item2" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item3" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item4" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item5" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item6" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item7" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item8" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item item9" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

</div>

PaulOB · June 30, 2021, 7:41pm

That’s ok assuming you never want to add anything in those empty spaces between the stars. It’s just another way of doing the same thing.

asasass · July 4, 2021, 3:29am

How would I add:

<span>Some Text Here</span>

To the middle of this one?
It is set up differently.
The text would go behind the svg’s.

I don’t think flex will work here.

code: https://jsfiddle.net/1zrhtnk3/

.grid {
  width: 150px;
  height: 150px;
  margin: 5%;
  display: grid;
  /*grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto;*/
  grid-template-areas:
    "r1c1 r1c2 r1c3 r1c4 r1c5"
    "r2c1 r2c2 r2c3 r2c4 r2c5"
    "r3c1 r3c2 r3c3 r3c4 r3c5"
    "r4c1 r4c2 r4c3 r4c4 r4c5"
    "r5c1 r5c2 r5c3 r5c4 r5c5";
  border-radius: 50%;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  background-image: url("https://via.placeholder.com/150");
  background-size: cover;
  background-repeat: no-repeat;
}

.i1 {
  grid-area: r1c3;
}

.i2 {
  grid-area: r2c2;
}

.i3 {
  grid-area: r2c4;
}

.i4 {
  grid-area: r3c1;
}

.i5 {
  grid-area: r3c3;
}

.i6 {
  grid-area: r3c5;
}

.i7 {
  grid-area: r4c2;
}

.i8 {
  grid-area: r4c4;
}

.i9 {
  grid-area: r5c3;
}

.item {
  margin: auto;
 width: 18px;
}

<div class="grid">

  <svg class="item i1" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i2" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i3" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i4" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i5" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i6" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i7" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i8" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i9" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>



</div>

PaulOB · July 4, 2021, 9:49am

If you want something on top of something else then you are probably going to need to absolutely place it there.

e.g. Add these extra rules and place the span inside the grid parent…

.grid,
.grid svg{
  position:relative
}
.grid svg{z-index:2;}
span{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

Topic		Replies	Views
Positioning svg’s in a grid, box like structure HTML & CSS	24	12149	February 3, 2022
Help with html/css SVG file code HTML & CSS	16	1674	September 27, 2019
Putting svg's into a list HTML & CSS	15	1443	December 7, 2021
Help with a SVG HTML & CSS	2	573	September 29, 2019
Positioning Issue HTML & CSS	7	1785	March 20, 2018

Trying to get the svg's on top of the circle

Related topics