EloShapes hosts a growing database of gaming mice. The process of finding information about mice, especially creating accurate outlines of their shapes, is time-consuming and there are always more mice that could be added. This is why EloShapes needs help from the community. By adding new shapes, you can contribute to this website and help build its database.
Only the brand and model is strictly required as we want to include mice that might not have all information available to the user, such as what sensor is being used. Some mice might also have been recently announced and do not have accurate dimensions or good image references to create outlines. These are things that should be updated in the future once more information is revealed.
While basic information about a mouses brand, model and specifications might be easier to find, outlines are a bit more challenging to add. Therefore, I have made a tutorial on how to create them.
Brand: the producer or the company which sells the mouse.
Model: name of a specific mouse from a brand.
Length: measured in millimeters from the base, to the very tip:
Width: measured in millimeters between the two widest points:
Height: measured in millimeters from the bottom, to the top:
Weight: measured in grams, preferably without the cable (if wired).
Shape: points to whether a mouse is symmetrical(left) or ergonomic(right):
Connectivity: refers to whether a mouse is wired or wireless. Many wireless mice are also able to connect through a wire, but are still considered wireless.
Sensor: specifies the sensor-version that is used in a mouse.
Learn more about mouse sensors here.
DPI: the maximum Dots Per Inch (DPI) available for a mouse. DPI is used to measure the amount of pixels/dots the cursor travels on screen per inch the mouse is moved. Most mice are able to change their DPI in increments up to its maximum.
Learn more about DPI here.
Polling rate: the maximum amount of times a mouse can send information per second. Similar to DPI, the polling rate is often changeable, though usually only a few presets are available.
Learn more about polling rate here.
Before adding mice, read about the specifications and how dimensions are measured. (see the "Specifications" dropdown above)
EloShapes have no affiliation with any brands, products, tools or websites used in this tutorial. The process and tools for creating outlines are free.
Step 1: Find mouse specifications and dimensions
Find a mouse you wish to add to the database. In this tutorial, the HyperX Pulsefire Haste will be used as an example.
Look up its specifications and enter them into the form after pressing the "Add Mouse" button below.
Step 2: Find images that will be used for outlines
Top images are usually quite easy to find and are often displayed on the producers' or resellers website. Side images tend to be available too. If they are not, you might be able to find images from other sources, often by searching "HyperX Pulsefire Haste side" in this case. Back images are quite a bit harder, either because there are none, or because the images are not accurate and therefore cannot be used to create outlines.
The best and most accurate images tend to be those with a white or transparent background, usually by the producer themselves.
Note: Images needs to be formatted as .PNG or .JPEG before proceeding to the next steps. If they are not, use image converters such as
Step 3: Creating outlines
To create outlines, we will be using the free image-editor, Inkscape. Version 1.1.2 is used in this tutorial. Other versions might differ from what you see in the following steps, using this version is recommended.
Once downloaded, open Inkscape and follow the next steps.
3.1 - Creating an SVG image
The term "SVG" will be used about the images that will be created and later used on EloShapes. Click
here if you wish to learn more about SVGs. Knowledge about how SVG images work is not required to follow the tutorial.
Open an image by selecting File > Open (or Ctrl+O). Then, select Path > Trace Bitmap... (or Shift+Alt+B).
Using Trace Bitmap, there are several settings that affect the result.
Select Single Scan and Brightness Cutoff.
Brightness threshold is usually set to 0,800 with Invert image turned off. This setting controls how much of the image will be turned into an SVG. Setting the brightness threshold too low results in only parts of the image being converted into an SVG. Setting it too high results in inconsistencies and converting unwanted parts of the image.
The goal is to match the original shape. The usual 0,800 brightness threshold might not achieve these results and could require some adjustments.
Under Options, turn on Speckles and set it to 10. Smooth Corners should be turned on and set to 1,00. Optimize should be turned off.
Once the settings are adjusted, click on the image and press Apply. If you find that the Brightness threshold needs adjustment, delete the SVG image and try again.
3.2 - Fill holes and small gaps
Once most of the shape is covered in black, click the original image and delete it only leaving the single colored SVG image. At this point, there might be some gaps in the image, these needs to be covered.
Select and create a rectangle or circle and drag it across the holes or gaps.
Hold Shift while clicking on the SVG and on the newly created rectangle/circle. Then select Path > Union (or Ctrl+ +) to join the objects together, covering the holes. This needs to be repeated for all gaps and holes inside the shape.
Note: Make sure to zoom in and take a closer look at the SVG image, some gaps might be small and easy to miss.
3.3 - Remove unwanted parts
Now that all gaps are covered, we need to remove parts that should not be included, such as wires.
Removing something is similar to joining objects. Create a rectangle or circle and cover the unwanted parts. Hold shift, click on the SVG image and the rectangle/circle. Select Path > Difference (or Ctrl+ -).
When creating side and back images, it is also important to even out the bottom of the mouse.
3.4 - Scaling
In order for the outlines on the website to be displayed properly, the SVG images need to be scaled according to their dimensions.
First, select Object > Transform (or Shift+Ctrl+M)
In the Transform tab, select Scale and switch the measurement to px.
The following process differs between top, side and back images. Here, you will use the mouses dimensions found earlier and multiply them by 10x. Before scaling, click on the SVG image.
For top-view, turn on Scale proportionally and set the Height to the mouses length multiplied by 10x. In case of the HyperX Pulsefire Haste, the length is 124.2 mm and the scaling height should therefore be set to 1242 px. Do not adjust the scaling width, this should be done automatically.
For side-view, turn off Scale proportionally. The scaling Width should be set to the mouses length multiplied by 10x. The scaling Height should be set the mouses height multiplied by 10x.
For back-view, turn off Scale proportionally. The scaling Width should be set to the mouses width multiplied by 10x. The scaling Height should be set to the mouses height multiplied by 10x.
3.5 - Resize and save image
Now that the SVG itself is done, resize the image by selecting Edit > Resize Page to Selection (or Shift+Ctrl+R). This makes sure the image dimensions is the same as the SVG, otherwise it will create problems on the website. Save the SVG.
Step 4: Optimize and convert SVG to code
For this step, use SVGOMG by Jake Archibald
Select Open SVG and use your saved SVGs from Step 3. Once opened, a sidebar on the right appears. Here, you will need to change some settings before converting the SVG into text/code.
Under Global settings, only Compare gzipped should be turned on. Precision should be on full/max. Under Features, all settings should be turned on except for Remove xmlns, Remove viewBox, and Replace duplicate elements with links which should be turned off.
Once the settings are correct, click the Copy as text button.
You can save the optimized SVG as well, though it is not necessary if you keep the one made with Inkscape.
5 - Test, compare, and submit
Using the copied SVG code from the previous step and paste it into its text-box in the form. If all steps have been followed correctly, the outline should be displayed in the preview on the rightbottom of this page. If you see problems with the outline, please read "Common outline errors" below.
If everything seems correct, submit the form. The submission will be reviewed and added to the database if everything works as intended. Please consider leaving your email at the top of the form. This helps me get in contact if needed. Your email will not be used for any other purposes.
Thank you for your time and contribution to EloShapes, if you have any questions or feedback, please feel free to
contact me :)