change symbols from png to svg

This commit is contained in:
rlx 2011-03-07 22:31:46 +00:00
commit f8485f0874
570 changed files with 1674 additions and 343 deletions

97
source/svg/index.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
input {
width: 10px;
height: 10px;
padding: 2px;
border: 1px solid rgb(128, 128, 128);
border-radius: 8px;
margin: 2px;
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
}
input[src="symbols/loading.svg"] {
width: 16px;
height: 16px;
padding: 0;
border: 0;
background: transparent;
}
div.symbol {
float: left;
position: relative;
width: 256px;
height: 256px;
margin: 4px;
background-image: 'grid.png' repeat;
}
div.symbol > div {
float: left;
width: 16px;
height: 16px;
}
img {
position: relative;
top: -256px;
width: 256px;
height: 256px;
}
</style>
<script src="../../build/js/jquery-1.5.js"></script>
<script>
$(function() {
var $body = $('body')
.css({
margin: '2px',
background: 'rgb(240, 240, 240)'
}),
$buttons = $('<div>').appendTo($body),
$symbols = $('<div>').appendTo($body);
[
'add', 'remove', 'close', 'select',
'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown',
'left', 'right', 'up', 'down',
'pause', 'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut',
'center', 'zoom', 'grow', 'shrink', 'fill', 'fit',
'unmute', 'volumeUp', 'volumeDown', 'mute',
'undo', 'redo', 'unlock', 'lock',
'mount', 'unmount', 'sync',
'info', 'warning', 'help',
'check', 'bracket',
'delete', 'download', 'edit', 'find', 'flag', 'like',
'publish', 'set', 'star', 'user', 'view', 'loading'
].forEach(function(symbol) {
var $symbol, src = 'symbols/' + symbol + '.svg';
console.log(symbol)
$('<input>')
.attr({
src: src,
title: symbol,
type: 'image'
})
.appendTo($buttons);
$symbol = $('<div>')
.addClass('symbol')
.appendTo($symbols);
for (var i = 0; i < 256; i++) {
color = (i + Math.floor(i / 16)) % 2 == 0 ? 224 : 192;
$('<div>')
.css({
backgroundColor: 'rgb(' + [color, color, color].join(', ') + ')'
})
.appendTo($symbol)
}
$('<img>')
.attr({
src: src
})
.appendTo($symbol);
});
});
</script>
</head>
<body></body>
</html>

22
source/svg/loading.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 32px;
height: 32px;
margin: auto;
}
</style>
</head>
<body>
<img src="symbols/loading.svg"/>
</body>
</html>

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="64,144 80,120 120,160 176,48 192,80 128,208" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 155 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="64,128 120,192" stroke-width="32" stroke="#404040"/>
<circle cx="120" cy="192" r="16" fill="#404040"/>
<polygon points="120,192 192,64" stroke-width="32" stroke="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 274 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="48,128 96,128" stroke-width="64" stroke="#404040"/>
<polygon points="64,128 144,48 144,208" fill="#404040"/>
<path d="M 160,96 a 60,60 0 0,1 0,64" fill="none" stroke-width="16" stroke="#404040"/>
<path d="M 176,64 a 96,96 0 0,1 0,128" fill="none" stroke-width="16" stroke="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 389 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="40" y="40" width="176" height="176" fill="none" stroke="#404040" stroke-width="16"/>
<line x1="101" y1="40" x2="101" y2="216" stroke="#404040" stroke-width="16"/>
<line x1="155" y1="40" x2="155" y2="216" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 334 B

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="40" y="40" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="40" x2="224" y2="40" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="72" x2="224" y2="72" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="104" x2="224" y2="104" stroke="#404040" stroke-width="16"/>
<rect x="40" y="152" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="152" x2="224" y2="152" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="184" x2="224" y2="184" stroke="#404040" stroke-width="16"/>
<line x1="144" y1="216" x2="224" y2="216" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 765 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="40" y="40" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
<rect x="152" y="40" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
<rect x="40" y="152" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
<rect x="152" y="152" width="64" height="64" fill="#404040" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 472 B

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="32" y1="40" x2="224" y2="40" stroke="#404040" stroke-width="16"/>
<line x1="32" y1="72" x2="224" y2="72" stroke="#404040" stroke-width="16"/>
<line x1="32" y1="104" x2="224" y2="104" stroke="#404040" stroke-width="16"/>
<line x1="32" y1="152" x2="224" y2="152" stroke="#404040" stroke-width="16"/>
<line x1="32" y1="184" x2="224" y2="184" stroke="#404040" stroke-width="16"/>
<line x1="32" y1="216" x2="224" y2="216" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 560 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g stroke="#404040" stroke-width="48">
<line x1="128" y1="0" x2="128" y2="256"/>
<line x1="0" y1="128" x2="256" y2="128"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 229 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="128" y1="0" x2="128" y2="128" stroke="#404040" stroke-width="48"/>
<polygon points="32,128 224,128 128,256" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="0,128 128,32 128,224" fill="#404040"/>
<line x1="128" y1="128" x2="256" y2="128" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="0" y1="128" x2="128" y2="128" stroke="#404040" stroke-width="48"/>
<polygon points="128,32 256,128 128,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,128 128,0 224,128" fill="#404040"/>
<line x1="128" y1="128" x2="128" y2="256" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 80,24 a 312,208 0 0,0 0,208" fill="none" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<path d="M 176,24 a 312,208 0 0,1 0,208" fill="none" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<!--
<path d="M 96,24 a 56,56 0 0,0 -56,56 l 0,96 a 56,56 0 0,0 56,56" fill="none" stroke="#404040" stroke-width="48"/>
<path d="M 160,24 a 56,56 0 0,1 56,56 l 0,96 a 56,56 0 0,1 -56,56" fill="none" stroke="#404040" stroke-width="48"/>
-->
</svg>

After

Width:  |  Height:  |  Size: 561 B

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="16" fill="#404040"/>
<rect x="-16" y="-16" width="32" height="32" fill="#404040"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(0)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(90)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(180)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(270)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 603 B

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 48,144 l 64,64 l 96,-160" fill="none" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<!--
<line x1="32" y1="128" x2="112" y2="224" stroke="#404040" stroke-width="48"/>
<circle cx="112" cy="224" r="24" fill="#404040"/>
<line x1="112" y1="224" x2="208" y2="32" stroke="#404040" stroke-width="48"/>
-->
</svg>

After

Width:  |  Height:  |  Size: 420 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g stroke="#404040" stroke-width="48">
<line x1="40" y1="40" x2="216" y2="216"/>
<line x1="40" y1="216" x2="216" y2="40"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 225 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<circle cx="128" cy="128" r="104" fill="none" stroke="#404040" stroke-width="48"/>
<line x1="40" y1="40" x2="216" y2="216" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 240 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,56 224,56 128,248" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 132 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="128" y1="16" x2="128" y2="128" stroke="#404040" stroke-width="96"/>
<polygon points="0,128 256,128 128,256" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,224 64,160 96,192" fill="#404040"/>
<line x1="88" y1="168" x2="184" y2="72" stroke="#404040" stroke-width="48"/>
<line x1="192" y1="64" x2="208" y2="48" stroke="#404040" stroke-width="48"/>
<line x1="112" y1="220" x2="224" y2="220" stroke="#404040" stroke-width="8"/>
<line x1="128" y1="204" x2="224" y2="204" stroke="#404040" stroke-width="8"/>
<line x1="144" y1="188" x2="224" y2="188" stroke="#404040" stroke-width="8"/>
</svg>

After

Width:  |  Height:  |  Size: 541 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="64,64 128,0 192,64" fill="#404040"/>
<rect x="32" y="96" width="192" height="64" fill="#404040"/>
<polygon points="64,192 192,192 128,256" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 258 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g stroke="#404040" stroke-width="48">
<circle cx="104" cy="104" r="64" fill="none"/>
<line x1="160" y1="160" x2="216" y2="216"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 232 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="64,16 192,16 128,80" fill="#404040"/>
<rect x="32" y="96" width="192" height="64" fill="#404040"/>
<polygon points="64,240 128,176 192,240" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 259 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="48" y1="224" x2="48" y2="32" stroke="#404040" stroke-width="32"/>
<path d="M 64,32 a 64,64 0 0,1 80,0 a 64,64 0 0,0 80,0 l 0,128 a 64,64 0 0,1 -80,0 a 64,64 0 0,0 -80,0" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 277 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="64" y1="32" x2="64" y2="224" stroke="#404040" stroke-width="48"/>
<polygon points="120,128 216,32 216,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 214 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="40,32 136,128 40,224" fill="#404040"/>
<line x1="192" y1="32" x2="192" y2="224" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 214 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,32 128,32 32,128" fill="#404040"/>
<line x1="72" y1="72" x2="120" y2="120" stroke="#404040" stroke-width="48"/>
<line x1="136" y1="136" x2="184" y2="184" stroke="#404040" stroke-width="48"/>
<polygon points="128,224 224,128 224,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 359 B

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 80,72 a 48,48 0 1,1 88,32 l -40,48" fill="none" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<!--
<path d="M 72,72 a 56,56 0 1,1 96,48 a 128,128 0 0,0 -40,48" fill="none" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
-->
<circle cx="128" cy="224" r="32" fill="#404040"/>
<!--
<circle cx="128" cy="232" r="24" fill="#404040"/>
-->
</svg>

After

Width:  |  Height:  |  Size: 474 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<circle cx="128" cy="48" r="32" fill="#404040"/>
<line x1="96" y1="112" x2="128" y2="112" stroke="#404040" stroke-linecap="round" stroke-width="32"/>
<line x1="128" y1="120" x2="128" y2="216" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<line x1="96" y1="224" x2="160" y2="224" stroke="#404040" stroke-linecap="round" stroke-width="32"/>
</svg>

After

Width:  |  Height:  |  Size: 441 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="8,128 200,32 200,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 132 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 128,248 l -96,-128 a 56,56 0 1,1 96,-64 a 56,56 0 1,1 96,64 l -96,128" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 175 B

View file

@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)" stroke="#000000" stroke-linecap="round" stroke-width="28">
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1">
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(30)" opacity="0.083333">
<animate attributeName="opacity" from="1" to="0" begin="-0.916667s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(60)" opacity="0.166667">
<animate attributeName="opacity" from="1" to="0" begin="-0.833333s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(90)" opacity="0.25">
<animate attributeName="opacity" from="1" to="0" begin="-0.75s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(120)" opacity="0.333333">
<animate attributeName="opacity" from="1" to="0" begin="-0.666667s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(150)" opacity="0.416667">
<animate attributeName="opacity" from="1" to="0" begin="-0.583333s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(180)" opacity="0.5">
<animate attributeName="opacity" from="1" to="0" begin="-0.5s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(210)" opacity="0.583333">
<animate attributeName="opacity" from="1" to="0" begin="-0.416667" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(240)" opacity="0.666667">
<animate attributeName="opacity" from="1" to="0" begin="-0.333333s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(270)" opacity="0.75">
<animate attributeName="opacity" from="1" to="0" begin="-0.25s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(300)" opacity="0.833333">
<animate attributeName="opacity" from="1" to="0" begin="-0.166667s" dur="1s" repeatCount="indefinite"></animate>
</line>
<line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(330)" opacity="0.916667">
<animate attributeName="opacity" from="1" to="0" begin="-0.083333" dur="1s" repeatCount="indefinite"></animate>
</line>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="40" y="112" width="176" height="104" fill="#404040"/>
<path d="M 184,128 l 0,-48 a 56,56 0 0,0 -112,0" fill="none" stroke="#404040" stroke-width="32"/>
</svg>

After

Width:  |  Height:  |  Size: 241 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="48,80 128,0 208,80" fill="#404040"/>
<line x1="48" y1="128" x2="208" y2="128" stroke="#404040" stroke-width="48"/>
<polygon points="48,176 208,176 128,256" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 274 B

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="16" y="88" width="64" height="80" fill="#404040"/>
<polygon points="40,128 144,24 144,232" fill="#404040"/>
<path d="M 160,96 a 48,48 0 0,1 0,64" fill="none" stroke="#404040" stroke-width="16"/>
<path d="M 176,64 a 88,88 0 0,1 0,128" fill="none" stroke="#404040" stroke-width="16"/>
<path d="M 192,32 a 128,128 0 0,1 0,192" fill="none" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 474 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"/>

After

Width:  |  Height:  |  Size: 66 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g stroke="#404040" stroke-width="48">
<line x1="80" y1="32" x2="80" y2="224"/>
<line x1="176" y1="32" x2="176" y2="224"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 224 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="72" y1="32" x2="72" y2="224" stroke="#404040" stroke-width="48"/>
<polygon points="144,32 240,128 144,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 214 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<circle cx="68" cy="188" r="28" fill="#404040"/>
<path d="M 40,104 a 112,112 0 0,1 112,112" fill="none" stroke="#404040" stroke-width="32"/>
<path d="M 40,40 a 176,176 0 0,1 176,176" fill="none" stroke="#404040" stroke-width="32"/>
</svg>

After

Width:  |  Height:  |  Size: 316 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 208,144 a 80,80 0 1,1 -80,-80 l 16,0" fill="none" stroke-width="48" stroke="#404040"/>
<polygon points="128,0 232,64 128,128" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 234 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g stroke="#404040" stroke-width="48" stroke-linecap="round">
<line x1="0" y1="128" x2="256" y2="128"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 197 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="56,32 248,128 56,224" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 133 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,104 128,8 224,104" fill="#404040"/>
<polygon points="32,152 224,152 128,248" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 195 B

View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="64" fill="none" stroke="#404040" stroke-width="64"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(0)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(45)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(90)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(135)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(180)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(225)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(270)" fill="#404040"/>
<rect x="-24" y="-128" width="48" height="48" transform="rotate(315)" fill="#404040"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 963 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="16,208 208,16 208,208" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 133 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="48,16 240,208 48,208" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 132 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="40" y1="40" x2="96" y2="96" stroke="#404040" stroke-width="48"/>
<polygon points="32,128 128,32 128,128" fill="#404040"/>
<polygon points="128,128 224,128 128,224" fill="#404040"/>
<line x1="160" y1="160" x2="216" y2="216" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 359 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="128,0 200,232 8,88 248,88 56,232" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 145 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 48,128 a 80,80 0 0,1 136,-56" fill="none" stroke="#404040" stroke-width="48"/>
<polygon points="144,112 224,32 224,112" fill="#404040" stroke="#404040" stroke-width="1"/>
<path d="M 208,128 a 80,80 0 0,1 -136,56" fill="none" stroke="#404040" stroke-width="48"/>
<polygon points="32,144 112,144 32,224" fill="#404040" stroke="#404040" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 452 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 48,144 a 80,80 0 1,0 80,-80 l -16,0" fill="none" stroke-width="48" stroke="#404040"/>
<polygon points="24,64 128,0 128,128" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 232 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="40" y="112" width="176" height="104" fill="#404040"/>
<path d="M 184,128 l 0,-48 a 56,56 0 0,0 -112,0 l 0,48" fill="none" stroke="#404040" stroke-width="32"/>
</svg>

After

Width:  |  Height:  |  Size: 248 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,112 128,16 224,112" fill="#404040"/>
<line x1="32" y1="176" x2="224" y2="176" stroke="#404040" stroke-width="48"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="16" y="88" width="64" height="80" fill="#404040"/>
<polygon points="40,128 144,24 144,232" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 197 B

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,200 128,8 224,200" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 132 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<ellipse cx="128" cy="80" rx="64" ry="80" fill="#404040"/>
<rect x="96" y="128" width="64" height="64" fill="#404040"/>
<path d="M 32,224 a 96,64 0 0,1 192,0" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 261 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<path d="M 24,128 a 120,120 0 0,1 208,0 a 120,120 0 0,1 -208,0 a 120,120 0 0,1 208,0" fill="none" stroke="#404040" stroke-width="32"/>
<circle cx="128" cy="128" r="32" fill="none" stroke="#404040" stroke-width="32"/>
</svg>

After

Width:  |  Height:  |  Size: 297 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="16" y="88" width="64" height="80" fill="#404040"/>
<polygon points="40,128 144,24 144,232" fill="#404040"/>
<path d="M 160,96 a 48,48 0 0,1 0,64" fill="none" stroke="#404040" stroke-width="16"/>
<path d="M 176,64 a 96,96 0 0,1 0,128" fill="none" stroke="#404040" stroke-width="16"/>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<rect x="16" y="88" width="64" height="80" fill="#404040"/>
<polygon points="40,128 144,24 144,232" fill="#404040"/>
<path d="M 160,96 a 48,48 0 0,1 0,64" fill="none" stroke-width="16" stroke="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 288 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<line x1="128" y1="24" x2="128" y2="152" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
<circle cx="128" cy="224" r="32" fill="#404040"/>
</svg>

After

Width:  |  Height:  |  Size: 231 B

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="16" fill="#404040"/>
<rect x="-16" y="-16" width="32" height="32" fill="#404040"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(0)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(90)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(180)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(270)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 603 B