HexagonPattern Component

An animated SVG hexagonal pattern component that creates a dynamic geometric background with smooth scaling animations.

Quick Example

Hexagonal Background

Animated geometric pattern using SVG

<div class="relative">
  <HexagonPattern />
  <div class="absolute inset-0 flex items-center justify-center z-10">
    <h3>Content Over Hexagon Pattern</h3>
    <p>Geometric background with smooth animations</p>
  </div>
</div>

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes for the SVG container

Note: This component is self-contained and doesn't require any props to function.

Features

🔷 SVG-Based Pattern

Uses scalable vector graphics for crisp, resolution-independent hexagons.

🎯 Multiple Hexagons

Features 6 hexagons with different sizes, positions, and animation timings.

🌊 Smooth Scaling

Each hexagon has a unique scaling animation with different durations.

🎨 Gradient Strokes

Beautiful gradient stroke colors ranging from blue to purple to pink.

📱 Responsive Design

Scales perfectly across all screen sizes and maintains aspect ratio.

⚡ Lightweight

Pure CSS animations with minimal performance impact.

Pattern Specifications

Hexagon Details

Hexagon	Size	Stroke Color	Animation Duration	Position
Hex 1	80px	Blue (#3b82f6)	8s	Top-left (10%, 20%)
Hex 2	60px	Purple (#8b5cf6)	12s	Top-right (80%, 15%)
Hex 3	100px	Pink (#ec4899)	10s	Center-left (15%, 60%)
Hex 4	70px	Blue (#3b82f6)	14s	Center-right (75%, 50%)
Hex 5	90px	Purple (#8b5cf6)	9s	Bottom-center (45%, 85%)
Hex 6	50px	Pink (#ec4899)	11s	Bottom-right (85%, 80%)

SVG Properties

• ViewBox: 0 0 800 600 for consistent scaling
• Stroke width: 2px for all hexagons
• Fill: none (transparent interior)
• Opacity: 0.6 for subtle appearance
• Transform origin: center for smooth scaling

Animation Behavior

• Scale animation from 1 to 1.2 and back
• Infinite loop with ease-in-out timing
• Different durations create organic movement
• No rotation - pure scaling animation
• Hardware-accelerated transforms

Usage Patterns

As Background Layer

Use as a subtle background pattern behind content.

<div class="relative min-h-screen">
  <HexagonPattern />
  <div class="relative z-10 p-8">
    <h1>Your Content Here</h1>
    <p>Content appears above the hexagon pattern</p>
  </div>
</div>

In Tech Sections

Perfect for technology or development-focused sections.

<section class="relative py-20">
  <HexagonPattern />
  <div class="relative z-10 container mx-auto">
    <h2>Technologies I Use</h2>
    <div class="grid md:grid-cols-3 gap-8">
      
    </div>
  </div>
</section>

With Overlay for Readability

Add an overlay to ensure text readability over the pattern.

<div class="relative">
  <HexagonPattern />
  <div class="absolute inset-0 bg-gradient-to-b from-black/20 to-black/40 z-5"></div>
  <div class="relative z-10 p-8">
    <h2>Content with Better Contrast</h2>
    <p>Overlay improves text readability</p>
  </div>
</div>

In Cards or Containers

Use within cards or containers for localized effects.

<div class="relative bg-gray-900 rounded-lg overflow-hidden">
  <HexagonPattern class="opacity-30" />
  <div class="relative z-10 p-6">
    <h3>Card with Hexagon Background</h3>
    <p>Subtle geometric pattern</p>
  </div>
</div>

Customization Options

Opacity Control

Adjust the overall visibility of the pattern.

25%

50%

75%

<HexagonPattern class="opacity-25" />
<HexagonPattern class="opacity-50" />
<HexagonPattern class="opacity-75" />

Scale Adjustments

Scale the entire pattern for different visual effects.

<HexagonPattern class="scale-75" />
<HexagonPattern class="scale-110" />
<HexagonPattern class="scale-125" />

Rotation Effects

Rotate the entire pattern for different orientations.

<HexagonPattern class="rotate-12" />
<HexagonPattern class="rotate-45" />
<HexagonPattern class="-rotate-12" />

Color Filtering

Apply color filters for different moods.

<HexagonPattern class="hue-rotate-90" />
<HexagonPattern class="hue-rotate-180" />
<HexagonPattern class="sepia" />

Performance Considerations

Optimization Features

• SVG-based for scalability and small file size
• CSS transforms for hardware acceleration
• Minimal DOM elements (single SVG with 6 paths)
• No JavaScript dependencies
• Efficient keyframe animations

Best Practices

• Use sparingly - one per section recommended
• Consider reducing opacity for better performance
• Test on mobile devices for smooth animations
• Combine with `will-change: transform` for heavy usage

Usage Examples

Basic Usage

<HexagonPattern />

With Custom Styling

<HexagonPattern class="opacity-40 scale-110 rotate-12" />

In a Full Section

<section class="relative min-h-screen bg-gray-900">
  <HexagonPattern class="opacity-30" />
  <div class="relative z-10 container mx-auto py-20">
    <h1>Technology Stack</h1>
    <p>Modern tools and frameworks</p>
  </div>
</section>

Import

import HexagonPattern from '../ui/atoms/HexagonPattern.astro';