/r2r

This generator typesets arbitrary words in the style of the logo of the DiVOC easter event 2021: Reboot to Respawn.

Primary LanguageHTMLMIT LicenseMIT

R2R Logo Generator

This generator typesets arbitrary words in the style of the logo of the DiVOC easter event 2021: Reboot to Respawn. You can use the generator online. It is written purely in JavaScript without libraries using the built-in SVG support of modern browsers.

The code uses the Itim font which is available on Google fonts. Unfortunately SVG doesn't have much support for manipulating texts. You can include text in an SVG, but you cannot manipulate the text as vectors. To overcome this limitation the letters A to Z and 0 to 9 are converted into SVG paths using Inkscape. These paths are store in the the font array.

The generation is performed in the following steps:

  1. The individual letters of the text are typeset next to each other as path elements.
  2. For every letter 100 positions of its outline are extracted using getPointAtLength. Some letters like A, O or Q have inner regions which should be excluded from the outline. This is achieved by cloning the paths and updating their d attribute to contain only the path commands until the first z. (z is the command which closes the current path.)
  3. To attach the icons to the bottom, top or right of the letters, we consider the points with a maximal or minimal X or Y coordinate with a certain tolerance. From all the points inside the tolerance one is randomly chosen and taken as reference position for the icon. The icons are added as path objects and moved and scaled using the functions translate and scale in its transform attribute.
  4. For the resistors connecting the letters we consider all the points with a Y coordinate close to the center of the letter (with a certain tolerance). From those points we consider all the right points (again with a certain tolerance) and chose one of those randomly. Now we consider all the points of the next letter whose Y coordinate is the same as our chosen point's (with a certain tolerance). From those we consider all the left points (again with a certain tolerance) and chose one of those randomly. The resistor icon is now drawn between these two points by setting its transform attribute to translate(${a.x},${a.y}) scale(${distance(a,b) / 20}) rotate(${angle(a, b)}).

This process is visualized and explained (in German) in this video. The slides are available online here.