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 minimal 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

Example

Original raster image:

SVG with blur filter:

SVG with radial gradients:

Installation

In your Gemfile:

gem 'foggy-mirror'

Usage

Within Ruby

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.

From CLI

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.