Creating a Pixelated Background with SVG

Creating a Pixelated Background with SVG

SVG (Scalable Vector Graphics) is a powerful vector graphics format perfect for creating lightweight, scalable images without quality loss. In this article, we’ll explore how to create a pixelated background inspired by a raster image using radial gradients and SVG filters. The goal is to replicate the appearance of the raster image while keeping the file size small and allowing for customization.

Why Not Use a Raster Image?

Using a raster image for a background, as I did with my old avatar, can significantly increase file size—especially when animations are involved. A better approach is to recreate the background entirely with SVG, reducing file size and making the background dynamically adjustable. Instead of manually drawing every pixel in SVG (which would result in an even larger file), we’ll achieve the effect by:

  1. Creating a radial gradient for the base.
  2. Applying filters to simulate pixelation.

Our task is to replicate this rasterized image with a gradient and pixelation effect:

Old Background

Step 1: Creating the Gradient

A radial gradient in SVG is created with the <radialGradient> element, which defines a smooth transition between colors from a central point outward. Here’s an example:

<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 width="384"
 height="384"
 viewBox="0 0 384 384">
 <defs>
  <!-- Radial gradient -->
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
   <stop offset="0%" stop-color="#1f706c" />
   <stop offset="100%" stop-color="#0a2324" />
  </radialGradient>
 </defs>
 <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)"/>
</svg>

Key Parameters

  • cx and cy: Define the gradient’s center coordinates.
  • r: Radius of the gradient.
  • fx and fy: Focal point of the gradient.
  • <stop>: Specifies the color at a particular distance from the center using offset.

The result:

Gradient Background

Step 2: Adding Pixelation

To create the pixelated effect in SVG, we use filters, specifically a combination of <feFlood>, <feTile>, and other filter primitives. Here’s how:

<!-- Pixelation filter -->
<filter id="pixelate" x="0" y="0">
  <!-- Base fill color -->
  <feFlood x="16" y="16" height="8" width="8" />
  <!-- Clip the input to fit the grid -->
  <feComposite width="20" height="20" />
  <!-- Tile the grid -->
  <feTile result="grid" />
  <!-- Overlay the grid onto the gradient -->
  <feComposite in="SourceGraphic" in2="grid" operator="in" />
  <!-- Expand grid blocks to simulate pixels -->
  <feMorphology operator="dilate" radius="10" />
</filter>

What Happens Here

  1. <feFlood>: Generates a solid fill layer. The width and height define the size of the “pixels.”
  2. <feComposite>: Clips the input graphic to match the grid created by the previous step.
  3. <feTile>: Repeats the clipped grid to form a tiled effect.
  4. <feComposite> (again): Combines the tiled grid with the original gradient.
  5. <feMorphology>: Expands the boundaries of grid elements, making them look like “pixels.”

Adjusting parameters like height, width, and radius allows fine-tuning of the pixelation level.

Step 3: Refining the Match

To closely replicate the raster image:

  1. Adjust the Gradient Stops: Experiment with stop-color and offset values to match the original light-to-dark transition.
  2. Tune the Pixelation Filter: Modify the grid size and dilation radius to achieve the desired pixel size and spacing.
  3. Test at Different Resolutions: Ensure the SVG remains visually similar to the raster image across various screen sizes.

Here’s the combined SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="384"
  height="384"
  viewBox="0 0 384 384">
  <defs>
    <!-- Radial gradient -->
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#1f706c" />
      <stop offset="100%" stop-color="#0a2324" />
    </radialGradient>
    <!-- Pixelation filter -->
    <filter id="pixelate" x="0" y="0">
      <!-- Base fill color -->
      <feFlood x="16" y="16" height="8" width="8" />
      <!-- Clip the input to fit the grid -->
      <feComposite width="20" height="20" />
      <!-- Tile the grid -->
      <feTile result="grid" />
      <!-- Overlay the grid onto the gradient -->
      <feComposite in="SourceGraphic" in2="grid" operator="in" />
      <!-- Expand grid blocks to simulate pixels -->
      <feMorphology operator="dilate" radius="10" />
    </filter>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" filter="url(#pixelate)"/>
</svg>

The result:

Pixelated Background

Step 6: Making It Dynamic

To further enhance flexibility, we can use CSS variables to control gradient colors. This allows us to dynamically adjust the appearance of the background without modifying the SVG file:

<svg style="--center-color: #1f706c; --edge-color: #0a2324;">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%">
      <stop offset="50%" stop-color="var(--center-color)" />
      <stop offset="100%" stop-color="var(--edge-color)" />
    </radialGradient>
  </defs>
  ...
</svg>

With this approach, you can easily change the gradient’s colors by updating the --center-color and --edge-color variables in your CSS.

Conclusion

Recreating a raster image as an SVG with a pixelation effect provides numerous benefits, including smaller file size, scalability, and customizability. By combining radial gradients and pixelation filters, you can replicate complex effects while maintaining the flexibility and efficiency of vector graphics.

This method not only achieves the desired aesthetic but also ensures that your design is adaptable to future modifications. Whether you’re building an animated logo or an interactive web element, this technique will help you create visually appealing and lightweight graphics.