Twine & Harlowe Logos (SVG Code)

Authoring Twine
,
1

I just thought I’d share my versions of the Twine and Harlowe logos I made while practicing SVG coding. You can just copy and paste these directly into a passage. Harlowe requires that " \ " be used at the end of each line when writing HTML/SVG code. If there is a better way to ignore line breaks in Harlowe, maybe someone can chime in on that.

Twine Logo

<svg width="175" height="200" viewBox="0 0 7 8"> \
	<defs> \
        <linearGradient id="gradientBlue" x1="0" x2="0" y1="0" y2="1"> \
        	<stop offset="0" stop-color="#127aee"/> \
        	<stop offset="1" stop-color="#117aef" stop-opacity=".25"/> \
        </linearGradient> \
        <linearGradient id="gradientGreen" x1="0" x2="1" y1="0" y2="0"> \
        	<stop offset="0" stop-color="#10f05e" stop-opacity=".25"/> \
        	<stop offset="1" stop-color="#10f05e"/> \
        </linearGradient> \
    </defs> \
    <path fill="url(#gradientBlue)" d="M 0,0 3,0 3,8 0,8 Z"/> \
    <path fill="url(#gradientGreen)" d="M 0,6.5 C 0,1 7,1 7,1 V 4 C 7,4 3,4 3,6.5 V 8 H 0 Z"/> \
</svg>

Keep in mind that this Twine logo is 7:8 ratio so sizes should reflect that. (28x32, 35x40 and so on and so forth.)

Harlowe Logo

<svg width="200" height="200" viewBox="0 0 200 200" overflow="visible"> \
	<defs> \
        <radialGradient id="spotlight"> \
        	<stop offset=".15" stop-color="#ffffff" stop-opacity=".15"/> \
        	<stop offset="1" stop-color="#ffffff" stop-opacity="0"/> \
        </radialGradient> \
        <filter id="blur" x="-10%" y="-10%"> \
      		<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" /> \
    	</filter> \
    </defs> \
    <ellipse fill="url(#spotlight)" cx="66" cy="140" rx="144" ry="40" /> \
	<g fill="#7a255e"> \
      	<path d="m 200,156 v 44 H 0 v -8 z M 0,44 V 0 h 200 v 8 z"/> \
  	</g> \
  	<g fill="#000000" filter="url(#blur)" transform="translate(-20.5 110.5) skewX(-30) scale(1.10 0.305) rotate(-35.5 100 100)"> \
    	<path id="harlowe_h" d="m 20,101 c 0,-23 13,-46 14,-48 2,-4 -2,-7 -5,-3 -3,4 -18,28 -18,51 0,24 15,48 18,52 3,4 7,1 5,-3 -2,-4 -14,-25 -14,-49 z m 160,0 c 0,-23 -13,-46 -14,-48 -2,-4 2,-7 5,-3 3,4 18,28 18,51 0,24 -15,48 -18,52 -3,4 -7,1 -5,-3 2,-4 14,-25 14,-49 z M 149,69 c 14,0 14,19 0,19 h -1 c -14,0 -14,-19 0,-19 z m 0,44 c 14,0 14,19 0,19 h -1 c -14,0 -14,-19 0,-19 z m -28,35 h 9 c 6,0 6,8 0,8 h -28 c -6,0 -6,-8 0,-8 h 11 V 103 H 61 v 45 h 11 c 6,0 6,8 0,8 H 44 c -6,0 -6,-8 0,-8 h 9 V 55 h -5 c -6,0 -6,-8 0,-8 h 24 c 6,0 6,8 0,8 H 61 v 40 h 52 V 55 h -11 c -6,0 -6,-8 0,-8 h 24 c 6,0 6,8 0,8 h -5 z"/> \
  	</g> \
  	<g fill="#e45bb6" transform="skewY(-10.25) translate(0 18)"> \
    	<use href="#harlowe_h"/> \
  	</g> \
</svg>

With the Harlowe logo, I decided to keep the overflow=“visible” attribute because I added a spotlight to the (H:) shadow that looks way cooler when it doesn’t get chopped off. However, if you want it to look more like the original Harlowe logo, just remove the overflow=“visible” attribute. The shadow is slightly blurred so, if displaying it at smaller sizes, you might need to increase the stdDeviation attribute until you’re happy with the result.

If you need to render this Harlowe logo on a light coloured background, you’ll have to edit the colours and, most likely, get rid of the blur and spotlight tags/attributes. This would be a good exercise for those just getting into SVG coding.

Personally, I really like SVG in the browser. It’s a great way to add a little pizazz without large file sizes (or external files, for that matter). I made these logos as small as I possibly could while still keeping them readable as code. Feel free to use or modify them as needed.

1 Like