{"id":20887997,"url":"https://github.com/canop/hu.js","last_synced_at":"2025-04-07T17:11:39.652Z","repository":{"id":18509029,"uuid":"21705613","full_name":"Canop/hu.js","owner":"Canop","description":"A very light JavaScript library for SVG","archived":false,"fork":false,"pushed_at":"2025-03-11T13:51:15.000Z","size":51,"stargazers_count":77,"open_issues_count":0,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-31T15:19:17.106Z","etag":null,"topics":["javascript","svg"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Canop.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-10T18:31:41.000Z","updated_at":"2025-03-11T13:51:19.000Z","dependencies_parsed_at":"2025-02-07T20:00:33.996Z","dependency_job_id":null,"html_url":"https://github.com/Canop/hu.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Canop%2Fhu.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Canop%2Fhu.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Canop%2Fhu.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Canop%2Fhu.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Canop","download_url":"https://codeload.github.com/Canop/hu.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694877,"owners_count":20980733,"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","svg"],"created_at":"2024-11-18T08:23:43.655Z","updated_at":"2025-04-07T17:11:39.628Z","avatar_url":"https://github.com/Canop.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Why hu.js\n\n[![Chat on Miaou](https://miaou.dystroy.org/static/shields/room-en.svg?v=1)](https://miaou.dystroy.org/8?Javascript)\n[![Chat on Miaou](https://miaou.dystroy.org/static/shields/room-fr.svg?v=1)](https://miaou.dystroy.org/3?Code_Croissants)\n\nThe general awkwardness of DOM functions is even worse for SVG than for HTML.\n\nYou don't want to create an element with:\n\n    const rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n\nYou'd rather have concise, chainable and convenient functions not too inspired by Java, and to have internal references to gradients managed for you. Of course you want the few traps and browser differences handled for you.\n\nAnd that might be about all you need. Because SVG is already a very high level model, you don't usually need a higher model to draw shapes in your browser. You don't need functions hiding the logic of the SVG.\n\nAnd you don't want to import a big JavaScript file for that. [hu.min.js](hu.min.js) weights 1.4 kb when gziped and has no dependency.\n\nThat's why you might find hu.js useful, assuming its limited set of features isn't too limited for you.\n\n# Basic Example\n\n    // Add to the body a new SVG element\n    const svg = hu('\u003csvg\u003e', 'body').css({ width:100, height:100 });\n\n    // Define a reusable radial gradient\n    const grad = svg.rgrad(0.3, 0.3, 0.8, 'yellow', 'green');\n\n    // Draw a circle using this gradient\n    hu('\u003ccircle\u003e', svg).attr({ cx:50, cy:50, r:50, fill:grad });\n\n### Result :\n\n\u003cimg src=\"./demo.svg\" width=\"100\" height=\"100\" alt=\"Result of the demo, a green ball with yellow sheen\" /\u003e\n\n### SVG :\n\n    \u003csvg style=\"width: 100px; height: 100px;\"\u003e\n    \t\u003cdefs\u003e\n    \t\t\u003cradialGradient id=\"ù1\" cx=\"0.3\" cy=\"0.3\" r=\"0.8\"\u003e\n    \t\t\t\u003cstop offset=\"0%\" stop-color=\"yellow\"\u003e\u003c/stop\u003e\n    \t\t\t\u003cstop offset=\"100%\" stop-color=\"green\"\u003e\u003c/stop\u003e\n    \t\t\u003c/radialGradient\u003e\n    \t\u003c/defs\u003e\n    \t\u003ccircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"url(#ù1)\"\u003e\u003c/circle\u003e\n    \u003c/svg\u003e\n\n# More complex examples\n\nThis still simple example has more shapes, event handling and animations :\n\n**[Demonstration](http://dystroy.org/demos/hu.js/demo.html)**\n\nSee the commented source of the page to see how it's done.\n\nhu.js is used for everything svg related in the open source [Miaou](http://dystroy.org/miaou/static/intro.html) platform, including a game.\n\n# API\n\n## hu\n\nThe entry point of the library is the `hu` function. It's also aliased as `ù` which is obviously shorter and prettier but there's no problem in using `hu` if you're in a poor country where keyboards suffer from a deficiency in `ù` keys.\n\nThis function is used to\n\n- create an svg element (and optionally append it to an existing html or svg element)\n- find an existing svg element with a css selector\n- wrap a provided svg element (and optionally append it to an existing html or svg element)\n\nIn all cases, there's always exactly one svg element in a resulting `Hu` object. The `hu` function returns `null` if the passed arguments make it impossible to create the element. If a provided selector (or nodelist, or jquery set, or array of elements) refers to more than one element, only the first one is considered.\n\n#### Examples\n\nCreate an `svg` element and add it to `document.body`:\n\n    const svg = hu('\u003csvg\u003e', document.body);\n\nJust create an element that we'll append later:\n\n    const group = hu('\u003cg\u003e');\n\nGet an element we have in our group:\n\n    const rect = hu('#rectId', group);\n\nCreate an image and add it to the svg document:\n\n    hu('\u003cimage\u003e', svg).attr({\n        \"xlink:href\": \"some/image.png\",\n        x: 50, y: 50, width: 200, height: 200\n    });\n\n## attr / css\n\nThese very similar functions let you set attributes or style properties.\n\n#### Examples\n\nGet the value of an attribute\n\n    const cx = circle.attr('cx');\n\nSet a style property\n\n    svg.css('background', '#2a4646');\n\nCreate a `line`, append it to a group and set a few attributes\n\n    hu('\u003cline\u003e', group).attr({\n    \tx1:10, y1:20, x2:30, y2:40,\n    \tstroke:'green', strokeOpacity:0.6,\n    \tstrokeWidth:5, strokeLinecap:'round'\n    });\n\n## def\n\n`def` creates an SVG node, adds it to the `defs` element of the closest element of type `svg`, and gives it an automatically generated id.\n\nThis is useful for shared resources like gradients.\n\n#### Examples\n\nCreate a diagonal linear gradient with four steps of decreasing opacity, use it in a rectangle\n\n    const grad = svg.def('\u003clinearGradient\u003e').attr({\n    \tx1:0, y1:0, x2:1, y2:1\n    }).stops(\n    \t{offset:\"0%\", stopColor:\"red\", stopOpacity:1},\n    \t{offset:\"7%\", stopColor:\"green\", stopOpacity:0.9},\n    \t{offset:\"20%\", stopColor:\"red\", stopOpacity:0.2},\n    \t{offset:\"100%\", stopColor:\"green\", stopOpacity:0}\n    );\n    ù('\u003crect\u003e', svg).attr({x:0, y:0, width:100, height:20, fill:grad});\n\n#### Using your own manual id instead of the automatically generated one\n\n    const logo = svg.def('\u003cg\u003e').attr('id','logo');\n\n## rgrad\n\n`rgrad` is a shortcut to create a simple radial gradient.\n\n#### Example\n\n    const grad = svg.rgrad(0.3, 0.3, 0.8, 'white', 'rgba(100,50,57,0.2)');\n\n_Note : similar hgrad and vgrad functions might be available in the future as shortcuts for horizontal and vertical gradients. Just ask if you want them now._\n\n## animate\n\nAnimates one or more numerical style properties or attributes.\n\n#### Example\n\n    ù('\u003cline\u003e', svg).attr({\n    \tx1:100, y1:0, x2:200, y2:20,\n    \tstroke:'red', strokeOpacity:0.8,\n    }).animate({strokeOpacity:0, x2:300}, 1000, function(){\n    \tthis.remove();\n    });\n\nThis example can also be simplified into\n\n    ù('\u003cline\u003e', svg).attr({\n    \tx1:100, y1:0, x2:200, y2:20,\n    \tstroke:'red', strokeOpacity:0.8,\n    }).animate({strokeOpacity:0, x2:300}, 1000, ù.remove);\n\n## on / off\n\nThose functions bind or unbind an event handler. You can pass several event types by separating them with spaces.\n\n#### Example\n\n    hu('\u003crect\u003e', svg)\n    .attr({x:0, y:100, width:200, height:300})\n    .css({cursor:'pointer'})\n    .on('click', function(){\n    \thu(this).animate({x:100}, 500);\n    });\n\n## append / prependTo\n\nThese functions let you append or prepend elements. The argument can be an svg node, a hu element, a css selector, an HTMLCollection, a jQuery element, etc.\n\n## remove\n\nRemoves the element on which it is called.\n\n## empty\n\nRemoves the svg nodes. (not the defs: to remove everything, just call the standard DOM functions)\n\n## text\n\nSets the innerText of the svg element.\n\n#### Example\n\n    ù('\u003ctext\u003e', g)\n    .attr({x:50, y:50, textAnchor:\"middle\", alignmentBaseline:\"middle\"})\n    .css({fontWeight:'bold', fill:'white'})\n    .text('I am a centered white text');\n\n# Extension\n\nYou can easily add functions to hu elements.\n\n## Example\n\n    ù.fn.textpos = function(x, y){\n    \treturn this.attr({x:x, y:y, textAnchor:\"middle\", alignmentBaseline:\"middle\"});\n    }\n    ù('\u003ctext\u003e', svg).text(\"my centered label\").textpos(50, 50);\n\n# License\n\nThe [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanop%2Fhu.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanop%2Fhu.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanop%2Fhu.js/lists"}