picture.css

:root{
  --width: 100px;
  --height: 100px;
}
.picture{
  display:inline-block;
  width: var(--width);
  height: var(--height);
  outline: 1px solid gray;
  background-size: cover;
  background-position: center;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='60' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(210,14%,83.1%,1)'/><path d='M-10 7.5l20 5 20-5 20 5'  stroke-linejoin='round' stroke-linecap='round' stroke-width='9' stroke='hsla(210,16.7%,97.6%,1)' fill='none'/><path d='M-10 27.5l20 5 20-5 20 5'  stroke-linejoin='round' stroke-linecap='round' stroke-width='9' stroke='hsla(210,15.8%,92.5%,1)' fill='none'/><path d='M-10 47.5l20 5 20-5 20 5'  stroke-linejoin='round' stroke-linecap='round' stroke-width='9' stroke='hsla(210,10.8%,71%,1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
}