text style 1 - schraeg

_.md

[ Launch: Tributary inlet ] 4705355 by roundrobin

config.json

{"description":"text style 1 - schraeg","endpoint":"","display":"svg","public":true,"require":[{"name":"Check","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fullscreen":false,"thumbnail":"http://i.imgur.com/8ag1dCf.png"}

inlet.js

var startX  = 50
var startY  = 200
var font_size = 71
var text_string = 'Hall of Fame'
    
var curve     = 262
var amplitude = -123
    
var targetX   = curve
var targetY   = amplitude    

var svg  = d3.select('svg') 
var defs = svg.append('defs')


var font_face = 'Mission Script'

var x = 300;
var y = 200;
var r = 130

svg.append("circle")
.attr({
	r: r,
	cx: x,
	cy: y,
	fill: "#000000"
});


svg.append("circle")
.attr({
	r: r*1.05,
	cx: x,
	cy: y,
  stroke: "#000000",
    "stroke-width": 4,
   fill: "none"
});


                  
svg.append('text')
.text(text_string)
.attr({
  fill: "#FFFFFF",
	x : 0,
	y: 20,
	"font-size": 100,
	"font-family": font_face,
	"text-anchor": "middle",
	rotate: 13,
	transform: "translate("+x+","+y+")rotate(-20)"
})
.style("text-shadow","1px 1px 0px #2BAD84,2px 2px 0px #2BAD84,3px 3px 10px #000000");



var path = new Path(defs)
path.add(['m',x,y/3]);
path.el().attr({
  stroke: "#FFFFFF",
    "stroke-width": 4,
   fill: "none",
  id: "bezierCurve"
})
path.add(['a',r*0.97,r*0.97, 0, 1, 0, 1, 0 ]);
path.render();

var text = svg.append('text')
.attr({
  fill: "#FFFFFF",
	x : 0,
	y: 34,
	"font-size": 34,
	"font-family": "SF Movie Poster",
	"text-anchor": "middle",
	transform: "translate("+0+","+0+")rotate(0)"
})
	
text.append('textPath')
  .attr('xlink:href','#bezierCurve')
	.attr("startOffset",52+"%")
	.attr("text-anchor","middle")
  	.text("Live Coding environment - Tributarty")
                  
//svg.append('use')
  //.attr('xlink:href','#bezierCurve')
  


var text = svg.append('text')
.text("\uF005")
.attr({
  fill: "#FFFFFF",
	x : 0,
	y: 34,
	"font-size": 34,
	"font-family": "FontAwesome",
	"text-anchor": "middle",
	transform: "translate("+x+","+y/2.5+")rotate(0)"
})