You can use the variables to change size, rotation, position, and more. Can be seen in action at Kalbi Beef Ribs – Rita’s Kitchen

.picnic {
  --overlay-size: 400%;
  --rotation: 20deg;
  --picnic-color: color-mix(in oklch, var(--primary) 30%, transparent);
  --cell: 96px;
  --mini: 8px;
  --offset-x: calc(var(--cell) / 3.2);
  --offset-y: calc(var(--cell) / 3);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  
  & > * {
    position: relative;
    z-index: 1;
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: var(--overlay-size);
    height: var(--overlay-size);
    transform: translate(-50%, -50%) rotate(var(--rotation));
    transform-origin: center;
  }

  &::before {
    background: var(--picnic-color, #e0002b);

    -webkit-mask: conic-gradient(from 0deg, transparent 0 180deg, #000 180deg 270deg, transparent 270deg) var(--offset-x, 0) var(--offset-y, 0) / calc(var(--cell, 96px) * 2) calc(var(--cell, 96px) * 2) repeat;

    mask: conic-gradient(from 0deg, transparent 0 180deg, #000 180deg 270deg, transparent 270deg) var(--offset-x, 0) var(--offset-y, 0) / calc(var(--cell, 96px) * 2) calc(var(--cell, 96px) * 2) repeat;
  }

  &::after {
    background: conic-gradient(var(--picnic-color, #e0002b) 0 90deg, transparent 90deg 180deg, var(--picnic-color, #e0002b) 180deg 270deg, transparent 270deg) 0 0 / var(--mini, 8px) var(--mini, 8px) repeat;

    -webkit-mask: conic-gradient(from 0deg, transparent 0 90deg, #000 90deg 180deg, transparent 180deg 270deg, #000 270deg) var(--offset-x, 0) var(--offset-y, 0) / calc(var(--cell, 96px) * 2) calc(var(--cell, 96px) * 2) repeat;

    mask: conic-gradient(from 0deg, transparent 0 90deg, #000 90deg 180deg, transparent 180deg 270deg, #000 270deg) var(--offset-x, 0) var(--offset-y, 0) / calc(var(--cell, 96px) * 2) calc(var(--cell, 96px) * 2) repeat;
  }
}
Image 123