https://github.com/flosse/react-vm-flower

React.js component to render a VM flower with SVG
https://github.com/flosse/react-vm-flower

kartevonmorgen svg

Last synced: about 1 month ago
JSON representation

React.js component to render a VM flower with SVG

• Host: GitHub
• URL: https://github.com/flosse/react-vm-flower
• Owner: flosse
• Created: 2015-04-20T16:02:32.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-10-19T09:52:51.000Z (over 6 years ago)
• Last Synced: 2024-10-05T04:41:06.971Z (4 months ago)
• Topics: kartevonmorgen, svg
• Language: CoffeeScript
• Size: 27.3 KB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React VM flower component

[![Build Status](https://secure.travis-ci.org/flosse/react-vm-flower.svg?branch=master)](http://travis-ci.org/flosse/react-vm-flower)

[![Dependency Status](https://gemnasium.com/flosse/react-vm-flower.svg)](https://gemnasium.com/flosse/react-vm-flower)

[![NPM version](https://badge.fury.io/js/react-vm-flower.svg)](http://badge.fury.io/js/react-vm-flower)

[![License](https://img.shields.io/npm/l/react-vm-flower.svg)](https://github.com/flosse/react-vm-flower/blob/master/LICENCE.txt)

![flower](https://raw.githubusercontent.com/flosse/react-vm-flower/master/examples/myFlower.png)

## Usage

```

npm i react-vm-flower

```

```js

var React   = require("react");

var Flower  = require("react-vm-flower");

var radius  = 100;

var myFlower = svg(

  {

    viewBox: "0 0 " + 2 * radius + " " + 2 * radius,

    width: "200px"

  },

  g({

      transform: "translate(" + radius + "," + radius + ")"

    },

    React.createElement(Flower, {

      scales: [0.3, 0.7, 0.6, 0.9, 0.7, 0.7],

      colors: ["blue", "f00", "rgba(0,255,0,0.3)"]

      size: 2 * radius

    })

  )

);

React.render(myFlower, document.querySelector('body'));

```

## Run tests

    npm t

## License

This project is licensed under the GPLv3 license.