How to create a mosaic image

HTML & CSS
1

https://jsfiddle.net/Lkcm4jas/

I’m trying to do this:

400 x 400 box around the image.

Untitled
Untitled400×400 281 Bytes

css:


body {
  margin: 80px;
}
.left,
.right {
  display: inline-block;
}
.left {
  width: 170px;
  height: 239px;
  margin-right: -4px;
}

div > div {
  display: block;
  height: 34px;
}
div > div > div {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
  float: right;
  margin: 2px;
}
div.right > div > div {
  float: left;
}

html:

<div class="left">
  <div style="padding-right: 68px">
    <div></div>
    <div></div>
  </div>
  <div style="padding-right: 34px">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>
<div class="right">
  <div style="padding-left: 34px">
    <div></div>
    <div></div>
  </div>
  <div style="">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>
2

2 Likes
3

What if I don’t want to use svg?

Is there a way to do it the other way?

4

Why not use SVG?

2 Likes
6

This worked: https://jsfiddle.net/ubtczkv2/

Can this be improved?

<main class="Box">
  <div class="left">
    <div style="padding-right: 68px">
      <div></div>
      <div></div>
    </div>
    <div style="padding-right: 34px">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
  <div class="right">
    <div style="padding-left: 34px">
      <div></div>
      <div></div>
    </div>
    <div style="">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
</main>

.Box {
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  background-color: black;
  text-align: center;
  padding-top: 64px;
}

body {
  margin: 80px;
}

.left,
.right {
  display: inline-block;
}
.left {
  width: 170px;
  height: 239px;
  margin-right: -4px;
}

div > div {
  display: block;
  height: 34px;
}
div > div > div {
  width: 30px;
  height: 30px;
  background-color: red;
  display: inline-block;
  float: right;
  margin: 2px;
}
div.right > div > div {
  float: left;
}
7

How would I be able to give colors to each of the boxes?

Like this?

like this
like this400×400 426 Bytes

9

Here done using CSS, but could be done within the HTML

Edit: Note the fill attribute has had to be deleted from line 3 of the HTML

2 Likes
10

:slight_smile: Archibald has offered the correct solution but just for fun here is a css version before you changed the requirements for coloured boxes.

I only post it as an example and not as a solution. Archibald’s svg is a much better method.:slight_smile:

2 Likes
11

Agreed that Archibald’s solution is better (my comment for the colored version states as much), but here is a cssed, flex-y way to do both the all red version and the colored version…

2 Likes
12

Yes: Use SVG instead of magic numbers.

1 Like
13

If I want to place letters inside the boxes.

How would I do that?

14

sigh…critical criteria keeps changing. Things like that really should be included in your first post since that’s not a simple tweak in SVG (I don’t think).

In my html/css version is just a matter of adding the appropriate text to the appropriate div…

15

How would you center the letters?

So that they are in the middle.

16

With standard css (which I’m 99.999% sure Paul has given to you hundreds of times before…)

.fc > * {
  background-color: var(--base-color);
  height: 28px; width: 28px;
  text-align: center; /* center it horizontally */
  line-height: 28px;  /* center it vertically */
}
3 Likes
17

I was thinking something like this

0000000000000000000000
0000101000000010100000
0010010110001001011000
0010011101100111011000
0010011111011111011000
0000100111111101100000
0000001001110110000000
0000000010011000000000
0000000000100000000000
0000000000000000000000

Just need to figure out how to convert that sprite’s binary to colours.
00 blank
10 colour 1
01 colour 2
11 colour 3

I jest BTW, not sure this is the best approach in 2024 :smiley:

edit: I think I might have opened a can of worms with this

image
image1090×821 170 KB

2 Likes
18

If I turn it into circle, how do I hide the stuff under it?

or did I do it wrong?

cxfdxf
cxfdxf418×409 4.41 KB

20

4 Likes
21

…and just because Christmas is around the corner :slight_smile:

3 Likes
22

That one uses p this ones uses divs.

https://jsbin.com/vifoyugusu/edit?html,css,output

With the grid code,

How do I change the colors of the boxes?
https://liveweave.com/PGNNak

fdsfsdf
fdsfsdf400×400 381 Bytes

looks like this now.

looks
looks315×286 2.67 KB

Like this?

p:nth-child(1) {grid-area: a2;background:green;}

p:nth-child(2) {grid-area: a3;background:green;}

p:nth-child(3) {grid-area: a7;background:green;}

p:nth-child(4) {grid-area: a8;background:green;}

p:nth-child(5) {grid-area: b1;background:green;}

p:nth-child(6) {grid-area: b2;}

p:nth-child(7) {grid-area: b3;}

p:nth-child(8) {grid-area: b4;background:green;}

p:nth-child(9) {grid-area: b6;background:green;}

p:nth-child(10) {grid-area: b7;}

p:nth-child(11) {grid-area: b8;}

p:nth-child(12) {grid-area: b9;background:green;}

p:nth-child(13) {grid-area: c1;background:green;}

p:nth-child(14) {grid-area: c2;}

p:nth-child(15) {grid-area: c3;}

p:nth-child(16) {grid-area: c4;}

p:nth-child(17) {grid-area: c5;background:green;}

p:nth-child(18) {grid-area: c6;}

p:nth-child(19) {grid-area: c7;}

p:nth-child(20) {grid-area: c8;}

p:nth-child(21) {grid-area: c9;background:green;}

p:nth-child(22) {grid-area: d1;background:green;}

p:nth-child(23) {grid-area: d2;}

p:nth-child(24) {grid-area: d3;}

p:nth-child(25) {grid-area: d4;}

p:nth-child(26) {grid-area: d5;}

p:nth-child(27) {grid-area: d6;}

p:nth-child(28) {grid-area: d7;}

p:nth-child(29) {grid-area: d8;}

p:nth-child(30) {grid-area: d9;background:green;}

p:nth-child(31) {grid-area: e2;background:green;}

p:nth-child(32) {grid-area: e3;}

p:nth-child(34) {grid-area: e4;}

p:nth-child(35) {grid-area: e4;}

p:nth-child(36) {grid-area: e4;}

p:nth-child(32) {grid-area: e3;}

p:nth-child(33) {grid-area: e4;}

p:nth-child(33) {grid-area: e4;}

p:nth-child(33) {grid-area: e4;}

p:nth-child(33) {grid-area: e4;}

p:nth-child(34) {grid-area: e5;}

p:nth-child(35) {grid-area: e6;}

p:nth-child(36) {grid-area: e7;}

p:nth-child(37) {grid-area: e8;background:green;}

p:nth-child(38) {grid-area: f3;background:green;}

p:nth-child(39) {grid-area: f4;}

p:nth-child(39) {grid-area: f4;}

p:nth-child(40) {grid-area: f5;}

p:nth-child(41) {grid-area: f6;}

p:nth-child(42) {grid-area: f7;background:green;}

p:nth-child(43) {grid-area: g4;background:green;}

p:nth-child(44) {grid-area: g5;}

p:nth-child(45) {grid-area: g6;background:green;}

p:nth-child(46) {grid-area: h5;background:green;}

AI told me to do this:
https://liveweave.com/xeVfLl

To reduce duplication.

.heart-beat p:nth-child(1),

.heart-beat p:nth-child(2),

.heart-beat p:nth-child(3),

.heart-beat p:nth-child(4),

.heart-beat p:nth-child(5),

.heart-beat p:nth-child(8),

.heart-beat p:nth-child(9),

.heart-beat p:nth-child(12),

.heart-beat p:nth-child(13),

.heart-beat p:nth-child(17),

.heart-beat p:nth-child(21),

.heart-beat p:nth-child(22),

.heart-beat p:nth-child(30),

.heart-beat p:nth-child(31),

.heart-beat p:nth-child(37),

.heart-beat p:nth-child(38),

.heart-beat p:nth-child(42),

.heart-beat p:nth-child(43),

.heart-beat p:nth-child(45),

.heart-beat p:nth-child(46) {

background: green;

}

.heart-beat p:nth-child(1) {

grid-area: a2;

}

.heart-beat p:nth-child(2) {

grid-area: a3;

}

.heart-beat p:nth-child(3) {

grid-area: a7;

}

.heart-beat p:nth-child(4) {

grid-area: a8;

}

.heart-beat p:nth-child(5) {

grid-area: b1;

}

.heart-beat p:nth-child(6) {

grid-area: b2;

}

.heart-beat p:nth-child(7) {

grid-area: b3;

}

.heart-beat p:nth-child(8) {

grid-area: b4;

}

.heart-beat p:nth-child(9) {

grid-area: b6;

}

.heart-beat p:nth-child(10) {

grid-area: b7;

}

.heart-beat p:nth-child(11) {

grid-area: b8;

}

.heart-beat p:nth-child(12) {

grid-area: b9;

}

.heart-beat p:nth-child(13) {

grid-area: c1;

}

.heart-beat p:nth-child(14) {

grid-area: c2;

}

.heart-beat p:nth-child(15) {

grid-area: c3;

}

.heart-beat p:nth-child(16) {

grid-area: c4;

}

.heart-beat p:nth-child(17) {

grid-area: c5;

}

.heart-beat p:nth-child(18) {

grid-area: c6;

}

.heart-beat p:nth-child(19) {

grid-area: c7;

}

.heart-beat p:nth-child(20) {

grid-area: c8;

}

.heart-beat p:nth-child(21) {

grid-area: c9;

}

.heart-beat p:nth-child(22) {

grid-area: d1;

}

.heart-beat p:nth-child(23) {

grid-area: d2;

}

.heart-beat p:nth-child(24) {

grid-area: d3;

}

.heart-beat p:nth-child(25) {

grid-area: d4;

}

.heart-beat p:nth-child(26) {

grid-area: d5;

}

.heart-beat p:nth-child(27) {

grid-area: d6;

}

.heart-beat p:nth-child(28) {

grid-area: d7;

}

.heart-beat p:nth-child(29) {

grid-area: d8;

}

.heart-beat p:nth-child(30) {

grid-area: d9;

}

.heart-beat p:nth-child(31) {

grid-area: e2;

}

.heart-beat p:nth-child(32) {

grid-area: e3;

}

.heart-beat p:nth-child(33) {

grid-area: e4;

}

.heart-beat p:nth-child(34) {

grid-area: e5;

}

.heart-beat p:nth-child(35) {

grid-area: e6;

}

.heart-beat p:nth-child(36) {

grid-area: e7;

}

.heart-beat p:nth-child(37) {

grid-area: e8;

}

.heart-beat p:nth-child(38) {

grid-area: f3;

}

.heart-beat p:nth-child(39) {

grid-area: f4;

}

.heart-beat p:nth-child(40) {

grid-area: f5;

}

.heart-beat p:nth-child(41) {

grid-area: f6;

}

.heart-beat p:nth-child(42) {

grid-area: f7;

}

.heart-beat p:nth-child(43) {

grid-area: g4;

}

.heart-beat p:nth-child(44) {

grid-area: g5;

}

.heart-beat p:nth-child(45) {

grid-area: g6;

}

.heart-beat p:nth-child(46) {

grid-area: h5;

}
23

Yes yours uses a lot of HTML compared to mine. I would also suggest that a p element is more semantic for text content but semantics seem to be low on your priorities. At the very least the p elements save a load of characters.

Yes. :slight_smile:

1 Like