{"_id":"meanderer","_rev":"1-891b6446a98b08030b22013c02b94b28","name":"meanderer","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"meanderer","version":"0.0.1","description":"micro-library for generating scaled CSS offset-paths","main":"dist/meanderer.js","scripts":{"precommit":"lint-staged","build":"rollup -c rollup.config.js","build:prod":"rollup -c rollup.config.prod.js","dist":"yarn build && yarn build:prod","predev":"browser-sync start --config bs-config.js","dev":"rollup -w -c rollup.config.dev.js","test":"echo \"Error: no test specified\" && exit 1","lint":"eslint .","lint--fix":"eslint --fix ."},"repository":{"type":"git","url":"git+https://github.com/jh3y/meanderer.git"},"keywords":["offset-path","motion-path","responsive","CSS"],"lint-staged":{"{src,playground}/**/*.{js,json,css}":["eslint","prettier --write","git add"]},"author":{"name":"jh3y"},"license":"MIT","bugs":{"url":"https://github.com/jh3y/meanderer/issues"},"homepage":"https://github.com/jh3y/meanderer#readme","devDependencies":{"@babel/core":"^7.9.0","@babel/preset-env":"^7.9.0","@rollup/plugin-node-resolve":"^7.1.1","babel-eslint":"^10.1.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","browser-sync":"^2.26.7","d3":"^5.15.0","eslint":"^6.8.0","eslint-config-prettier":"^6.10.1","eslint-plugin-prettier":"^3.1.2","husky":"^4.2.3","lint-staged":"^10.0.9","prettier":"^2.0.2","prettier-eslint":"^9.0.1","rollup":"^2.2.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-filesize":"^6.2.1","rollup-plugin-uglify":"^6.0.4"},"gitHead":"dcd5f66e9b3482b7916e5309021df12e7b2cde54","_id":"meanderer@0.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-6sx5sArPLfSf8bZSgfrRopX5hB5VkZ5OLnlXGZ87InPDbp9Eyb3qVvY2pXfgqMs0ilIJNxy5MzsTDFeXoDAodQ==","shasum":"0d090266e0e25c1e47306737e9f1de0e4481ba1b","tarball":"https://registry.npmjs.org/meanderer/-/meanderer-0.0.1.tgz","fileCount":4,"unpackedSize":84187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJef31RCRA9TVsSAnZWagAA5g8QAIh9O9G3/GzgA81xhysH\n9QaPb5xaSjZ7oXgNejezAHClhgQoQt7nX2ANXZCzhwjyQMEqgSn+XztMZ6Ji\neim+L+XC6T/5x2kWK4o0N5cRi6iuaCHSlQPj/ezrNtYs5K/ajVqOOAQ54FUS\njUVS0tONrBHxa4c2C9t7LuffyDkOEOO/x45ojS+xWKH5gQi/qhBk0S9e8BG5\nGapJ7K2oQ2N9uMk3/skDkXoHu/A7yWCdkwlaV4VHpjZ6+6ex+I3dpWTYucxN\n3lBkMoRGYijCqAgpUu3CEpG5jU0tWwvSdSZYI1ZmCZddnwhti4ta5QcUl4NU\nKVdklqgRhnbdIhXRRD9loBITifBSstF+w7B4+PjKoBRETZxDpkMVMOFlZoYK\nHdo21sq3RIh70XHCHFs0crOqJuki7wwYmV1D27EcNE/j+2akG1yFTp6uSB0R\nfOLjUh/Hb3OCvPCC5Sd53JhOsBqDKnjMHBkYhLwosmWLg+uVX9jtnnajt/xg\nj9G9/IHCCkzZ1PiyrEkGS9zrfQI4r654Aw9/Iq8msn+MYsoyV2ispLl0/jKZ\nyRCE3MDgfOu38VpIx+wjmPGfd98rAygCyWOOrxeJROJw8THQlYYBFTQXnKDl\niY0/l3HnZ3dh6Rzep/e4srPC7oTxT/fMM1HtYuAI39F15x5jKxIK4jlqI+Wu\nG64o\r\n=4G4V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAq3IwYTX7ehKyHEaR4glVxWX8GrfILAlz8CebWNq1hsAiBtQ9Xb1D3eFuemWYH673QYoGsyJ73m9oy5wYv2RDXUfA=="}]},"maintainers":[{"name":"jh3y","email":"jh3yyy@gmail.com"}],"_npmUser":{"name":"jh3y","email":"jh3yyy@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/meanderer_0.0.1_1585413456730_0.5938995815477941"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-28T16:37:36.729Z","0.0.1":"2020-03-28T16:37:36.848Z","modified":"2022-05-09T01:58:39.334Z"},"maintainers":[{"name":"jh3y","email":"jh3yyy@gmail.com"}],"description":"micro-library for generating scaled CSS offset-paths","homepage":"https://github.com/jh3y/meanderer#readme","keywords":["offset-path","motion-path","responsive","CSS"],"repository":{"type":"git","url":"git+https://github.com/jh3y/meanderer.git"},"author":{"name":"jh3y"},"bugs":{"url":"https://github.com/jh3y/meanderer/issues"},"license":"MIT","readme":"# Meanderer\n\nA micro-library for scaling [CSS motion path](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path) strings ✨\n\n![popsicle with \"stay cool...\" lettering travelling around its path](./assets/stay-cool.gif)\n\n## Usage\n\n```js\n// Our path string\nconst PATH = \"M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33...\"\n// The bounds of our path\nconst WIDTH = 65\nconst HEIGHT = 30\n// Generate a responsive path\nconst responsivePath = new Meanderer({\n  path: PATH,\n  width: WIDTH,\n  height: HEIGHT\n})\n// Generate a new scaled path when required. Here we are using ResizeObserver\n// with a container that uses viewport units\nconst setPath = () => {\n  const scaledPath = responsivePath.generatePath(\n    CONTAINER.offsetWidth,\n    CONTAINER.offsetHeight\n  )\n  // Here, we apply the path to an element through a CSS variable.\n  // And then an element picks up on that. We could apply the motion path straight to the element though.\n  CONTAINER.style.setProperty(\"--path\", `\"${scaledPath}\"`)\n}\n// Set up our Resize Observer that will get the ball rolling\nconst SizeObserver = new ResizeObserver(setPath)\n// Observe! Done!\nSizeObserver.observe(CONTAINER)\n```\n\nFirst things first. We need a `path`.\nUnless you're constructing one by hand, it's likely you'll be extracting one from an `SVG`.\n\nBefore extracting one from an `SVG`, it's wise to run that `SVG` through an optimizer like [SVGOMG](https://jakearchibald.github.io/svgomg/)(Use the precision slider for extra gains! 💪). This will normalize coordinates, etc. removing any translations which could skew the path translation.\n\nNow you've got a `path` string, it's time to use it!\n1. Create variables for the `path`, and a desired `width` and `height` for the `path` bounds. The `width` and `height` are in most cases going to be the `x2` and `y2` of your SVG's `viewBox` attribute.\n  ```js\n    const PATH = \"M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33...\"\n    // The bounds of our path\n    const WIDTH = 65\n    const HEIGHT = 30\n  ```\n2. Create a new responsive path by passing those variables inside an `Object` to a __new__ `Meanderer` instance.\n  ```js\n    // Generate a responsive path\n    const responsivePath = new Meanderer({\n      path: PATH,\n      width: WIDTH,\n      height: HEIGHT\n    })\n  ```\n3. Use your instance to generate scaled path strings for a given `width` and `height` 👍\n  ```js\n    responsivePath.generatePath(200, 400)\n  ```\n4. Pass that to your element either directly or via CSS variable, etc. 🎉\n\n\n## Caveats\n`Meanderer` will do its best to maintain aspect ratio of your paths. If the container dimensions passed in to `generatePath` don't match the aspect ratio of the `path`, `Meanderer` will handle this. It will do this by padding out the container and centering the `path` for you.\n\n## Contributing\nI'd love some contributions if you think this micro-library could be useful for you! Leave an issue or open a PR 👍\n\n--------\n\nMade with 💻 by @jh3y 2020","readmeFilename":"README.md"}