foggy-mirror

foggy-mirror is a small Ruby tool that creates faux blurry versions of raster images using SVG or CSS, either through radial gradients or SVG blur filters, with very small file sizes (usually under 1KB).

This is useful as a poor man's replacement for CSS's backdrop-filter: blur(), as that CSS feature isn't fully supported by browsers, and sometimes you want an element with a "frosted glass" effect (also known as glassmorphism) on top of a crispy background.

Need Ruby/Rails consulting? Contact us at Beezwax.net

Original raster image (20KB WebP):

SVG with blur filter (720 bytes SVG):

Radial gradients (4.8KB SVG or 1.7KB pure CSS):

In your Gemfile:

gem 'foggy-mirror'

require 'foggy-mirror'

# All keyword arguments are optional, only the filename is required
p = FoggyMirror::Processor.new("/path/to/image.jpg",
  resolution:      5,
  overlap:         0.5,
  distribution:    :shuffle,
  random_offset:   0.5,
  random:          Random.new,
  adapter:         FoggyMirror::ImageMagick,
  adapter_options: {}
)

p.to_svg # Outputs SVG

p.to_css # Outputs CSS properties

Options are:

• resolution (Integer): How many radial gradients to use per dimension (X/Y). Defaults to 5.
• overlap (Float): How much radial gradients overlap each other (0 means no overlap). Defaults to 0.5.
• distribution (Symbol/String): How to distribute the radial gradients. Since they can overlap each other, their position on the Z-axis affects the final result. Accepted values are :scan (default), :scan_reverse, :suffle, :spiral_in and :spiral_out.
• random_offset (Float): How much to randomly offset the center of each radial gradient, which can create a more natural looking result (0 means no offset). Defaults to 0.5.
• random (Random instance): The Random instance to use for generating random values, in case you need it to be deterministic.
• adapter (Class): the adapter to use for reading and processing image files. Supported adapters are FoggyMirror::ImageMagick (uses CLI commands) and FoggyMirror::Vips (fastest, but requires installing ruby-vips gem).
• adapter_options (Hash): options to pass to the adapter on initialization.

Command syntax:

$ foggy-mirror [options] [--] image_file ... 

For a full list of options use -h:

$ foggy-mirror -h
Usage: foggy-mirror [options] [--] image_file ...
        --format=FORMAT              Which format output to generate, default: svg
        --strategy=STRATEGY          Which strategy to use for SVG output, default: embedded_image
        --res=RESOLUTION             The output resolution (how many radial gradients per dimension, default: 5)
        --overlap=OVERLAP            How much to overlap radial gradients
        --dist=DISTRIBUTION          Distribution strategy for radial gradients
        --random-offset=OFFSET       Upper limit for how much to randomly offset each radial gradient
        --random-seed=SEED           The random seed to use (for deterministic results)
        --adapter=ADAPTER            Which graphics library adapter to use
        --extension=EXTENSION        The extension to use for created files (default: .foggy.svg)
        --stdout                     Output to STDOUT instead of writing to files
        --target-dir=DIR             Directory to write files to (defaults to same as input files)
    -h, --help                       Print help
        --version                    Show version

Simple example:

$ foggy-mirror some_image.jpg some_other_image.webp yet_another_one.gif

The above will create files some_image.foggy.svg, some_other_image.foggy.svg and yet_another_one.foggy.svg.

You may also want to look at these other tools. Although their motivation is different (mostly meant for small placeholder thumbnails), they accomplish similar end results:

• ThumbHash
• BlurHash