квадратик в крапинку html css

Question

Помогите расположить матрицу из желтых кружков на зеленом квадрате то есть квадрат должен быть в крапинку

https://ibb.co/CsZ3XJ3 https://ibb.co/njzN4Fx

Answer 1

На SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <defs>
    <pattern id="ptn" width="4%" height="7%">
      <rect width="100%" height="100%" fill="green"/>
      <circle cx="2" cy="1.7" r="2" fill="yellow"/>
      <circle cx="8" cy="9" r="2" fill="yellow"/>

    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#ptn)"/>
</svg>

Answer 2

Фон через гардиент. Размер фона указываешь и по умолчанию получаешь состояние фона в repeat

.square {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  background-color: green;
  
  background-image: radial-gradient(circle closest-corner at 20% 20%, yellow 50%, transparent 50%);
  background-size: 20px 20px;
}

<div class="square">
  
</div>

Answer 3

Если с помощью canvas, то можно отрисовать одинарный элемент паттерна и установить в качестве стиля для заполнения (можно на всю страницу):

const canvas = document.getElementById('goroh');

let draw = () => {
  let w = canvas.width = window.innerWidth - 20;
  let h = canvas.height = window.innerHeight - 20;

  let ctx1 = canvas.getContext('2d');

  let gorohPattern = null;

  {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    
    let rad = 5;
    let side = 30;

    canvas.width = canvas.height = side;  

    ctx.fillStyle = 'green';
    ctx.fillRect(0,0,side,side);

    ctx.fillStyle = 'yellow';

    ctx.beginPath();
    ctx.arc(side/4, side/4, rad, 0, 2 * Math.PI);
    ctx.arc(side*3/4, side*3/4, rad, 0, 2 * Math.PI);
    ctx.fill();

    gorohPattern = ctx1.createPattern(canvas, 'repeat');
  }

  ctx1.fillStyle = gorohPattern;
  ctx1.fillRect(0,0,w,h);
}

draw();
window.onresize = draw;

<canvas id="goroh"></canvas>

Вот одиночный элемент паттерна. Для равномерного распределения, кружочки расположены по такой схеме:

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

let rad = 25;
let side = 160;

canvas.width = canvas.height = side;  

ctx.fillStyle = 'green';
ctx.fillRect(0,0,side,side);

ctx.fillStyle = 'yellow';

ctx.beginPath();
ctx.arc(side/4, side/4, rad, 0, 2 * Math.PI);
ctx.arc(side*3/4, side*3/4, rad, 0, 2 * Math.PI);
ctx.fill();

ctx.setLineDash([4, 2]);
ctx.strokeStyle = 'rgba(0,0,0,0.6)';

ctx.stroke(new Path2D(`M ${side/4} 0 V ${side}`));
ctx.stroke(new Path2D(`M ${side*3/4} 0 V ${side}`));
ctx.stroke(new Path2D(`M ${side/2} 0 V ${side}`));
ctx.stroke(new Path2D(`M 0 ${side/4} H ${side}`));
ctx.stroke(new Path2D(`M 0 ${side*3/4} H ${side}`));
ctx.stroke(new Path2D(`M 0 ${side/2} H ${side}`));

document.body.append(canvas);

БЛОГ НА HUSL

квадратик в крапинку html css

Ответы (3 шт):