Marty McGuire

Posts Tagged svg

2019
Mon Jan 28
🔖 Bookmarked Using Font Awesome Icons in Hugo | Nick Galbreath https://www.client9.com/using-font-awesome-icons-in-hugo/

“With Hugo we can preload the SVG icons, and inject them into our page with partial template or shortcode, skipping the network.”

2018
Wed May 23
📕 Finished reading SVG Animations by Sarah Drasner

Feeling pretty empowered by understanding more of the nuts-and-bolts of working with SVGs. Inspires me to work on improving my design skills and sensibilities.

2011
Sat Feb 26

Thing-a-Day 2011 #26 - "Improved" scribbling in JavaScript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I played with the mouse coordinate handling a bit to try and compensate for the rotation, but it’s still not great. For some reason, up-and-down movements seem to track well, but left-right movement causes the drawing point to move up and down relative to the cursor.

My guess is that I am just being bad at “the maths” and that I’ll get it figured out later. :)

Derp
Play here: http://schmarty.net/hershey_js_demo/

Fri Feb 25

Thing-a-Day 2011 #25 - Scribbling in SVG (+Hershey font typing)

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Added some scribbling to my little JavaScript app, which also gets saved to the SVG.

It’s not great (my insistence on making these things map to the sticky note image means they don’t line up right with the mouse), but it works!

Scribbs
As before, you can play with it here: http://schmarty.net/hershey_js_demo/

Wed Feb 23

Thing-a-Day 2011 #23 - SVG Output for Hershey fonts in JavaScript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I really wanted to get SVG manipulation going in this demo, so I have ported the rendering (once again), this time using the jQuery SVG lib, which is really nice and easy to use: http://keith-wood.name/svg.html

Hershey-js-svg-output
You can play with it here: http://schmarty.net/hershey_js_demo/index.html

Sun Feb 6

Hershey Fonts in SVG

Files

hershey_svg.zip
149280 bytes. Updated
hershey.zip
107203 bytes. Updated
astrology.svg
32309 bytes. Updated
cursive.svg
20791 bytes. Updated
cyrilc_1.svg
22660 bytes. Updated
cyrillic.svg
23636 bytes. Updated
futural.svg
15480 bytes. Updated
futuram.svg
22512 bytes. Updated
gothgbt.svg
35125 bytes. Updated
gothgrt.svg
36666 bytes. Updated
gothiceng.svg
35041 bytes. Updated
gothicger.svg
36582 bytes. Updated
gothicita.svg
30219 bytes. Updated
gothitt.svg
30303 bytes. Updated
greek.svg
16383 bytes. Updated
greekc.svg
21662 bytes. Updated
greeks.svg
15541 bytes. Updated
japanese.svg
55942 bytes. Updated
markers.svg
5566 bytes. Updated
mathlow.svg
16193 bytes. Updated
mathupp.svg
15783 bytes. Updated
meteorology.svg
16078 bytes. Updated
music.svg
26086 bytes. Updated
rowmand.svg
23433 bytes. Updated
rowmans.svg
15379 bytes. Updated
rowmant.svg
31035 bytes. Updated
scriptc.svg
25598 bytes. Updated
scripts.svg
22608 bytes. Updated
symbolic.svg
19740 bytes. Updated
timesg.svg
22309 bytes. Updated
timesi.svg
23030 bytes. Updated
timesib.svg
30928 bytes. Updated
timesr.svg
21818 bytes. Updated
timesrb.svg
30830 bytes. Updated
math-drawing.svg
8619 bytes. Updated

This work is licensed Public Domain.

Description

Making text for Unicorn or EggBot plots isn’t always a fun process. Most tools require you to convert text into paths, and even then you get the outlines of shapes, which can often turn messy at small sizes.

mifga pointed me towards the Hershey fonts[1]. They’re a set of fonts for vector plotters named after creator Dr. A. V. Hershey who made them for the National Bureau of Standards.

These files are in a weird, weird, format. But after some normalizing, wailing, and gnashing of teeth, I was able to write some code to parse them and spit them back out as SVG! Now you can use these fonts in your Unicorn drawings.

Each SVG contains a layout of one of the Hershey fonts. The hershey_svg.zip file below contains all of the SVG files. The hershey.zip file contains the (cleaned up) original .jhf files. math-drawing.svg is just an example of using these glyphs, including scaling and stretching. I think the result is nice!

To use these in Unicorn plots, you’ll want to grab my Unicorn G-Code extension for Inkscape[2].

[1] Hershey fonts - http://emergent.unpythonic.net/software/hershey
[2] Unicorn output for Inkscape - http://www.thingiverse.com/thing:5986

Instructions

To use these fonts in your Unicorn plots:

  1. Download the SVG file containing the font of your choice, or grab the whole hershey_svg.zip to get them all.
  2. In your Inkscape drawing, use File | Import to load the font you want
  3. Drag around and duplicate the characters that you want to use.
  4. Delete the ones that you don’t.
  5. Plot it!
    • (Unicorn users) Save your file and Save a Copy to get your .gcode!
    • (EggBot users) Plot directly from Inkscape. :)
2010
Thu Jul 22

Space filling with 3D objects using Processing

While I know I should be finishing my MakerBot time-lapse camera series, I took some time for another project to play with some Processing. The above image was rendered in Processing, in real time in just couple of minutes!

Basically, I wanted to take a simple shape, defined by an SVG path, and fill it with images of 3D objects loaded from STL files. Specifically, many wonderful MakerBot-printable objects from Thingiverse!

After some Googling around, I found out that this problem is basically a space-filling problem, similar to an excellent Processing sketch named Scattered Letters by Algirdas Rascius, but with a twist.

The basic algorithm is:

  • Load an SVG and render it to an off-screen buffer
  • Set curr_size, the size that STLs should be rendered, to max_size
  • Choose a random STL model, give it a random orientation, and render it at the current size to an off-screen buffer
  • Try several times to place this model by giving it a random x,y position and checking it for a good fit:
    • Each non-background pixel of the model’s off-screen image should fit within the non-background pixels of the SVG’s off-screen image.
    • Each non-background pixel of the model’s off-screen image should NOT overlap with any non-background pixel of the main display.
  • If a fitting position is found, render the model to the display.
  • Otherwise, shrink curr_size by a step and choose a new model.
  • If we drop below min_size, we should stop.

You can find the code for my sketch, which I call ThingiverseCollage, on GitHub. To make it work, you’ll need to follow the installation instructions in the README to install my (very slightly) modified version of the unlekkerLib for STL loading and rendering. I modified it to allow rendering to a PGraphics object, since it originally only allowed rendering to the main PApplet.

A note on STL files: unlekkerLib only loads STL files in the binary format. It chokes dramatically on ASCII STL files, such as those exported from OpenSCAD. I was able to use Zaggo’s excellent Pleasant3D to load ASCII STLs and re-save them, which converts them to binary STLs. As a bonus, Pleasant3D also allows you to orient objects in a way that will make them look most interesting when they are rendered down to 2D in the final image.

An example M.svg, as well as several objects from Thingiverse are included with the code to get started. To use your own SVGs, I have had good luck using Inkscape to draw or import shapes, and save them as the native “Inkscape SVG” or “Plain SVG” formats. Some files might require hand-tweaking; for example, if the width and height header values are something like “100%” instead of a pixel value.

There is also some simple configuration in the sketch to allow the export of PDF files. This is nice because the resulting PDF has full vector data, making it easily rescaled to any size you wish. Unfortunately, the current PDF renderer for Processing renders each triangle of each STL model as a separate path, generating very complicated vector output, which tends to bring Inkscape to its knees. I have had some luck with importing those files, rastering them out to PNG at a high resolution (e.g. 600 dpi), and using Inkscape’s “Trace Bitmap” functionality to re-vectorize them, though this requires some cleanup by hand.

Anyway, this has been a fun little diversion for me for the last couple of days. I hope that you folks find it useful! Post your awesome pictures in the comments, here!