Building Film Festival Laurel Badges with Pure CSS and SVG

Introduction #

Every filmmaker knows the feeling: you have spent years crafting a story, and finally, the email arrives. Your film has been selected. Or better – it has won an award.

Now comes the next challenge: displaying those accolades on your film’s website in a way that looks professional, not amateurish.

The film industry has a visual language for awards: the laurel wreath. Two curved branches framing the award name, festival title, and year. You see it on posters, trailers, and streaming platforms everywhere.

This article walks through how to implement those laurel badges on a website using pure CSS and inline SVG – no external libraries, no image files, and fully responsive across devices.

The Problem with Common Approaches #

Most developers, when asked to add film festival laurels, reach for one of these:

1. PNG/JPG images – Each award becomes a separate image file. Looks fine at one size, pixelates at others. Dozens of festivals mean dozens of files.

2. Icon fonts – Limited selection, often stylistically inconsistent with the rest of the site.

3. Third-party libraries – Overkill for a decorative element. Adds bundle weight and dependencies.

None of these feel right for a film website, where visual polish matters and performance cannot be sacrificed.

The better approach: inline SVG with CSS styling.

Why Inline SVG Works #

SVG (Scalable Vector Graphics) solves the core problems:

• Resolution-independent – Looks sharp on any screen, any size.
• Styleable via CSS – Colors, sizes, and animations controlled through your stylesheet.
• Lightweight – A detailed laurel wreath is about 3KB of path data.
• No HTTP requests – Inline SVG loads with the page.

But inline SVG has its own challenge: if you have 20 awards, you do not want 20 copies of the same 3KB path cluttering your HTML.

The solution is the <symbol> and <use> pattern.

The Symbol and Use Pattern #

Define the SVG once, reference it many times:

<!-- Define the symbol once (hidden) -->
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="laurel-wreath" viewBox="0 0 360 810">
    <g>
      <path d="m334.46 49.002c-18.278 12.277..." />
      <!-- Additional paths for the laurel branches -->
    </g>
  </symbol>
</svg>

<!-- Use it as many times as needed -->
<svg class="wreath-svg" viewBox="0 0 360 810">
  <use href="#laurel-wreath" />
</svg>

The browser parses the path data once and reuses it for every <use> reference. Even with 30 awards on a page, the performance cost is minimal.

The Laurel Badge Structure #

Each badge consists of three elements arranged horizontally:

1. Left wreath – The SVG laurel branch.
2. Content area – Award name, festival, country, year.
3. Right wreath – The same SVG, mirrored.

<div class="festival-laurel-badge">
  <svg class="wreath-svg left" viewBox="0 0 360 810">
    <use href="#laurel-wreath" />
  </svg>
  
  <div class="laurel-content">
    <p class="festival-award-text">BEST SHORT FILM</p>
    <p class="festival-name-text">Palm Springs International ShortFest</p>
    <p class="festival-country-text">United States</p>
    <p class="festival-year-text">2024</p>
  </div>
  
  <svg class="wreath-svg right" viewBox="0 0 360 810">
    <use href="#laurel-wreath" />
  </svg>
</div>

The right wreath is mirrored using a simple CSS transform:

.wreath-svg.right {
  transform: scaleX(-1);
}

Critical CSS Details #

Several CSS details make or break the visual result.

The viewBox Gotcha #

When using <use> to reference a <symbol>, the outer <svg> element must have its own viewBox attribute. Without it, the browser defaults to 300px width – a common source of layout bugs.

<!-- Wrong: missing viewBox, defaults to 300px width -->
<svg class="wreath-svg">
  <use href="#laurel-wreath" />
</svg>

<!-- Correct: viewBox matches the symbol -->
<svg class="wreath-svg" viewBox="0 0 360 810">
  <use href="#laurel-wreath" />
</svg>

Sizing via Height #

The viewBox ratio (360:810) is roughly 1:2.25. Setting only the height lets the width calculate automatically:

.wreath-svg {
  height: 90px;
  width: auto;
  fill: white;
  flex-shrink: 0;
}

Zero Gap for Tight Framing #

Film festival laurels should frame the text tightly, not float at a distance:

.festival-laurel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;  /* Wreaths touching the content */
}

Complete CSS Implementation #

Here is the full styling for a responsive laurel badge grid:

/* Grid container */
.festivals-laurel-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 1rem;
  padding: 1rem 0;
}

/* Individual badge */
.festival-laurel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 100px;
  transition: transform 0.3s ease;
}

.festival-laurel-badge:hover {
  transform: scale(1.05);
}

/* SVG wreath */
.wreath-svg {
  height: 90px;
  width: auto;
  fill: white;
  flex-shrink: 0;
}

.wreath-svg.right {
  transform: scaleX(-1);
}

/* Text content */
.laurel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  min-width: 100px;
  max-width: 180px;
}

.festival-award-text {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 0.2rem 0;
  line-height: 1.1;
}

.festival-name-text {
  font-size: 0.7rem;
  margin: 0 0 0.15rem 0;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.festival-country-text {
  font-size: 0.65rem;
  opacity: 0.7;
  margin: 0;
}

.festival-year-text {
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0.2rem 0 0 0;
}

Responsive Considerations #

On mobile, badges need to scale down without losing legibility:

@media (max-width: 768px) {
  .festivals-laurel-grid {
    gap: 1rem 1.5rem;
  }

  .festival-laurel-badge {
    min-height: 80px;
  }

  .wreath-svg {
    height: 70px;
  }

  .laurel-content {
    min-width: 70px;
    max-width: 120px;
  }

  .festival-award-text {
    font-size: 0.75rem;
  }

  .festival-name-text {
    font-size: 0.6rem;
  }
}

The key insight: reduce wreath height proportionally with content width to maintain visual balance.

The SVG Path #

The laurel wreath itself is a series of SVG <path> elements forming the curved branch with leaves. A production-quality wreath typically includes:

• A main curved stem
• 10-15 individual leaf shapes
• Proper visual weight distribution (denser at the base, sparser at the top)

Professional SVG laurels can be found in design resources or created in vector tools like Figma or Illustrator. The key requirements:

1. Clean paths – No unnecessary anchor points.
2. Consistent viewBox – Usually a 360×810 or similar tall rectangle.
3. Single color fill – Allows CSS control via fill: currentColor or explicit color.

Dark Mode and Theming #

Because the SVG uses fill rather than embedded colors, theming is straightforward:

/* Light theme */
.festivals-section {
  background-color: #f5f5f5;
}

.wreath-svg {
  fill: #1a1a1a;
}

/* Dark theme */
.dark .festivals-section {
  background-color: #111;
}

.dark .wreath-svg {
  fill: white;
}

Or use CSS custom properties for more flexibility:

:root {
  --laurel-color: #1a1a1a;
}

.dark {
  --laurel-color: white;
}

.wreath-svg {
  fill: var(--laurel-color);
}

Common Pitfalls #

After implementing laurel badges across multiple film sites, here are the mistakes we see most often:

Integration with Static Site Generators #

Most film websites run on static site generators (Hugo, Eleventy, Next.js) with content in Markdown or headless CMS.

The award data typically comes from front matter:

festivals:
  - year: '2024'
    festival: Palm Springs International ShortFest
    award: Best Short Film
    country: United States
  - year: '2024'
    festival: Seattle International Film Festival
    award: ''
    country: United States

The template iterates this data and outputs the HTML structure. The SVG symbol is defined once at the top of the section; each award becomes a badge referencing that symbol.

This separation of data and presentation means:

• Content editors update a YAML file, not HTML.
• Designers modify CSS without touching content.
• The page remains fast regardless of award count.

How SYNKEE Can Help #

SYNKEE is a Singapore-based engineering team specializing in high-performance websites for the film and media industry. Our expertise includes:

• Film platform development – Streaming sites, festival submission portals, and filmmaker portfolios built with modern static site generators and headless architectures.
• Performance optimization – Ensuring media-heavy sites load fast on any device, from 4K desktop monitors to phones on spotty festival WiFi.
• Design system implementation – Translating visual designs into responsive, maintainable code with attention to the details that matter in film presentation.
• CMS integration – Structured content workflows where filmmakers and distributors can update awards, screenings, and press materials without touching code.

If your film, festival, or distribution company needs a website that handles awards and press materials as elegantly as your films handle storytelling, contact us to discuss your project.

Conclusion #

Film festival laurel badges are a small detail, but small details define professional presentation.

The approach outlined here – inline SVG with the symbol/use pattern, CSS-controlled sizing, zero-gap flexbox layout – produces results that:

• Look sharp on any screen
• Load without external requests
• Scale to any number of awards
• Adapt to light and dark themes
• Remain fully responsive

For filmmakers and film sites, this means one less thing standing between your work and its audience. The awards frame the story; the code should be invisible.

Build the laurels once. Reuse them everywhere. Let the work speak for itself.