CSS Art Wallpaper Generator

แรงบันดาลใจ

เห็น projects ที่ใช้ Canvas API สร้าง generative art — แล้วสงสัยว่า CSS ล้วนๆ ทำได้ไหมโดยไม่มี JavaScript เลย คำตอบคือทำได้ และผลลัพธ์น่าสนใจมาก

Techniques ที่ใช้

Repeating Gradients เป็น Pattern

.pattern-grid {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
}

.pattern-dots {
  background-image: radial-gradient(
    circle at center,
    rgba(37, 99, 235, 0.4) 2px,
    transparent 2px
  );
  background-size: 20px 20px;
}

.pattern-diagonal {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(37, 99, 235, 0.1) 8px,
    rgba(37, 99, 235, 0.1) 9px
  );
}

Conic Gradient — สร้าง Geometric Patterns

.pattern-mandala {
  background: conic-gradient(
    from 0deg at 50% 50%,
    #2563eb 0deg,
    #7c3aed 60deg,
    #2563eb 120deg,
    #7c3aed 180deg,
    #2563eb 240deg,
    #7c3aed 300deg,
    #2563eb 360deg
  );
  border-radius: 50%;
}

.pattern-checkerboard {
  background:
    conic-gradient(#334155 90deg, transparent 90deg) 0 0 / 20px 20px,
    conic-gradient(transparent 270deg, #334155 270deg) 10px 10px / 20px 20px,
    #fff;
}

CSS Custom Properties สำหรับ Interactive Control

<div class="wallpaper" style="--hue: 220; --scale: 40px; --opacity: 0.15;">

.wallpaper {
  background-image:
    linear-gradient(
      hsl(var(--hue) 70% 50% / var(--opacity)) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      hsl(var(--hue) 70% 50% / var(--opacity)) 1px,
      transparent 1px
    );
  background-size: var(--scale) var(--scale);
}

เปลี่ยน --hue, --scale, --opacity ผ่าน JS บรรทัดเดียว:

el.style.setProperty('--hue', '280');

Gallery ของ Patterns ที่ทำ

Project นี้รวบรวม patterns ไว้ในหน้าเดียว:

• Grid — เส้นตาราง opacity ต่ำ
• Dots — จุดเรียงกัน
• Diagonal Lines — เส้นทแยง
• Crosshatch — ลายกากบาท
• Hexagonal — ลายหกเหลี่ยม (ใช้ conic + clip-path)
• Noise-like — layered gradients ที่ดูคล้าย noise
• Sunrise — radial gradient layered หลายชั้น

Copy-Paste Ready

แต่ละ pattern มีปุ่ม copy CSS พร้อมใช้งานได้ทันที ไม่ต้องปรับ:

copyBtn.addEventListener('click', () => {
  const css = patternEl.style.cssText + '\n' +
    getComputedStyle(patternEl).backgroundImage;
  navigator.clipboard.writeText(css);
});

สิ่งที่เรียนรู้

conic-gradient ทรงพลังมาก สามารถสร้าง checkerboard, pie chart, หรือ radial pattern ได้ในบรรทัดเดียว

CSS ไม่มีขีดจำกัดด้านความสวย — ข้อจำกัดของ CSS บังคับให้คิดวิธี creative มากกว่า Canvas ที่ทำได้ทุกอย่างตรงๆ

background-size + background-position ควบคุมได้ละเอียดมาก — pattern ซับซ้อนสร้างได้จากการซ้อน background หลายชั้น