Skip to content

Instantly share code, notes, and snippets.

@sam016

sam016/index.html

Last active June 24, 2022 05:55
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Alphabets letters created via SVG path // source http://jsbin.com/nacirij
Raw
index.html
<!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>
Raw
jsbin.nacirij.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;
}
Raw
jsbin.nacirij.js
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