Family tree creator

This family creator allows you to create customized faces and link them together by activating lines, adding and dragging other lines and possibly adding more yourself in post editing. The faces are all in a rather cartoony style, but hopefully it'll help you with stories and other works that require different styles.

Instructions

This tool is pretty easy to use, at least I hope it is. You simply put together your character by clicking on all the different face pieces and the different colors whenever applicable, enter a name, age, a description or any other information you'd like and then click on either 'Add to top', 'Add to second', 'Add to third' or 'Add to bottom' to add your created character to the family tree canvas. The top is for the oldest generation, like the grandparent, and the bottom is for the youngest generation, like the grandchildren.
You can click on the characters in the family tree to select them (border will turn white) and this'll show you the text you may have entered earlier in the main editing section. If you make any changes to this text make sure you click outside of the box after you're done, this'll make sure the changes are saved.
You can now also change the look of your selected character like you did before. But there are more functions.

- Randomize: Click this button and a completely randomized character will pop up. Note that this will also randomize any character you may have selected, so make sure you deselect it first (click it again to turn its border orange again).
- Top, bottom, left, right connection: After you click on the character in the family tree (its border will turn white) you can click on these 4 buttons to enable a corresponding connection. A short orange line will appear and it'll allow you to connect the characters with each other.
Click it again and the line will turn into a dotted line. This is for characters that may be adopted, living together without being married or for any other relationship you want to differentiate from a 'normal' relationship.
Click again and the line will disappear again.
- Delete selected: Not a fan of the character you've selected anymore? Click it to select it (border will turn white), then click 'delete selected' and poof! It's gone.
- Top, mid and bottom connectors: Click on these and a line will be added between the different sections. These lines can be dragged and resized and are meant to be used to connect any potential parents and siblings together. Simply enable the top and bottom connections of the family members, drag the added line to make sure all lines now connect and you're done.
- Clear connectors: Click this to get rid of all the lines you've added previously.
- Toggle resize: Click this to get rid of that pesky resize triangle of the connection lines. Or click it again to bring it back in case you need to make any more changes.
- Save & load buttons: 5 sets of save and load buttons are available to save your family trees. So up to 5 families can be saved and will be available to load again forever. Or at least until you clear your browser cache and only if you didn't use incognito mode to save your family tree in the first place.

Saving the image

If you wish to save the family tree you've created all you have to do is click the 'Turn into image' button and an image will appear below it that looks exactly like what you've created. The only difference being that this is a single image, rather than a whole lot of separate images. Simply right click it, select 'save as' and name it what you wish. That's all there is to it. This only works in modern browsers, so if it's not working for you it could be that you need to update your browser.

Saving locally

It's also possible to save your family tree data locally. Simply click the "Save local" button to have the code create a text file with all the family tree code in it, then click on the download link to download it directly to your computer. Now you can use the "Choose file" field to upload your family tree data and use it in the future. This method makes sure there's no risk of losing all your data in case your browser data is wiped, for example, but it does mean keeping track of your downloaded file.
You may need to add and delete a random person after loading a file in order to be able to move everything again.

Commercial use

You're free to use the finished result in commercial projects, as long as I'm credited for it. The individual images cannot be sold, redistributed or in any other way be used for commercial purposes without my permission.
At the end of the day this site, which I put a lot of time into, is still a means to create an income for myself, so I do have to protect some assets. For more info feel free to contact me.