{"_id":"@dr-nio/svgx","_rev":"3-03995c2955f5a7bdead7e8dff98685c2","name":"@dr-nio/svgx","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@dr-nio/svgx","version":"1.0.0","keywords":["svg","animation","tailwind","gsap","drawing","morph","timeline","utility-first","typescript"],"author":{"name":"SVGX Contributors"},"license":"MIT","_id":"@dr-nio/svgx@1.0.0","maintainers":[{"name":"dr-nio","email":"nicky.oscar@yahoo.com"}],"homepage":"https://svgx.dev","bugs":{"url":"https://github.com/svgx/svgx/issues"},"dist":{"shasum":"33bcf6b8386c5667c6bfc7af151df07e5916dc66","tarball":"https://registry.npmjs.org/@dr-nio/svgx/-/svgx-1.0.0.tgz","fileCount":18,"integrity":"sha512-5OCJ/sd7lr+ZBy4WU/dWoLbMIQYZqQASUm2Vs0TwAabA2IoKcR0w8YtUz+CzYCFnbAKLWEbnaxUKk+YHy5BAAw==","signatures":[{"sig":"MEQCIEgLhI9TGMSP9zv1jJun5ELptX2b1vWjTZIUU1+CuZpZAiAo4QFFYReTSdZtCBdAZFY9AbU2ZbT4faqzqZGdy/z7Bw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29896},"main":"./dist/svgx.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/svgx.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/svgx.es.js","require":"./dist/svgx.umd.js"},"./css":"./dist/svgx.css"},"gitHead":"3fec76a25d1101109393dbd9d88fa5d587f1f741","scripts":{"dev":"vite","build":"vite build && npm run build:css","preview":"vite preview","build:css":"node scripts/build-css.js","type-check":"tsc --noEmit"},"_npmUser":{"name":"dr-nio","email":"nicky.oscar@yahoo.com"},"repository":{"url":"git+https://github.com/svgx/svgx.git","type":"git"},"_npmVersion":"11.4.2","description":"Modern SVG animation library - utility-first CSS + powerful JS API","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^4.0.0","typescript":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svgx_1.0.0_1775784066011_0.3577061960317509","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dr-nio/svgx","version":"1.1.0","keywords":["svg","animation","tailwind","gsap","drawing","morph","timeline","utility-first","typescript"],"author":{"name":"SVGX Contributors"},"license":"MIT","_id":"@dr-nio/svgx@1.1.0","maintainers":[{"name":"dr-nio","email":"nicky.oscar@yahoo.com"}],"homepage":"https://svgx.dev","bugs":{"url":"https://github.com/svgx/svgx/issues"},"dist":{"shasum":"c42416487755be540b7799fc3d11d4fa3f71b674","tarball":"https://registry.npmjs.org/@dr-nio/svgx/-/svgx-1.1.0.tgz","fileCount":18,"integrity":"sha512-bBcfABzSAJwOpQoIPZP77lItFC6/C7brkIVxodsvyepmSvG/CJpHNWxeDzFje9mTP461YUbg5JHWDfQEDQPqnw==","signatures":[{"sig":"MEYCIQDkTcHdiNOOAVlZpN2ItaGgO4fHqhEG0Pv1/l3rb9XqqwIhANRLj6iDclJNg+/89JKittxy4cMfUqoYkffDluaQtdyp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29923},"main":"./dist/svgx.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/svgx.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/svgx.es.js","require":"./dist/svgx.umd.js"},"./css":"./dist/svgx.css"},"gitHead":"b98bb0aa43f6960ea38f99a75232826ec57b2e30","scripts":{"dev":"vite","build":"vite build && npm run build:css","preview":"vite preview","build:css":"node scripts/build-css.js","type-check":"tsc --noEmit"},"_npmUser":{"name":"dr-nio","email":"nicky.oscar@yahoo.com"},"repository":{"url":"git+https://github.com/svgx/svgx.git","type":"git"},"_npmVersion":"11.4.2","description":"Modern SVG animation library - utility-first CSS + powerful JS API","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^4.0.0","typescript":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svgx_1.1.0_1775785763523_0.23265389175024187","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@dr-nio/svgx","version":"2.0.0","description":"Modern SVG animation library - utility-first CSS + powerful JS API","type":"module","main":"./dist/svgx.umd.js","module":"./dist/svgx.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/svgx.es.js","require":"./dist/svgx.umd.js","types":"./dist/index.d.ts"},"./css":"./dist/svgx.css"},"scripts":{"dev":"vite","build":"vite build && npm run build:css","build:css":"node scripts/build-css.js","preview":"vite preview","type-check":"tsc --noEmit"},"keywords":["svg","animation","tailwind","gsap","drawing","morph","timeline","utility-first","typescript"],"author":{"name":"SVGX Contributors"},"license":"MIT","devDependencies":{"typescript":"^5.0.0","vite":"^4.0.0"},"repository":{"type":"git","url":"git+https://github.com/svgx/svgx.git"},"bugs":{"url":"https://github.com/svgx/svgx/issues"},"homepage":"https://svgx.dev","_id":"@dr-nio/svgx@2.0.0","gitHead":"1268df7dde3e90311a58e264a4cebcab762bdcbb","_nodeVersion":"22.15.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-85LVti4kudHfj1vfTYXAPjD0MdLBlXuGKRG0DGak3gAYGc/mzbXkho/G6TJeLPWj2TUZ/AKhNlTM2zTSV3Jg3Q==","shasum":"0926a4673e22f019ea537096770b1f7b35436e01","tarball":"https://registry.npmjs.org/@dr-nio/svgx/-/svgx-2.0.0.tgz","fileCount":21,"unpackedSize":114089,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHvwaqS/F+hx6HI7ypwDPZ7KL2S3LyidibSsA5LN1sRpAiArRqvC2+UoAlVHse8s+CXeJ9XMnnL/6nSZppolPCyfLw=="}]},"_npmUser":{"name":"dr-nio","email":"nicky.oscar@yahoo.com"},"directories":{},"maintainers":[{"name":"dr-nio","email":"nicky.oscar@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svgx_2.0.0_1775787139067_0.9998609524931841"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T01:21:05.854Z","modified":"2026-04-10T02:12:19.331Z","1.0.0":"2026-04-10T01:21:06.156Z","1.1.0":"2026-04-10T01:49:23.677Z","2.0.0":"2026-04-10T02:12:19.226Z"},"bugs":{"url":"https://github.com/svgx/svgx/issues"},"author":{"name":"SVGX Contributors"},"license":"MIT","homepage":"https://svgx.dev","keywords":["svg","animation","tailwind","gsap","drawing","morph","timeline","utility-first","typescript"],"repository":{"type":"git","url":"git+https://github.com/svgx/svgx.git"},"description":"Modern SVG animation library - utility-first CSS + powerful JS API","maintainers":[{"name":"dr-nio","email":"nicky.oscar@yahoo.com"}],"readme":"# SVGX - Modern SVG Animation Library\n\n[](https://www.npmjs.com/package/svgx)\n[](https://opensource.org/licenses/MIT)\n\nSVGX is a lightweight, developer-friendly SVG animation library that combines the best of Tailwind CSS (utility-first) and GSAP (powerful JS API).\n\n## Features\n\n- 🎨 **Utility-first CSS** - Animate with simple classes like `.svg-draw` and `.svg-duration-500`\n- ⚡ **Powerful JS API** - Full programmatic control with `animate()` function\n- 📅 **Timeline System** - Sequence complex animations with chainable API\n- 🎯 **SVG-First** - Specialized for path drawing, transforms, and opacity\n- 🔄 **Loop & Yoyo** - Built-in repeat and reverse animations\n- 📦 **Zero Dependencies** - Small footprint, high performance\n- 🧩 **Tree-shakable** - Import only what you need\n- 📘 **TypeScript** - Full type definitions included\n\n## Installation\n\n```bash\nnpm install svgx\n```\n\n## Or use CDN:\n\n```bash\n\n\n```\n\n## Quick Start\n- **CSS Utility Classes**\n\n```bash\n\n```\n\n## JavaScript API\n\n```bash\nimport { animate } from 'svgx';\n\n// Draw a path\nanimate('#myPath', {\n draw: 1,\n opacity: 0.5,\n transform: { rotate: 360 }\n}, {\n duration: 1000,\n easing: 'easeOut',\n repeat: 2,\n yoyo: true\n});\n```\n\n## Timeline\n\n```bash\nimport { timeline } from 'svgx';\n\nconst tl = timeline()\n .add('#path1', { draw: 1 }, { duration: 500 })\n .add('#path2', { opacity: 1 }, { duration: 300 }, '-=0.2')\n .add('#circle', { transform: { scale: 1.5 } }, { duration: 400 })\n .play();\n```\n\n## API Reference\n\n```bash\nanimate(target, properties, options)\n```\n\n- **Parameters:**\n\ntarget: CSS selector string, Element, or array of Elements\n\nproperties: Object with animation targets\n\n draw: number (0-1) - path drawing progress\n\n opacity: number (0-1)\n\n transform: Object with x, y, scale, rotate, skewX, skewY\n\n morph: string - target path selector (placeholder)\n\noptions: Animation options\n\n duration: number (ms)\n\n delay: number (ms)\n\n easing: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack'\n\n repeat: number | true (infinite)\n\n yoyo: boolean\n\n onComplete: function\n\n onUpdate: function\n\nReturns: AnimationControl object with pause(), resume(), seek(), kill(), then()\n\n## timeline(options)\n\nCreates a new timeline for sequencing animations.\n\n## Methods:\n\nadd(target, properties, options, offset) - Add animation to timeline\n\nplay() - Start timeline\n\npause() / resume() - Control playback\n\nkill() - Stop all animations\n\ngetDuration() - Get total timeline length\n\n## Examples\n\n- **Path Drawing Animation**\n\n```bash\nimport { animate } from 'svgx';\n\nanimate('#logo-path', {\n draw: 1,\n transform: { scale: 1.2 }\n}, {\n duration: 1500,\n easing: 'easeOutBack'\n});\n```\n\n## Complete Logo Reveal\n\n```bash\nimport { timeline } from 'svgx';\n\ntimeline()\n .add('#logo-outline', { draw: 1 }, { duration: 800 })\n .add('#logo-fill', { opacity: 1 }, { duration: 400 }, '-=0.3')\n .add('#logo-text', { transform: { x: 20 } }, { duration: 600 })\n .play();\n```\n\n## Browser Support\n\nSVGX works in all modern browsers that support ES6 and SVG.\n\n## Contributing\n\nWe welcome contributions! Please see CONTRIBUTING.md for guidelines.\n\n## License\n\nMIT © SVGX Contributors\n\n## CDN\n\n```bash\n\n\n```\n## Basic Usage\n\n## CSS Utility Classes\n\n- **Add classes directly to your SVG elements:**\n\n```bash\n\n```\n","readmeFilename":"README.md"}