{"id":20716314,"url":"https://github.com/svagco/shadow","last_synced_at":"2026-05-04T21:34:41.840Z","repository":{"id":57163844,"uuid":"147888467","full_name":"svagco/shadow","owner":"svagco","description":"A macOS-like shadow from a window implemented as an SVG filter.","archived":false,"fork":false,"pushed_at":"2018-09-10T22:47:14.000Z","size":233,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-30T00:21:45.323Z","etag":null,"topics":["javascript","macos","mockup","svg","ui"],"latest_commit_sha":null,"homepage":"https://svag.co","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svagco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-08T00:55:39.000Z","updated_at":"2023-12-05T07:05:02.000Z","dependencies_parsed_at":"2022-09-03T23:01:52.498Z","dependency_job_id":null,"html_url":"https://github.com/svagco/shadow","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fshadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fshadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fshadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fshadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svagco","download_url":"https://codeload.github.com/svagco/shadow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242989249,"owners_count":20217749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","macos","mockup","svg","ui"],"created_at":"2024-11-17T03:05:27.984Z","updated_at":"2026-05-04T21:34:36.820Z","avatar_url":"https://github.com/svagco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @svag/shadow\n\n[![npm version](https://badge.fury.io/js/%40svag%2Fshadow.svg)](https://npmjs.org/package/@svag/shadow)\n\n`@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.\n\n```sh\nyarn add -E @svag/shadow\n```\n\n## Table Of Contents\n\n- [Table Of Contents](#table-of-contents)\n- [API](#api)\n  * [`shadow(options: ShadowOptions): { translate: string, shadow: string }`](#shadowoptions-shadowoptions--translate-string-shadow-string-)\n    * [`ShadowOptions`](#shadowoptions)\n- [Direct VS Standalone](#direct-vs-standalone)\n- [TODO](#todo)\n- [Copyright](#copyright)\n\n## API\n\nThe package is available by importing its default function:\n\n```js\nimport Shadow from '@svag/shadow'\n```\n\n### `shadow(`\u003cbr/\u003e\u0026nbsp;\u0026nbsp;`options: ShadowOptions,`\u003cbr/\u003e`): { translate: string, shadow: string }`\n\nCreates 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.\n\n\u003cimg alt=\"Generated Shadow\" src=\"https://raw.github.com/svagco/shadow/master/images/shadow.svg?sanitize=true\"\u003e\n\n__\u003ca name=\"shadowoptions\"\u003e`ShadowOptions`\u003c/a\u003e__: Options to generate macOS like  shadow using a blur filter.\n\n| Name | Type | Description | Default |\n| ---- | ---- | ----------- | ------- |\n| __width*__ | _number_ | The width of the window. | - |\n| __height*__ | _number_ | The height of the window. | - |\n| rx | _number_ | The `x` corner radius of a window which drops the shadow. | `6` |\n| ry | _number_ | The `y` corner radius of a window which drops the shadow. | `6` |\n| offsetY | _number_ | The offset from the top of the window. | `25` |\n| stdDeviation | _number_ | The standard deviation for the blur. It will spread twice this distance in each direction. | `27.5` |\n\n```js\nimport { svg, rect } from '@svag/lib'\nimport Shadow from '@svag/shadow'\n\n// 0. DEFINE width and height of the window and its shadow.\nconst width = 250\nconst height = 250\n\n// 1. CREATE a shadow element.\nconst { translate, shadow } = Shadow({\n  width,\n  height,\n})\n\n// 2. CREATE a window element to place above the shadow.\nconst window = rect({\n  transform: translate,\n  width,\n  height,\n  rx: 6,\n  ry: 6,\n  stroke: 'grey',\n  fill: '#FFFFFF',\n})\n\n// 3. CREATE an svg image.\nconst image = svg({\n  content: [shadow, window],\n  height: 375,\n  width: 375,\n  stretch: false,\n})\n```\n\n```svg\n\u003csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n     viewBox=\"0, 0, 375, 375\" width=\"375px\" height=\"375px\"\u003e\n  \u003cg transform=\"translate(55, 25)\" filter=\"url(#shadow)\"\u003e\n    \u003cdefs\u003e\n      \u003cfilter x=\"-22%\" y=\"-10%\" width=\"144%\" height=\"142%\" id=\"shadow\"\u003e\n        \u003cfeOffset dy=\"25\" in=\"SourceAlpha\" result=\"o\"/\u003e\n        \u003cfeGaussianBlur stdDeviation=\"27.5\" in=\"o\" result=\"b\"/\u003e\n        \u003cfeColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" in=\"b\"/\u003e\n      \u003c/filter\u003e\n    \u003c/defs\u003e\n    \u003crect height=\"250\" width=\"250\" rx=\"6\" ry=\"6\" fill=\"white\"/\u003e\n  \u003c/g\u003e\n  \u003crect transform=\"translate(55, 25)\" width=\"250\" height=\"250\" rx=\"6\" ry=\"6\" stroke=\"grey\"\n        fill=\"#FFFFFF\"/\u003e\n\u003c/svg\u003e\n```\n\n## Direct VS Standalone\n\nThe 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.\n\n\u003cimg alt=\"Compare Images\" src=\"https://raw.github.com/svagco/shadow/master/images/compare.png\"\u003e\n\n## TODO\n\n- [ ] Add an `offsetX` property to the shadow.\n\n## Copyright\n\n(c) [SVaG][1] 2018\n\n[1]: https://svag.co\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvagco%2Fshadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvagco%2Fshadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvagco%2Fshadow/lists"}