@svag/shadow

    2.0.1 • Public • Published

    @svag/shadow

    npm version

    @svag/shadow is a shadow from a window. It is created as a separate element to make sure that when the svg image embedded in the image tag is resized, the actual content of the window will not be pixelated.

    yarn add -E @svag/shadow

    Table Of Contents

    API

    The package is available by importing its default function:

    import Shadow from '@svag/shadow'

    shadow(
      options: ShadowOptions,
    ): { translate: string, shadow: string }

    Creates a shadow for a window with given width and height. The translate string is also returned to add as a transform property to the window which drops the shadow, to make sure the shadow is not cropped.

    Generated Shadow

    ShadowOptions: Options to generate macOS like shadow using a blur filter.

    Name Type Description Default
    width* number The width of the window. -
    height* number The height of the window. -
    rx number The x corner radius of a window which drops the shadow. 6
    ry number The y corner radius of a window which drops the shadow. 6
    offsetY number The offset from the top of the window. 25
    stdDeviation number The standard deviation for the blur. It will spread twice this distance in each direction. 27.5
    import { svg, rect } from '@svag/lib'
    import Shadow from '@svag/shadow'
     
    // 0. DEFINE width and height of the window and its shadow.
    const width = 250
    const height = 250
     
    // 1. CREATE a shadow element.
    const { translate, shadow } = Shadow({
      width,
      height,
    })
     
    // 2. CREATE a window element to place above the shadow.
    const window = rect({
      transform: translate,
      width,
      height,
      rx: 6,
      ry: 6,
      stroke: 'grey',
      fill: '#FFFFFF',
    })
     
    // 3. CREATE an svg image.
    const image = svg({
      content: [shadow, window],
      height: 375,
      width: 375,
      stretch: false,
    })
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0, 0, 375, 375" width="375px" height="375px">
      <g transform="translate(55, 25)" filter="url(#shadow)">
        <defs>
          <filter x="-22%" y="-10%" width="144%" height="142%" id="shadow">
            <feOffset dy="25" in="SourceAlpha" result="o"/>
            <feGaussianBlur stdDeviation="27.5" in="o" result="b"/>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" in="b"/>
          </filter>
        </defs>
        <rect height="250" width="250" rx="6" ry="6" fill="white"/>
      </g>
      <rect transform="translate(55, 25)" width="250" height="250" rx="6" ry="6" stroke="grey"
            fill="#FFFFFF"/>
    </svg>

    Direct VS Standalone

    The shadow has to be implemented as a separate element of the svg, and not part of the main window, because when embedded as in an img tag and resized, the quality will be lost on Mobile Safari. The image below shows what happens, and how this package is solving the problem.

    Compare Images

    TODO

    • Add an offsetX property to the shadow.

    Copyright

    (c) SVaG 2018

    Install

    npm i @svag/shadow

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • zvr