Alphabets letters created via SVG path // source http://jsbin.com/nacirij
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="SVG Alphabets"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>SVG Letters</title> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> | |
<style id="jsbin-css"> | |
body { | |
position:relative; | |
} | |
svg { | |
border: 1px solid rgba(0,0,0,0.1); | |
display: inline-block; | |
width: 150px; | |
stroke: red; | |
margin:20px; | |
} | |
path { | |
fill: none; | |
stroke-linecap: round; | |
stroke-linejoin: round; | |
stroke-width: 3px; | |
transition: 0.2s; | |
} | |
.capital-letter { | |
display: inline-block; | |
} | |
.floating-control { | |
position: fixed; | |
top: 0; | |
right: 0; | |
} | |
</style> | |
</head> | |
<body ng-app="myApp"> | |
<div ng-controller="alphabetsController"> | |
<div class="capital-letters-list" style="zoom:{{zoom}}"> | |
<ng-template ng-repeat="letter in capitalLetters"> | |
<svg viewBox="0 0 27 40"> | |
<path d="{{letter.value}}"/> | |
</svg> | |
<div ng-if="($index % 4)===3"></div> | |
</ng-template> | |
</div> | |
<div class="floating-control"> | |
<input type="range" ng-model="zoom" max="1.0" min="0.2" step="0.005"> | |
</div> | |
</div> | |
<script id="jsbin-javascript"> | |
console.clear(); | |
var CAPITAL_LETTERS = { | |
"a": [ | |
"M24,36", | |
"L24,20", | |
"L13,3", | |
"L3,20", | |
"L3,36", | |
"M3,20", | |
"L24,20" | |
], | |
"b": [ | |
"M20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L3,20" | |
], | |
"c": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36" | |
], | |
"d": [ | |
"M3,3", | |
"L24,3", | |
"L24,36", | |
"L3,36", | |
"M6,3", | |
"L6,36" | |
], | |
"e": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"M3,20", | |
"L20,20" | |
], | |
"f": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"M3,20", | |
"L20,20" | |
], | |
"g": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L14,20" | |
], | |
"h": [ | |
"M3,3", | |
"L3,36", | |
"M3,20", | |
"L24,20", | |
"M24,3", | |
"L24,36" | |
], | |
"i": [ | |
"M3,3", | |
"L24,3", | |
"M3,36", | |
"L24,36", | |
"M13,3", | |
"L13,36" | |
], | |
"j": [ | |
"M3,3", | |
"L24,3", | |
"M20,3", | |
"L20,36", | |
"L3,36", | |
"L3,25" | |
], | |
"k": [ | |
"M3,3", | |
"L3,36", | |
"M18,3", | |
"L3,20", | |
"L18,36" | |
], | |
"l": [ | |
"M3,3", | |
"L3,36", | |
"L24,36" | |
], | |
"m": [ | |
"M3,36", | |
"L3,3", | |
"L14,20", | |
"L24,3", | |
"L24,36" | |
], | |
"n": [ | |
"M3,36", | |
"L3,3", | |
"L24,36", | |
"L24,3" | |
], | |
"o": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3" | |
], | |
"p": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36" | |
], | |
"q": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3", | |
"M16,25", | |
"L25,38" | |
], | |
"r": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"M16,20", | |
"L22,36" | |
], | |
"s": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L24,20", | |
"L24,36", | |
"L3,36" | |
], | |
"t": [ | |
"M3,3", | |
"L24,3", | |
"M14,3", | |
"L14,36" | |
], | |
"u": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3" | |
], | |
"v": [ | |
"M3,3", | |
"L14,36", | |
"L24,3" | |
], | |
"w": [ | |
"M3,3", | |
"L5,36", | |
"L14,10", | |
"L22,36", | |
"L24,3" | |
], | |
"x": [ | |
"M3,3", | |
"L24,36", | |
"M3,36", | |
"L24,3" | |
// A | |
], | |
"y": [ | |
"M3,3", | |
"L14,20", | |
"L24,3", | |
"M14,20", | |
"L14,36" | |
], | |
"z": [ | |
"M3,3", | |
"L24,3", | |
"L3,36", | |
"L24,36" | |
] | |
}; | |
function obToList(ob){ | |
return Object.keys(ob).map(key=>{ | |
return { | |
key:key, | |
value: ob[key].join('') | |
}; | |
}); | |
} | |
var myApp = angular.module('myApp', []); | |
myApp.controller('alphabetsController',['$scope', function($scope){ | |
$scope.capitalLetters = obToList(CAPITAL_LETTERS); | |
$scope.zoom = 0.5; | |
}]); | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { | |
position:relative; | |
} | |
svg { | |
border: 1px solid rgba(0,0,0,0.1); | |
display: inline-block; | |
width: 150px; | |
stroke: red; | |
margin:20px; | |
} | |
path { | |
fill: none; | |
stroke-linecap: round; | |
stroke-linejoin: round; | |
stroke-width: 3px; | |
transition: 0.2s; | |
} | |
.capital-letter { | |
display: inline-block; | |
} | |
.floating-control { | |
position: fixed; | |
top: 0; | |
right: 0; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">console.clear(); | |
var CAPITAL_LETTERS = { | |
"a": [ | |
"M24,36", | |
"L24,20", | |
"L13,3", | |
"L3,20", | |
"L3,36", | |
"M3,20", | |
"L24,20" | |
], | |
"b": [ | |
"M20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L3,20" | |
], | |
"c": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36" | |
], | |
"d": [ | |
"M3,3", | |
"L24,3", | |
"L24,36", | |
"L3,36", | |
"M6,3", | |
"L6,36" | |
], | |
"e": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"M3,20", | |
"L20,20" | |
], | |
"f": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"M3,20", | |
"L20,20" | |
], | |
"g": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L14,20" | |
], | |
"h": [ | |
"M3,3", | |
"L3,36", | |
"M3,20", | |
"L24,20", | |
"M24,3", | |
"L24,36" | |
], | |
"i": [ | |
"M3,3", | |
"L24,3", | |
"M3,36", | |
"L24,36", | |
"M13,3", | |
"L13,36" | |
], | |
"j": [ | |
"M3,3", | |
"L24,3", | |
"M20,3", | |
"L20,36", | |
"L3,36", | |
"L3,25" | |
], | |
"k": [ | |
"M3,3", | |
"L3,36", | |
"M18,3", | |
"L3,20", | |
"L18,36" | |
], | |
"l": [ | |
"M3,3", | |
"L3,36", | |
"L24,36" | |
], | |
"m": [ | |
"M3,36", | |
"L3,3", | |
"L14,20", | |
"L24,3", | |
"L24,36" | |
], | |
"n": [ | |
"M3,36", | |
"L3,3", | |
"L24,36", | |
"L24,3" | |
], | |
"o": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3" | |
], | |
"p": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36" | |
], | |
"q": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3", | |
"M16,25", | |
"L25,38" | |
], | |
"r": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"M16,20", | |
"L22,36" | |
], | |
"s": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L24,20", | |
"L24,36", | |
"L3,36" | |
], | |
"t": [ | |
"M3,3", | |
"L24,3", | |
"M14,3", | |
"L14,36" | |
], | |
"u": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3" | |
], | |
"v": [ | |
"M3,3", | |
"L14,36", | |
"L24,3" | |
], | |
"w": [ | |
"M3,3", | |
"L5,36", | |
"L14,10", | |
"L22,36", | |
"L24,3" | |
], | |
"x": [ | |
"M3,3", | |
"L24,36", | |
"M3,36", | |
"L24,3" | |
// A | |
], | |
"y": [ | |
"M3,3", | |
"L14,20", | |
"L24,3", | |
"M14,20", | |
"L14,36" | |
], | |
"z": [ | |
"M3,3", | |
"L24,3", | |
"L3,36", | |
"L24,36" | |
] | |
}; | |
function obToList(ob){ | |
return Object.keys(ob).map(key=>{ | |
return { | |
key:key, | |
value: ob[key].join('') | |
}; | |
}); | |
} | |
var myApp = angular.module('myApp', []); | |
myApp.controller('alphabetsController',['$scope', function($scope){ | |
$scope.capitalLetters = obToList(CAPITAL_LETTERS); | |
$scope.zoom = 0.5; | |
}]);</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
position:relative; | |
} | |
svg { | |
border: 1px solid rgba(0,0,0,0.1); | |
display: inline-block; | |
width: 150px; | |
stroke: red; | |
margin:20px; | |
} | |
path { | |
fill: none; | |
stroke-linecap: round; | |
stroke-linejoin: round; | |
stroke-width: 3px; | |
transition: 0.2s; | |
} | |
.capital-letter { | |
display: inline-block; | |
} | |
.floating-control { | |
position: fixed; | |
top: 0; | |
right: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.clear(); | |
var CAPITAL_LETTERS = { | |
"a": [ | |
"M24,36", | |
"L24,20", | |
"L13,3", | |
"L3,20", | |
"L3,36", | |
"M3,20", | |
"L24,20" | |
], | |
"b": [ | |
"M20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L3,20" | |
], | |
"c": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36" | |
], | |
"d": [ | |
"M3,3", | |
"L24,3", | |
"L24,36", | |
"L3,36", | |
"M6,3", | |
"L6,36" | |
], | |
"e": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"L24,36", | |
"M3,20", | |
"L20,20" | |
], | |
"f": [ | |
"M24,3", | |
"L3,3", | |
"L3,36", | |
"M3,20", | |
"L20,20" | |
], | |
"g": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L3,36", | |
"L24,36", | |
"L24,20", | |
"L14,20" | |
], | |
"h": [ | |
"M3,3", | |
"L3,36", | |
"M3,20", | |
"L24,20", | |
"M24,3", | |
"L24,36" | |
], | |
"i": [ | |
"M3,3", | |
"L24,3", | |
"M3,36", | |
"L24,36", | |
"M13,3", | |
"L13,36" | |
], | |
"j": [ | |
"M3,3", | |
"L24,3", | |
"M20,3", | |
"L20,36", | |
"L3,36", | |
"L3,25" | |
], | |
"k": [ | |
"M3,3", | |
"L3,36", | |
"M18,3", | |
"L3,20", | |
"L18,36" | |
], | |
"l": [ | |
"M3,3", | |
"L3,36", | |
"L24,36" | |
], | |
"m": [ | |
"M3,36", | |
"L3,3", | |
"L14,20", | |
"L24,3", | |
"L24,36" | |
], | |
"n": [ | |
"M3,36", | |
"L3,3", | |
"L24,36", | |
"L24,3" | |
], | |
"o": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3" | |
], | |
"p": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36" | |
], | |
"q": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3", | |
"L3,3", | |
"M16,25", | |
"L25,38" | |
], | |
"r": [ | |
"M3,20", | |
"L20,20", | |
"L20,3", | |
"L3,3", | |
"L3,36", | |
"M16,20", | |
"L22,36" | |
], | |
"s": [ | |
"M24,3", | |
"L3,3", | |
"L3,20", | |
"L24,20", | |
"L24,36", | |
"L3,36" | |
], | |
"t": [ | |
"M3,3", | |
"L24,3", | |
"M14,3", | |
"L14,36" | |
], | |
"u": [ | |
"M3,3", | |
"L3,36", | |
"L24,36", | |
"L24,3" | |
], | |
"v": [ | |
"M3,3", | |
"L14,36", | |
"L24,3" | |
], | |
"w": [ | |
"M3,3", | |
"L5,36", | |
"L14,10", | |
"L22,36", | |
"L24,3" | |
], | |
"x": [ | |
"M3,3", | |
"L24,36", | |
"M3,36", | |
"L24,3" | |
// A | |
], | |
"y": [ | |
"M3,3", | |
"L14,20", | |
"L24,3", | |
"M14,20", | |
"L14,36" | |
], | |
"z": [ | |
"M3,3", | |
"L24,3", | |
"L3,36", | |
"L24,36" | |
] | |
}; | |
function obToList(ob){ | |
return Object.keys(ob).map(key=>{ | |
return { | |
key:key, | |
value: ob[key].join('') | |
}; | |
}); | |
} | |
var myApp = angular.module('myApp', []); | |
myApp.controller('alphabetsController',['$scope', function($scope){ | |
$scope.capitalLetters = obToList(CAPITAL_LETTERS); | |
$scope.zoom = 0.5; | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment