How to use trianglify - 10 common examples

To help you get started, we’ve selected a few trianglify examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github YogeshPrasanna / expense-manager-react / src / components / App.js View on Github external
render() {
        const bodyStyle = {
            backgroundColor: this.state.settings
                ? this.state.settings.mode === "night"
                    ? "#484842 !important"
                    : "auto"
                : "auto",
            height: "100vh"
        };

        var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
        var pattern = Trianglify({ ...patternconfig });
        var pattern2 = Trianglify({ ...patternconfig });
        var pattern3 = Trianglify({ ...patternconfig });
        var pattern4 = Trianglify({ ...patternconfig });
        var pattern5 = Trianglify({ ...patternconfig });
        var pattern6 = Trianglify({ ...patternconfig });
        var pattern7 = Trianglify({ ...patternconfig });
        var pattern8 = Trianglify({ ...patternconfig });

        const cards = {
            card8: { backgroundImage: `url(${pattern8.png()})` },
            card7: { backgroundImage: `url(${pattern7.png()})` },
            card6: { backgroundImage: `url(${pattern6.png()})` },
            card5: { backgroundImage: `url(${pattern5.png()})` },
            card4: { backgroundImage: `url(${pattern4.png()})` },
            card3: { backgroundImage: `url(${pattern3.png()})` },
            card2: { backgroundImage: `url(${pattern2.png()})` },
            card1: { backgroundImage: `url(${pattern.png()})` }
        };
github YogeshPrasanna / expense-manager-react / src / components / App.js View on Github external
? this.state.settings.mode === "night"
                    ? "#484842 !important"
                    : "auto"
                : "auto",
            height: "100vh"
        };

        var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
        var pattern = Trianglify({ ...patternconfig });
        var pattern2 = Trianglify({ ...patternconfig });
        var pattern3 = Trianglify({ ...patternconfig });
        var pattern4 = Trianglify({ ...patternconfig });
        var pattern5 = Trianglify({ ...patternconfig });
        var pattern6 = Trianglify({ ...patternconfig });
        var pattern7 = Trianglify({ ...patternconfig });
        var pattern8 = Trianglify({ ...patternconfig });

        const cards = {
            card8: { backgroundImage: `url(${pattern8.png()})` },
            card7: { backgroundImage: `url(${pattern7.png()})` },
            card6: { backgroundImage: `url(${pattern6.png()})` },
            card5: { backgroundImage: `url(${pattern5.png()})` },
            card4: { backgroundImage: `url(${pattern4.png()})` },
            card3: { backgroundImage: `url(${pattern3.png()})` },
            card2: { backgroundImage: `url(${pattern2.png()})` },
            card1: { backgroundImage: `url(${pattern.png()})` }
        };

        return (
            
                <div style="{bodyStyle}">
                    </div>
github YogeshPrasanna / expense-manager-react / src / components / App.js View on Github external
render() {
        const bodyStyle = {
            backgroundColor: this.state.settings
                ? this.state.settings.mode === "night"
                    ? "#484842 !important"
                    : "auto"
                : "auto",
            height: "100vh"
        };

        var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
        var pattern = Trianglify({ ...patternconfig });
        var pattern2 = Trianglify({ ...patternconfig });
        var pattern3 = Trianglify({ ...patternconfig });
        var pattern4 = Trianglify({ ...patternconfig });
        var pattern5 = Trianglify({ ...patternconfig });
        var pattern6 = Trianglify({ ...patternconfig });
        var pattern7 = Trianglify({ ...patternconfig });
        var pattern8 = Trianglify({ ...patternconfig });

        const cards = {
            card8: { backgroundImage: `url(${pattern8.png()})` },
            card7: { backgroundImage: `url(${pattern7.png()})` },
            card6: { backgroundImage: `url(${pattern6.png()})` },
            card5: { backgroundImage: `url(${pattern5.png()})` },
            card4: { backgroundImage: `url(${pattern4.png()})` },
            card3: { backgroundImage: `url(${pattern3.png()})` },
            card2: { backgroundImage: `url(${pattern2.png()})` },
github YogeshPrasanna / expense-manager-react / src / components / App.js View on Github external
const bodyStyle = {
            backgroundColor: this.state.settings
                ? this.state.settings.mode === "night"
                    ? "#484842 !important"
                    : "auto"
                : "auto",
            height: "100vh"
        };

        var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
        var pattern = Trianglify({ ...patternconfig });
        var pattern2 = Trianglify({ ...patternconfig });
        var pattern3 = Trianglify({ ...patternconfig });
        var pattern4 = Trianglify({ ...patternconfig });
        var pattern5 = Trianglify({ ...patternconfig });
        var pattern6 = Trianglify({ ...patternconfig });
        var pattern7 = Trianglify({ ...patternconfig });
        var pattern8 = Trianglify({ ...patternconfig });

        const cards = {
            card8: { backgroundImage: `url(${pattern8.png()})` },
            card7: { backgroundImage: `url(${pattern7.png()})` },
            card6: { backgroundImage: `url(${pattern6.png()})` },
            card5: { backgroundImage: `url(${pattern5.png()})` },
            card4: { backgroundImage: `url(${pattern4.png()})` },
            card3: { backgroundImage: `url(${pattern3.png()})` },
            card2: { backgroundImage: `url(${pattern2.png()})` },
            card1: { backgroundImage: `url(${pattern.png()})` }
        };

        return (
github qrohlf / trianglify / js / components / ColorBrewerDemo.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
  }
github nus-mtp / cubist / src / webapp / components / _containers / HomeContainer.js View on Github external
class HomeContainer extends PureComponent {
  static fetchData({ dispatch }) {
    return Promise.all([
      dispatch(ModelActions.getTopModels()),
      dispatch(ModelActions.getLatestModels())
    ]);
  }

  static propTypes = {
    latestModels: React.PropTypes.instanceOf(Immutable.List),
    topModels: React.PropTypes.instanceOf(Immutable.List)
  };

  state = {
    ...Trianglify.defaults,
    width: process.env.BROWSER ? window.innerWidth : DEFAULT_WIDTH,
    height: process.env.BROWSER ? window.innerHeight : DEFAULT_HEIGHT,
    x_colors: 'YlGnBu',
    cell_size: 40,
    resize_timer: null,
    variance: 0.75,
    seed: Math.random()
  };

  componentDidMount() {
    window.addEventListener('resize', this._onDebounceResize);
    window.addEventListener('orientationchange', this._onDebounceResize);
    this.setState({
      // Provide some offset height at initial load
      height: ReactDOM.findDOMNode(this.refs.hero).offsetHeight + 25
    });
github qrohlf / trianglify / js / components / TrianglifyOptionDemo.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
    this.state.width = 700;
    this.state.x_colors = 'random';
    this.state.seed = Math.random().toString(36).substr(2, 5);
    if(props.demo === 'palette') {
      this.state.palette = [
  ['#468966', '#FFF0A5', '#FFB03B', '#B64926', '#8E2800'],
  ['#96CA2D', '#B5E655', '#EDF7F2', '#4BB5C1', '#7FC6BC'],
  ['#EA6045', '#F8CA4D', '#F5E5C0', '#3F5666', '#2F3440']];
    }
    if(props.demo === 'color_function') {
      this.state.color_function = function(x, y) {
        return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';
      }
    }
  }
github qrohlf / trianglify / js / components / Hero.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
    this.state.height = window.innerHeight;
    this.state.width = window.innerWidth;
    this.state.x_colors = 'RdBu';
    this.state.cell_size = 40;
    this.state.resize_timer = null;
    this.state.seed = Math.random();
  }
github fdaciuk / react-trianglify / src / index.js View on Github external
generatePattern ({ output, ...props }) {
    const pattern = trianglify(props)
    const outputMethod = pattern[output]

    this[this.outputTypes(output).method](outputMethod)
  }
github nus-mtp / cubist / src / webapp / components / common / TrianglifyCanvas.js View on Github external
_renderCanvas() {
    const canvas = ReactDOM.findDOMNode(this);
    Trianglify(this.props).canvas(canvas);
  }
}

trianglify

Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.

GPL-3.0
Latest version published 4 years ago

Package Health Score

50 / 100
Full package analysis

Popular trianglify functions