{"id":13561911,"url":"https://github.com/timjs/elm-collage","last_synced_at":"2025-10-20T15:36:34.093Z","repository":{"id":48252322,"uuid":"106393782","full_name":"timjs/elm-collage","owner":"timjs","description":"Create interactive vector graphics and position them relative to each other","archived":false,"fork":false,"pushed_at":"2021-08-04T09:11:49.000Z","size":296,"stargazers_count":58,"open_issues_count":26,"forks_count":19,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-04T13:38:12.949Z","etag":null,"topics":["composition","elm","functional-programming","graphics","svg"],"latest_commit_sha":null,"homepage":null,"language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timjs.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":"2017-10-10T09:03:48.000Z","updated_at":"2024-03-26T02:33:30.000Z","dependencies_parsed_at":"2022-08-30T07:51:35.661Z","dependency_job_id":null,"html_url":"https://github.com/timjs/elm-collage","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timjs%2Felm-collage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timjs%2Felm-collage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timjs%2Felm-collage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timjs%2Felm-collage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timjs","download_url":"https://codeload.github.com/timjs/elm-collage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247047113,"owners_count":20874771,"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":["composition","elm","functional-programming","graphics","svg"],"created_at":"2024-08-01T13:01:02.481Z","updated_at":"2025-10-20T15:36:28.811Z","avatar_url":"https://github.com/timjs.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# Welcome to Elm Collage\n\n## Looking for new maintainer!\n\nAs I'm no longer using this library and Elm itself, it is time for Elm Collage to get [some love from somebody else](https://github.com/timjs/elm-collage/issues/40).\nIs there anybody willing to take over, maintain the library and help keeping Elm Collage alive?\nPull requests to update the library are still welcome btw! I won't develop any new features or code myself.\n\n---\n\nWith this library, you can create interactive scalable vector graphics.\nIts interface is based on the classic [Elm Graphics library](http://package.elm-lang.org/packages/evancz/elm-graphics/latest).\nHowever, you'll find that a couple of things are different\nand a lot of functionality has been added.\nYou can find all the details in the [module documentation](https://package.elm-lang.org/packages/timjs/elm-collage/latest/).\n\nThe library consists of four main modules:\n\n1. `Collage`\n2. `Collage.Events`\n3. `Collage.Text`\n4. `Collage.Layout`\n\nIn `Collage` you can find functions to create and style _shapes_ and _paths_.\nAfter turning them into a _collage_ you can shift, scale and rotate them,\ngroup them together with other collages, shift, scale and rotate them again,\nand so on, and so on.\nIncluding images or raw Html also belongs to the possibilities.\n\nUsing `Collage.Events` every part of your collage can be made interactive by sending messages,\nlike you're used to when using `Html` or pure `Svg`.\n\nThe `Collage.Text` module contains functions to make up chunks of text,\nwhich can be rendered inside your collage.\nAnd of course, you can shift, scale, and rotate text as you please,\nafter you turned them into a collage.\nThe module can calculate the width and height your text will occupy on the client's screen.\n\nWith `Collage.Layout` you can position collages relative to each other.\nBy keeping track of the dimensions of each collage,\nthis module can place them next to each other, above each other, align them to the left, to the top, etc.\nIt is based on the excellent [Diagrams library](https://archives.haskell.org/projects.haskell.org/diagrams/)\nby Brent Yorgey.\nThis is similar to the functionality provided by the old `Graphics.Element` module,\nbut more powerful.\n\nAlthough theoretically, there could be multiple backends to render collages,\nfor now, we only provide a Svg backend in `Collage.Render`.\nIt has good performance and excellent hit detection.\n\n\n## Please give me an example!\n\nOk, here is an example of a blue rectangle and on its top left corner a red circle:\n\n```elm\nimport Collage exposing (circle, rectangle, filled, uniform)\nimport Collage.Layout exposing (at, topLeft)\nimport Collage.Render exposing (svg)\nimport Color\n\nmain =\n    let\n        circ =\n            circle 50\n                |\u003e filled (uniform Color.red)\n\n        rect =\n            rectangle 200 100\n                |\u003e filled (uniform Color.blue)\n    in\n    rect\n        |\u003e at topLeft circ\n        |\u003e svg\n```\n\nYou can find more examples in the [examples directory](https://github.com/timjs/elm-collage/tree/master/examples)\nof the repository.\n\n\n## How does this library compare to...?\n\n  - [Elm Graphics](http://package.elm-lang.org/packages/evancz/elm-graphics/1.0.1)\n\n    This was the original Elm drawing library.\n    It is a big inspiration and you'll find a lot of similarities,\n    from the way you draw shapes and paths, to styling them.\n\n    In Elm Collage we do not make the distinction between Forms and Elements,\n    there are just Collages.\n    After Elm's [transition to commands and subscriptions](http://elm-lang.org/blog/farewell-to-frp),\n    Elements could not be interactive anymore.\n    Collages can be made interactive in the same way you are used to with the Elm Html and Svg libraries.\n\n  - [Elm Render](http://package.elm-lang.org/packages/Kwarrtz/render/2.0.0)\n\n    Elm Collage is actually a fork of this excellent work by @Kwarrtz.\n    The module organisation changed a bit,\n    as well as some styling functions,\n    but the code to render Svg is almost untouched.\n    In this reincarnation, you will find new ways to position and align your graphics\n    using the Collage.Layout module.\n\n  - [Elm GraphicSVG](http://package.elm-lang.org/packages/MacCASOutreach/graphicsvg/2.1.0)\n\n    Also an inspiration for this library.\n    However, I think Elm Collage is a bit more structured\n    and provides more guidance by using well-chosen types.\n    You cannot make a rectangle \"italic\" in Elm Collage for example.\n\n  - [Elm Diagrams](http://package.elm-lang.org/packages/vilterp/elm-diagrams/7.2.0)\n\n    @vilterp's Elm port of the great Haskell library with the same name.\n    You can create all sorts of diagrams and position them next to, above, and atop of each other.\n    It used to render using Elm Graphics\n    and implement its own hit detection and mouse interaction.\n\n    Elm Diagrams is not ported to Elm 0.18.\n    In Elm Collage we use the browsers native hit detection when rendering to Svg.\n    Also, we explicitly separate creating and styling forms on one hand,\n    and transforming collages on the other.\n    Although the layout capabilities of Elm Collage are not as extensive as those in Elm Diagrams,\n    I think the Api is a bit simpler.\n\n  - [Haskell Diagrams](https://archives.haskell.org/projects.haskell.org/diagrams/)\n\n    Our big cousin!\n    It is awesome and overly complex.\n    Interaction is [hard](http://www.cmears.id.au/articles/diagrams-gtk-mouse.html) though...\n\n  - [Clean Scalable Graphics](https://dl.acm.org/citation.cfm?id=2746329)\n\n    Our small cousin!\n    First to introduce interaction.\n    Does not have such nice layout combinators as other libraries though...\n\n\n## Have fun!\n\nThis library is under construction.\nPlease fill out issues on GitHub and help to make Elm Collage awesome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimjs%2Felm-collage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimjs%2Felm-collage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimjs%2Felm-collage/lists"}