Skip to content
🎨 simple "paper.js" pattern generator
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
LICENSE
README.md
index.html

README.md

Memphis-Pattern-Generator

Simple "Paper.js" pattern generator Try It!

screen

Motivation

After working on a project which required patterns in the style of those created by the Memphis Group, I thougth it would be an interesting challenge to come up with a randomizer for those graphics. I chose "paper.js" and wrote a minimal page with two buttons. One is for a random pattern which you can download as an SVG by clicking the other. Value Sliders might be included when I find some time.

Manipulate Variables

At the moment, this generator does not have any user input options except manipulating the source. Sliders might be implemented in the Future. Until then this is what you can change:

Size

const size = 15;

Colors

const red = '#f44e45';
const blue = '#4f4faf';
const yellow = '#f4d65b';
const green = '#afe8b4';
const coral = '#ffe8bb';
const strokecolor = '#000';

Grid Spacings

const randommin = 30;
const randommax = 80;

var xspacing = 170;
var yspacing = 170;
  • Randommin/max defines the lower and upper limits for the randomizer.
  • x/yspacing defines the spacing between grid points on each axis.

Authors

This Generator was written by Leo Mühlfeld. It uses Paper.js and was inspired by the awesome work of the Memphis Group.

You can’t perform that action at this time.