Skip to content

Latest commit

 

History

History
60 lines (47 loc) · 1.59 KB

README.md

File metadata and controls

60 lines (47 loc) · 1.59 KB
Raw

@hyperapp/svg

Draw SVG with plain functions.

HTML's evil twin. Here's a collection of functions—one for each SVG tag—to help you get started with SVG in Hyperapp.

Want to draw some circles? Try this example in your browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import { app } from "https://unpkg.com/hyperapp"
      import { main } from "https://unpkg.com/@hyperapp/html?module"
      import { svg, use, circle } from "https://unpkg.com/@hyperapp/svg?module"

      app({
        init: {},
        view: () =>
          main([
            svg({ viewBox: "0 0 30 10" }, [
              circle({ id: "symbol", cx: 5, cy: 5, r: 4, stroke: "#0366d6" }),
              use({ href: "#symbol", x: 10, fill: "#0366d6" }),
              use({ href: "#symbol", x: 20, fill: "white" }),
            ]),
          ]),
        node: document.getElementById("app"),
      })
    </script>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>

Installation

npm install @hyperapp/svg

Then with a module bundler like Rollup or Webpack import it in your application and get right down to business.

import { svg, use, circle } from "@hyperapp/svg"

Don't want to set up a build step? Import it in a <script> tag as a module.

<script type="module">
  import { svg, use, circle } from "https://unpkg.com/@hyperapp/svg?module"
</script>

License

MIT