Behind the Scene

Caution! This article should be treat like Lorem Ipsum. AKA, random text which is not meaningful. If anyone consider this section as true story, implementation, then good luck.

History

Business Card - is about truth, faith, credit, sincerity and art. From the beginning of 20th century, people already used these piece of paper to communicate with other. There's no world wide web, nor news on TV, the information exchange become more important. Therefore, business card exist.

Todays, from the culture of Japan, Taiwan still use a lot of business card during work. Most of the time it's in 90㎜ × 54㎜, and there should be printed double side. One for logo of company and one for details information. The following items usually consider as important part to show on card:

• Name
• Position
• Company Name
• Company Address
• Telephone Number
• Fax Number (legacy)
• Email
• Mobile Number

There might be an id number of company as well in Taiwan for convenience.

Create Your Card using This Page

Here, this site is not made for someone who want to customize his own business card. But only for show-off the html + css ability toward design flow. This page include following technology/method:

• HTML
• SVG
• CSS
• Canvas
• Dom to Image
• React
• Material UI
• Model Viewer
• Blender
• Gatsby

You can play around of the controller, and off course 3d viewer. Since safari and firefox won't support extra SVG rendering ability. You should use Chrome browser in desktop if there is any layout rendering problem in the image data.

Detail Information

Image Data

An Image Data is the rendered canvas(pixels) from the card example DOM object. With the provided image size, the image resolution can be higher than screen(usually 72ppi). You can download the image by right click on preview window, and select save image.

Currently only export PNG.

3D Model Preview

The former data is applied to the card texture. Which is an PBR material. It's fine, you don't know PBR and texture and material and how does Bitcoin so expensive. The only thing you need to know is, that, in rasterization system, texture size must be the exponential of 2. eg. 1024 x 1024, 2048 x 2048. It's for mapping.

Our card by default will use a 1024 x 614 texture, which violate the rule. In one of the workflow, texture was resize to 1024 x 512 by model-view. So we don't need to care about the size, but I do recommend to create size to 2048 for better model detail.

---

This Website is only for fun. Do not use for illegal behavior.