From 87c8478c80fbabeba29f649d6fbe20e2af3187f9 Mon Sep 17 00:00:00 2001
From: Jermolene <jeremy@osmosoft.com>
Date: Mon, 24 Mar 2014 22:49:10 +0000
Subject: [PATCH] Add curved text demo

---
 .../tw5.com/tiddlers/howtos/CurvedText.tid    |  3 +++
 .../howtos/Making curved text with SVG.tid    | 26 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 editions/tw5.com/tiddlers/howtos/CurvedText.tid
 create mode 100644 editions/tw5.com/tiddlers/howtos/Making curved text with SVG.tid

diff --git a/editions/tw5.com/tiddlers/howtos/CurvedText.tid b/editions/tw5.com/tiddlers/howtos/CurvedText.tid
new file mode 100644
index 000000000..cd0124829
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/CurvedText.tid
@@ -0,0 +1,3 @@
+title: $:/CurvedText
+
+Everything in federation
\ No newline at end of file
diff --git a/editions/tw5.com/tiddlers/howtos/Making curved text with SVG.tid b/editions/tw5.com/tiddlers/howtos/Making curved text with SVG.tid
new file mode 100644
index 000000000..0396dec41
--- /dev/null
+++ b/editions/tw5.com/tiddlers/howtos/Making curved text with SVG.tid	
@@ -0,0 +1,26 @@
+created: 20140324223413403
+modified: 20140324223524945
+tags: howto examples
+title: Making curved text with SVG
+type: text/vnd.tiddlywiki
+
+\define textOnPath(text)
+$$$.svg
+<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<path id="MyPath" d="M 100 200 C 200 100 300   0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/>
+</defs>
+<use xlink:href="#MyPath" fill="none" stroke="red"/>
+<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
+<textPath xlink:href="#MyPath">
+$text$
+</textPath>
+</text>
+</svg>
+$$$
+\end
+This demo shows how to use SVG to render transcluded text along a path. Enter some text in the textbox below to try it out; view the source to see how it is done.
+
+<$edit-text tiddler="$:/CurvedText" tag="input" placeholder="Type text here" default=""/>
+
+<$macrocall $name="textOnPath" text={{$:/CurvedText}}/>