JSFiddle - React, Tailwind, and code Playground

by khanfused

HTML

<script src="https://rawgit.com/khanfusiion3/ArtJS/master/art.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

var world = Art().utility.resize({
    width: window.innerWidth,
    height: window.innerHeight
  }).utility.style({
    backgroundColor: '#171717' // dark gray
  }),

  scale = function(n) {
    return n * window.innerWidth / 600;
  },

  zero = world.display.group({
    x: world.canvas.width / 2 - scale(80),
    y: world.canvas.height / 2,
    fill: '#DC322F', // red
    stroke: '#A42222', // dark red
    restitution: -0.2, // bounciness
    children: [
      // 'super' refers to the parent's value
      world.display.rectangle({
        x: scale(-50),
        y: 0,
        width: scale(20),
        height: scale(97),
        mass: 40,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: scale(50),
        y: 0,
        width: scale(20),
        height: scale(97),
        mass: 40,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: 0,
        y: scale(75),
        width: scale(48),
        height: scale(20),
        mass: 20,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: -scale(35),
        y: scale(60),
        rotation: Math.PI / 4,
        width: scale(50),
        height: scale(20),
        mass: 40,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: scale(35),
        y: scale(60),
        rotation: -Math.PI / 4,
        width: scale(50),
        height: scale(20),
        mass: 40,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: 0,
        y: scale(-75),
        width: scale(48),
        height: scale(20),
        mass: 40,
        fill: 'super',
        stroke: 'super'
      }),
      world.display.rectangle({
        x: -scale(35),
        y: -scale(60),
        rotation: -Math.PI / 4,
        width: scale(50),
        height: scale(20),
        mass: 40,
        fill: 'super',
        stroke: 'super'
     ...