[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70885":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},70885,"rough","rough-stuff\u002Frough","rough-stuff","Create graphics with a hand-drawn, sketchy, appearance","http:\u002F\u002Froughjs.com",null,"HTML",20999,658,161,36,0,11,19,48,33,43.46,"MIT License",false,"master",true,[27,28,29,30,31,32],"canvas","draw","graphics","html5-canvas","svg","svg-path","2026-06-12 02:02:44","# Rough.js\n\n\u003Cb>Rough.js\u003C\u002Fb> is a small (\\\u003C9 kB) graphics library that lets you draw in a _sketchy_, _hand-drawn-like_, style.\nThe library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing [SVG paths](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG\u002FTutorial\u002FPaths).\n\nRough.js works with both [Canvas](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvas_API) and [SVG](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG).\n\n![Rough.js sample](https:\u002F\u002Froughjs.com\u002Fimages\u002Fcap_demo.png)\n\n[@RoughLib](https:\u002F\u002Ftwitter.com\u002FRoughLib) on Twitter.\n\n## Install\n\nfrom npm:\n\n```\nnpm install --save roughjs\n```\n\nOr get the latest using unpkg: https:\u002F\u002Funpkg.com\u002Froughjs@latest\u002Fbundled\u002Frough.js\n\n\nIf you are looking for bundled version in different formats, the npm package will have these in the following locations:\n\nCommonJS: `roughjs\u002Fbundled\u002Frough.cjs.js`\n\nESM: `roughjs\u002Fbundled\u002Frough.esm.js`\n\nBrowser IIFE: `roughjs\u002Fbundled\u002Frough.js`\n\n\n## Usage\n\n![Rough.js rectangle](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm1.png)\n\n```js\nconst rc = rough.canvas(document.getElementById('canvas'));\nrc.rectangle(10, 10, 200, 200); \u002F\u002F x, y, width, height\n```\n\nor SVG\n\n```js\nconst rc = rough.svg(svg);\nlet node = rc.rectangle(10, 10, 200, 200); \u002F\u002F x, y, width, height\nsvg.appendChild(node);\n```\n\n### Lines and Ellipses\n\n![Rough.js rectangle](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm2.png)\n\n```js\nrc.circle(80, 120, 50); \u002F\u002F centerX, centerY, diameter\nrc.ellipse(300, 100, 150, 80); \u002F\u002F centerX, centerY, width, height\nrc.line(80, 120, 300, 100); \u002F\u002F x1, y1, x2, y2\n```\n\n### Filling\n\n![Rough.js rectangle](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm3.png)\n\n```js\nrc.circle(50, 50, 80, { fill: 'red' }); \u002F\u002F fill with red hachure\nrc.rectangle(120, 15, 80, 80, { fill: 'red' });\nrc.circle(50, 150, 80, {\n  fill: \"rgb(10,150,10)\",\n  fillWeight: 3 \u002F\u002F thicker lines for hachure\n});\nrc.rectangle(220, 15, 80, 80, {\n  fill: 'red',\n  hachureAngle: 60, \u002F\u002F angle of hachure,\n  hachureGap: 8\n});\nrc.rectangle(120, 105, 80, 80, {\n  fill: 'rgba(255,0,200,0.2)',\n  fillStyle: 'solid' \u002F\u002F solid fill\n});\n```\n\nFill styles can be: **hachure**(default), **solid**, **zigzag**, **cross-hatch**, **dots**, **dashed**, or **zigzag-line**\n\n![Rough.js fill examples](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm14.png)\n\n### Sketching style\n\n![Rough.js rectangle](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm4.png)\n\n```js\nrc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });\nrc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });\nrc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });\n```\n\n### SVG Paths\n\n![Rough.js paths](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm5.png)\n\n```js\nrc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });\nrc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });\nrc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });\nrc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });\n```\n\nSVG Path with simplification:\n\n![Rough.js texas map](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm9.png) ![Rough.js texas map](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm10.png)\n\n## Examples\n\n![Rough.js US map](https:\u002F\u002Froughjs.com\u002Fimages\u002Fm6.png)\n\n[View examples here](https:\u002F\u002Fgithub.com\u002Fpshihn\u002Frough\u002Fwiki\u002FExamples)\n\n## API & Documentation\n\n[Full Rough.js API](https:\u002F\u002Fgithub.com\u002Fpshihn\u002Frough\u002Fwiki)\n\n## Credits\n\nSome of the core algorithms were adapted from [handy](https:\u002F\u002Fwww.gicentre.net\u002Fsoftware\u002F#\u002Fhandy\u002F) processing lib.\n\nAlgorithm to convert SVG arcs to Canvas [described here](https:\u002F\u002Fwww.w3.org\u002FTR\u002FSVG\u002Fimplnote.html) was adapted from [Mozilla codebase](https:\u002F\u002Fhg.mozilla.org\u002Fmozilla-central\u002Ffile\u002F17156fbebbc8\u002Fcontent\u002Fsvg\u002Fcontent\u002Fsrc\u002FnsSVGPathDataParser.cpp#l887)\n\n## Contributors\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https:\u002F\u002Fopencollective.com\u002Frough\u002Fcontribute)]\n\n#### Individuals\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Findividuals.svg?width=890\">\u003C\u002Fa>\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https:\u002F\u002Fopencollective.com\u002Frough\u002Fcontribute)]\n\n\u003Ca href=\"https:\u002F\u002Fexcalidraw.com\u002F\">\u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F59452120?s=64&v=4\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.diagrams.net\u002F\">\u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1769238?s=64&v=4\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fterrastruct.com\u002F\">\u003Cimg width=\"64\" height=\"64\" src=\"https:\u002F\u002Froughjs.com\u002Fimages\u002Fsponsors\u002Fterrastruct.png\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F0\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F1\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F2\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F3\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F4\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F5\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F6\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F7\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F8\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F9\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\n## License\n[MIT License](https:\u002F\u002Fgithub.com\u002Fpshihn\u002Frough\u002Fblob\u002Fmaster\u002FLICENSE) (c) [Preet Shihn](https:\u002F\u002Ftwitter.com\u002Fpreetster)\n","Rough.js 是一个轻量级（小于9KB）的图形库，能够以手绘风格绘制图形。它支持绘制线条、曲线、弧线、多边形、圆形和椭圆等基本图形，并且可以处理SVG路径。该库兼容Canvas和SVG两种渲染方式，允许开发者通过简单的API调用来创建具有独特视觉效果的手绘风格图形。此外，Rough.js提供了丰富的自定义选项，如填充样式、线条粗细及不规则程度调整等，使得生成的图像更加生动自然。此工具非常适合用于需要增添个性化或创意元素的设计项目中，比如网站插图、教育软件界面或是任何希望采用非正式、友好外观的应用场景。",2,"2026-06-11 03:34:44","high_star"]