→ Alex Morgan
→ Dynamic SVG Pattern Hero Banner for Mode...

Dynamic SVG Pattern Hero Banner for Modern Websites

A visually striking hero banner with dynamic SVG pattern background that captures attention and enhances the modern aesthetic of your website.

This Example is contributed by Alex Morgan, on 17-Mar-2025. It is responsive.

Hero Gradient Interactive SVG Pattern

Author Alex Morgan

Fork Fullscreen

<div class="hero-banner">
  <div class="pattern-background">
    <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
      <pattern id="grid-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
        <circle cx="20" cy="20" r="4" fill="rgba(255, 255, 255, 0.2)" />
      </pattern>
      <pattern id="diagonal-pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
        <path d="M0 0L60 60ZM60 0L0 60Z" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1" />
      </pattern>
      <rect width="100%" height="100%" fill="url(#grid-pattern)" />
      <rect width="100%" height="100%" fill="url(#diagonal-pattern)" />
    </svg>
  </div>
  <div class="hero-content">
    <h1>Transform Your Digital Experience</h1>
    <p>Creating innovative solutions with cutting-edge technology to drive your business forward.</p>
    <div class="hero-buttons">
      <button class="primary-btn">Get Started</button>
      <button class="secondary-btn">Learn More</button>
    </div>
  </div>
</div>

Related Examples