Copy and Paste

Download

Local storage on your browser

Cloud storage

Copy and Paste

Upload file

Background

• http://www.1kfa.com/table/svg/bg_topography.svg
• http://www.1kfa.com/table/svg/bg_hexagons.svg
• http://www.1kfa.com/table/svg/bg_clouds.svg
• http://www.1kfa.com/table/svg/bg_graphpaper.svg
• http://www.1kfa.com/table/svg/bg_winter_sun.svg
• http://www.1kfa.com/table/svg/bg_wiggle.svg

Size

Examples:

Try pasting this into the box:

<svg xmlns="http://www.w3.org/2000/svg"
  x="0" y="0" width="100" height="100">
  <rect x="25" y="25" width="50" height="50" style="fill:#ff0000" />
  <script
    type="text/javascript"
    data-namespace="myThing"
  ><![CDATA[

myThing = {

  menu: {
    'Change Color': {
      eventName: 'changeMyColor',
      applicable: (elem) => { return true },
      uiLabel: (elem) => { return 'Change Color To Green' },
      handler: function(evt) {
        // Note - "handler" must be written as a traditional function,
        // not an arrow-function, so that "this" is bound correctly
        // console.log('Changing color!')
        this.querySelector('rect').style['fill'] = '#00ff00'
      },
    },
  },

}

]]></script>
</svg>
  

Drawing

SVG File

Rectangle

Circle

Text

Image

Dynamic Tray

Dynamic Trays will automatically do calculations based on the dice (or other objects like text) placed inside them

Mats

Mats go beneath other objects and have snap-to behaviour

Decks

Single poker card

Solid color

Image token

Front	Back

Custom SVG

Examples:

Try pasting these into the box:

Try this for the front / back in order to create a "poker chip" token that will interact with Dynamic Tray to do things like quickly calculate their sum.
<circle r="36" cy="45" cx="40" fill="black" /> <text x="24" y="65" fill="white" style="font-size:60px"> <tspan>5</tspan> </text>	<circle r="36" cy="45" cx="40" fill="white" /> <text x="24" y="65" fill="black" style="font-size:60px"> <tspan>5</tspan> </text>
Standee-style tokens can be made with the HeroForge customization tool or with OpenPeeps (which is nicer because it lets you just copy the URL)
<image href="img/standee_hero_front.png" width="80" height="100" />	<image href="https://blush.design/api/download?shareUri=zesJJD5hU&s=0%7ED08B5B&w=400&h=400&fm=png" width="80" height="100" />

Activity Log

Controls

There are also keyboard shortcuts for most actions. You can type r to roll all the dice you have selected.

To remove cards from a deck, double-click on the deck so that you see the dashed border. The same technique works to remove objects from Dynamic Trays.

Some objects, like Dynamic Trays, can be resized. To resize, double-click an object, then drag the gray square handle in the lower corner.

To select multiple dice, hold Shift and click on each one. Otherwise, you can drag a selection box that covers all the objects you're targeting.

To zoom in/out, hold Ctrl and roll your mouse wheel.

Give some recognition

Contribute to the codebase

Donate