https://github.com/tombarr/react-metaballs

Data-driven React component rendering and animating metaballs as scalable SVG elements
https://github.com/tombarr/react-metaballs

d3 d3js javascript react reactjs svg

Last synced: about 2 months ago
JSON representation

Data-driven React component rendering and animating metaballs as scalable SVG elements

• Host: GitHub
• URL: https://github.com/tombarr/react-metaballs
• Owner: Tombarr
• License: apache-2.0
• Created: 2018-07-31T01:43:44.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-11-25T18:28:23.000Z (over 5 years ago)
• Last Synced: 2025-03-18T13:09:48.263Z (about 2 months ago)
• Topics: d3, d3js, javascript, react, reactjs, svg
• Language: HTML
• Homepage: https://tombarr.github.io/react-metaballs/
• Size: 2.53 MB
• Stars: 22
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Metaballs

Data-driven React component rendering SVG metaballs, animated using d3.  

[![NPM](https://img.shields.io/npm/v/react-metaballs.svg)](https://www.npmjs.com/package/react-metaballs) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Example

See a [demo here](https://tombarr.github.io/react-metaballs/index.html)

![metaball anim](./metaball_animation.gif)

## Install

```bash

npm install --save react-metaballs

```

## Usage

```jsx

import React, { Component } from 'react'

import ReactMetaballs from 'react-metaballs'

const circles = [

  {

    cx: 200,

    cy: 100,

    r: 64

  },

  {

    cx: 300,

    cy: 300,

    r: 96

  },

  {

    cx: 250,

    cy: 475,

    r: 56

  },

  {

    cx: 350,

    cy: 675,

    r: 128

  },

  {

    cx: 600,

    cy: 800,

    r: 76

  }

]

class Example extends Component {

  render () {

    return (

      

    )

  }

}

```

## Compatibility

Tested on modern browsers and IE 11.

![metaball IE](./metaball_ie.gif)

## Performance

Basic testing shows the SVG path animation is able to comfortably perform at or above 60fps.

![metaball performance](./performance_screenshot.png)

## License

MIT © [Tombarr](https://github.com/Tombarr)