@font-face { font-family: SubotypeSteady; src: url("subotype_steady.otf") format("opentype"); }
What is an SVG? Fundamentally, an SVG is just a simple text file that tells the computer how to draw an image using shapes, the same way HTML is just a text file that tells the computer how to render a web page. Find out more here.
You can create your drawings with Free programs like Inkscape or websites like SVGEdit
Note: Some great SVG files can be found at game-icons.net and Noun Project.
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>
|
|
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" /> |
If you enjoy this tool, you can spread the love:
To remove cards from a deck, double-click on the deck.
To remove objects from a Dynamic Tray, double-click it.
To resize a Dynamic Tray, double-click it, then drag the gray square handle in the lower corner.
To select multiple dice, hold Shift and click on each one.
To zoom in/out, hold Ctrl and roll your mouse wheel.
If you've got a Github account, you can "star" this project or report an issue
Share URL: |