CSS-эффекты и графика

Изометрические паттерны

Бесшовный 3D-паттерн из кубов и ромбов: три грани красятся отдельно, плитка повторяется без швов по обеим осям.

Плитка

Рисунок

Размер куба: 40 px

Верх Левая грань Правая грань

Обводка рёбер

Превью

Размер плитки: 69.28 × 120 px. Она уже бесшовна — background-repeat достаточно оставить по умолчанию.

CSS: повторяющийся фон

.isometric {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69.28 120' width='69.28' height='120'%3E %3Cpolygon points='-69.28,-80 -34.64,-100 0,-80 -34.64,-60' fill='%23a5b4fc'/%3E %3Cpolygon points='0,-80 0,-40 -34.64,-20 -34.64,-60' fill='%234338ca'/%3E %3Cpolygon points='-34.64,-20 -69.28,-40 -69.28,-80 -34.64,-60' fill='%236366f1'/%3E %3Cpolygon points='0,-80 34.64,-100 69.28,-80 34.64,-60' fill='%23a5b4fc'/%3E %3Cpolygon points='69.28,-80 69.28,-40 34.64,-20 34.64,-60' fill='%234338ca'/%3E %3Cpolygon points='34.64,-20 0,-40 0,-80 34.64,-60' fill='%236366f1'/%3E %3Cpolygon points='69.28,-80 103.92,-100 138.56,-80 103.92,-60' fill='%23a5b4fc'/%3E %3Cpolygon points='138.56,-80 138.56,-40 103.92,-20 103.92,-60' fill='%234338ca'/%3E %3Cpolygon points='103.92,-20 69.28,-40 69.28,-80 103.92,-60' fill='%236366f1'/%3E %3Cpolygon points='138.56,-80 173.21,-100 207.85,-80 173.21,-60' fill='%23a5b4fc'/%3E %3Cpolygon points='207.85,-80 207.85,-40 173.21,-20 173.21,-60' fill='%234338ca'/%3E %3Cpolygon points='173.21,-20 138.56,-40 138.56,-80 173.21,-60' fill='%236366f1'/%3E %3Cpolygon points='-103.92,-20 -69.28,-40 -34.64,-20 -69.28,0' fill='%23a5b4fc'/%3E %3Cpolygon points='-34.64,-20 -34.64,20 -69.28,40 -69.28,0' fill='%234338ca'/%3E %3Cpolygon points='-69.28,40 -103.92,20 -103.92,-20 -69.28,0' fill='%236366f1'/%3E %3Cpolygon points='-34.64,-20 0,-40 34.64,-20 0,0' fill='%23a5b4fc'/%3E %3Cpolygon points='34.64,-20 34.64,20 0,40 0,0' fill='%234338ca'/%3E %3Cpolygon points='0,40 -34.64,20 -34.64,-20 0,0' fill='%236366f1'/%3E %3Cpolygon points='34.64,-20 69.28,-40 103.92,-20 69.28,0' fill='%23a5b4fc'/%3E %3Cpolygon points='103.92,-20 103.92,20 69.28,40 69.28,0' fill='%234338ca'/%3E %3Cpolygon points='69.28,40 34.64,20 34.64,-20 69.28,0' fill='%236366f1'/%3E %3Cpolygon points='103.92,-20 138.56,-40 173.21,-20 138.56,0' fill='%23a5b4fc'/%3E %3Cpolygon points='173.21,-20 173.21,20 138.56,40 138.56,0' fill='%234338ca'/%3E %3Cpolygon points='138.56,40 103.92,20 103.92,-20 138.56,0' fill='%236366f1'/%3E %3Cpolygon points='-69.28,40 -34.64,20 0,40 -34.64,60' fill='%23a5b4fc'/%3E %3Cpolygon points='0,40 0,80 -34.64,100 -34.64,60' fill='%234338ca'/%3E %3Cpolygon points='-34.64,100 -69.28,80 -69.28,40 -34.64,60' fill='%236366f1'/%3E %3Cpolygon points='0,40 34.64,20 69.28,40 34.64,60' fill='%23a5b4fc'/%3E %3Cpolygon points='69.28,40 69.28,80 34.64,100 34.64,60' fill='%234338ca'/%3E %3Cpolygon points='34.64,100 0,80 0,40 34.64,60' fill='%236366f1'/%3E %3Cpolygon points='69.28,40 103.92,20 138.56,40 103.92,60' fill='%23a5b4fc'/%3E %3Cpolygon points='138.56,40 138.56,80 103.92,100 103.92,60' fill='%234338ca'/%3E %3Cpolygon points='103.92,100 69.28,80 69.28,40 103.92,60' fill='%236366f1'/%3E %3Cpolygon points='138.56,40 173.21,20 207.85,40 173.21,60' fill='%23a5b4fc'/%3E %3Cpolygon points='207.85,40 207.85,80 173.21,100 173.21,60' fill='%234338ca'/%3E %3Cpolygon points='173.21,100 138.56,80 138.56,40 173.21,60' fill='%236366f1'/%3E %3Cpolygon points='-103.92,100 -69.28,80 -34.64,100 -69.28,120' fill='%23a5b4fc'/%3E %3Cpolygon points='-34.64,100 -34.64,140 -69.28,160 -69.28,120' fill='%234338ca'/%3E %3Cpolygon points='-69.28,160 -103.92,140 -103.92,100 -69.28,120' fill='%236366f1'/%3E %3Cpolygon points='-34.64,100 0,80 34.64,100 0,120' fill='%23a5b4fc'/%3E %3Cpolygon points='34.64,100 34.64,140 0,160 0,120' fill='%234338ca'/%3E %3Cpolygon points='0,160 -34.64,140 -34.64,100 0,120' fill='%236366f1'/%3E %3Cpolygon points='34.64,100 69.28,80 103.92,100 69.28,120' fill='%23a5b4fc'/%3E %3Cpolygon points='103.92,100 103.92,140 69.28,160 69.28,120' fill='%234338ca'/%3E %3Cpolygon points='69.28,160 34.64,140 34.64,100 69.28,120' fill='%236366f1'/%3E %3Cpolygon points='103.92,100 138.56,80 173.21,100 138.56,120' fill='%23a5b4fc'/%3E %3Cpolygon points='173.21,100 173.21,140 138.56,160 138.56,120' fill='%234338ca'/%3E %3Cpolygon points='138.56,160 103.92,140 103.92,100 138.56,120' fill='%236366f1'/%3E %3Cpolygon points='-69.28,160 -34.64,140 0,160 -34.64,180' fill='%23a5b4fc'/%3E %3Cpolygon points='0,160 0,200 -34.64,220 -34.64,180' fill='%234338ca'/%3E %3Cpolygon points='-34.64,220 -69.28,200 -69.28,160 -34.64,180' fill='%236366f1'/%3E %3Cpolygon points='0,160 34.64,140 69.28,160 34.64,180' fill='%23a5b4fc'/%3E %3Cpolygon points='69.28,160 69.28,200 34.64,220 34.64,180' fill='%234338ca'/%3E %3Cpolygon points='34.64,220 0,200 0,160 34.64,180' fill='%236366f1'/%3E %3Cpolygon points='69.28,160 103.92,140 138.56,160 103.92,180' fill='%23a5b4fc'/%3E %3Cpolygon points='138.56,160 138.56,200 103.92,220 103.92,180' fill='%234338ca'/%3E %3Cpolygon points='103.92,220 69.28,200 69.28,160 103.92,180' fill='%236366f1'/%3E %3Cpolygon points='138.56,160 173.21,140 207.85,160 173.21,180' fill='%23a5b4fc'/%3E %3Cpolygon points='207.85,160 207.85,200 173.21,220 173.21,180' fill='%234338ca'/%3E %3Cpolygon points='173.21,220 138.56,200 138.56,160 173.21,180' fill='%236366f1'/%3E %3C/svg%3E");
  background-size: 69.28px 120px;
  background-repeat: repeat;
}

Плитка SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.28 120" width="69.28" height="120">
  <polygon points="-69.28,-80 -34.64,-100 0,-80 -34.64,-60" fill="#a5b4fc"/>
  <polygon points="0,-80 0,-40 -34.64,-20 -34.64,-60" fill="#4338ca"/>
  <polygon points="-34.64,-20 -69.28,-40 -69.28,-80 -34.64,-60" fill="#6366f1"/>
  <polygon points="0,-80 34.64,-100 69.28,-80 34.64,-60" fill="#a5b4fc"/>
  <polygon points="69.28,-80 69.28,-40 34.64,-20 34.64,-60" fill="#4338ca"/>
  <polygon points="34.64,-20 0,-40 0,-80 34.64,-60" fill="#6366f1"/>
  <polygon points="69.28,-80 103.92,-100 138.56,-80 103.92,-60" fill="#a5b4fc"/>
  <polygon points="138.56,-80 138.56,-40 103.92,-20 103.92,-60" fill="#4338ca"/>
  <polygon points="103.92,-20 69.28,-40 69.28,-80 103.92,-60" fill="#6366f1"/>
  <polygon points="138.56,-80 173.21,-100 207.85,-80 173.21,-60" fill="#a5b4fc"/>
  <polygon points="207.85,-80 207.85,-40 173.21,-20 173.21,-60" fill="#4338ca"/>
  <polygon points="173.21,-20 138.56,-40 138.56,-80 173.21,-60" fill="#6366f1"/>
  <polygon points="-103.92,-20 -69.28,-40 -34.64,-20 -69.28,0" fill="#a5b4fc"/>
  <polygon points="-34.64,-20 -34.64,20 -69.28,40 -69.28,0" fill="#4338ca"/>
  <polygon points="-69.28,40 -103.92,20 -103.92,-20 -69.28,0" fill="#6366f1"/>
  <polygon points="-34.64,-20 0,-40 34.64,-20 0,0" fill="#a5b4fc"/>
  <polygon points="34.64,-20 34.64,20 0,40 0,0" fill="#4338ca"/>
  <polygon points="0,40 -34.64,20 -34.64,-20 0,0" fill="#6366f1"/>
  <polygon points="34.64,-20 69.28,-40 103.92,-20 69.28,0" fill="#a5b4fc"/>
  <polygon points="103.92,-20 103.92,20 69.28,40 69.28,0" fill="#4338ca"/>
  <polygon points="69.28,40 34.64,20 34.64,-20 69.28,0" fill="#6366f1"/>
  <polygon points="103.92,-20 138.56,-40 173.21,-20 138.56,0" fill="#a5b4fc"/>
  <polygon points="173.21,-20 173.21,20 138.56,40 138.56,0" fill="#4338ca"/>
  <polygon points="138.56,40 103.92,20 103.92,-20 138.56,0" fill="#6366f1"/>
  <polygon points="-69.28,40 -34.64,20 0,40 -34.64,60" fill="#a5b4fc"/>
  <polygon points="0,40 0,80 -34.64,100 -34.64,60" fill="#4338ca"/>
  <polygon points="-34.64,100 -69.28,80 -69.28,40 -34.64,60" fill="#6366f1"/>
  <polygon points="0,40 34.64,20 69.28,40 34.64,60" fill="#a5b4fc"/>
  <polygon points="69.28,40 69.28,80 34.64,100 34.64,60" fill="#4338ca"/>
  <polygon points="34.64,100 0,80 0,40 34.64,60" fill="#6366f1"/>
  <polygon points="69.28,40 103.92,20 138.56,40 103.92,60" fill="#a5b4fc"/>
  <polygon points="138.56,40 138.56,80 103.92,100 103.92,60" fill="#4338ca"/>
  <polygon points="103.92,100 69.28,80 69.28,40 103.92,60" fill="#6366f1"/>
  <polygon points="138.56,40 173.21,20 207.85,40 173.21,60" fill="#a5b4fc"/>
  <polygon points="207.85,40 207.85,80 173.21,100 173.21,60" fill="#4338ca"/>
  <polygon points="173.21,100 138.56,80 138.56,40 173.21,60" fill="#6366f1"/>
  <polygon points="-103.92,100 -69.28,80 -34.64,100 -69.28,120" fill="#a5b4fc"/>
  <polygon points="-34.64,100 -34.64,140 -69.28,160 -69.28,120" fill="#4338ca"/>
  <polygon points="-69.28,160 -103.92,140 -103.92,100 -69.28,120" fill="#6366f1"/>
  <polygon points="-34.64,100 0,80 34.64,100 0,120" fill="#a5b4fc"/>
  <polygon points="34.64,100 34.64,140 0,160 0,120" fill="#4338ca"/>
  <polygon points="0,160 -34.64,140 -34.64,100 0,120" fill="#6366f1"/>
  <polygon points="34.64,100 69.28,80 103.92,100 69.28,120" fill="#a5b4fc"/>
  <polygon points="103.92,100 103.92,140 69.28,160 69.28,120" fill="#4338ca"/>
  <polygon points="69.28,160 34.64,140 34.64,100 69.28,120" fill="#6366f1"/>
  <polygon points="103.92,100 138.56,80 173.21,100 138.56,120" fill="#a5b4fc"/>
  <polygon points="173.21,100 173.21,140 138.56,160 138.56,120" fill="#4338ca"/>
  <polygon points="138.56,160 103.92,140 103.92,100 138.56,120" fill="#6366f1"/>
  <polygon points="-69.28,160 -34.64,140 0,160 -34.64,180" fill="#a5b4fc"/>
  <polygon points="0,160 0,200 -34.64,220 -34.64,180" fill="#4338ca"/>
  <polygon points="-34.64,220 -69.28,200 -69.28,160 -34.64,180" fill="#6366f1"/>
  <polygon points="0,160 34.64,140 69.28,160 34.64,180" fill="#a5b4fc"/>
  <polygon points="69.28,160 69.28,200 34.64,220 34.64,180" fill="#4338ca"/>
  <polygon points="34.64,220 0,200 0,160 34.64,180" fill="#6366f1"/>
  <polygon points="69.28,160 103.92,140 138.56,160 103.92,180" fill="#a5b4fc"/>
  <polygon points="138.56,160 138.56,200 103.92,220 103.92,180" fill="#4338ca"/>
  <polygon points="103.92,220 69.28,200 69.28,160 103.92,180" fill="#6366f1"/>
  <polygon points="138.56,160 173.21,140 207.85,160 173.21,180" fill="#a5b4fc"/>
  <polygon points="207.85,160 207.85,200 173.21,220 173.21,180" fill="#4338ca"/>
  <polygon points="173.21,220 138.56,200 138.56,160 173.21,180" fill="#6366f1"/>
</svg>