Iron-based life form descended from T-72
Public
Edited
Mar 24
1 fork
6 stars
render(['rect', { width: 64, height: 48, 'stroke-width':'2px' }])
render(['rect', {
width: 48, height: 48,
x: 16, y: -16
}])
render(['line', {
x1: 16, y1: 16, x2: 32, y2: 32
}])
render(['line', {
y2: 32
}])
render(['line', {
x2: 64, y2: -32,
'stroke-dasharray': '4 3',
'marker-end': 'url(#arrowhead)'
}])
render(['line', {
x1: 16, y1: 16,
x2: 80, y2: -16
}])
render(['circle', {r: 32, cx: 10}, ['title', 'foo']])
render(['ellipse', {rx: 64, ry: 32}])
render(['g', {transform: 'translate(-30,0)'}, ['ellipse', {rx: 64, ry: 32}]])
render(['ellipse', {cx: -30, rx: 64, ry: 32}])
render(['g', {transform: 'rotate(30)'}, ['ellipse', {cx: -30, rx: 0.9 * 64, ry: 0.8 * 32}]])
render(['g', {transform: 'translate(10,10)'},
['rect', {width: 48, height: 48, rx: 16}]
])
render(['rect', {
width: 48,
height: 48,
rx: 16,
ry: 8
}])
render(['path', {d: 'M32 0l5 10h-10z'}])
render(['path', {d: 'M 4 8 h 6 v -4 l 6 6 l-6 6 v-4 h-6 z'}])
render(['path', {d: 'M16 8h-6v-4l-6 6l6 6v-4h6z'}])
render(['path', {d: 'M8 8h4v-4l6 6l-6 6v-4h-4v4l-6-6l6-6z'}])
render(['path', {d: 'M 12 4 a 7 7 0 1 1 0 16 a 7 7 0 1 1 0 -16 z v -1 a 8 8 0 1 0 0 18 a 8 8 0 1 0 0 -18 z'}]) //
render(['path', {d: 'm-16 0 l16 16 v-16 z'}])
render(['path', {d: 'M 0 0 m-4 0 l 4 -4 l 4 4 l -4 4 z'}])
render(['path', {d: 'm 0,0 c 0,11 -9,20 -20,20 -11,0 -20,-9 -20,-20 0,-11 9,-20 20,-20 11,0 20,9 20,20 z'}])
render(['path', {d: 'm 0 0 a 20 20 0 1 0 0 .1'}])
render(['path', {d: 'm 0 0 a 40 20 0 1 0 50 10'}])
render(['path', {d: 'm 0 0 a 4 4 0 1 1 0 .01'}])
render(['path', {d: 'm 0 -20 h 12 a 20 20 0 1 1 0 40 h -12 z'}])
render(['path', {d: 'm 0 -30 a 20 20 0 0 0 -20 20 v 20 a 20 20 0 0 0 20 20'}])
render(['path', {d: 'm 0 -30 a 20 20 1 0 1 20 20 v 20 a 20 20 0 0 0 20 20'}])
render(['path', {d: 'm 0 -10 h 12 a 10 10 0 1 1 0 20 h -12 z m 22 10 h 10'}])
or2 = render(['path', {d: 'm -2 20 a 40 40 0 0 0 0 -40 a 33 33 0 0 1 34 20 a 33 33 0 0 1 -34 20 z'}])
or1 = render(['path', {d: 'm -2 10 a 22 22 0 0 0 0 -20 h 10 a 20 20 0 0 1 17 10 a 20 20 0 0 1 -17 10 z m 26 -10 h 8'}])
render(['path', {d: 'm -2 -20 a 40 40 0 0 1 0 40 m 6 0 a 40 40 0 0 0 0 -40 a 30 30 0 0 1 28 20 a 30 30 0 0 1 -28 20 z'}])
render(['path', {d: 'm -2 -10 a 22 22 0 0 1 0 20 m 4 0 a 22 22 0 0 0 0 -20 h 10 a 22 22 0 0 1 16 10 a 22 22 0 0 1 -16 10 z m 25 -10 h 5'}])
render(['g', {},
['path', {d: 'm -64 -48 h 32 a 48 32 0 0 1 48 32 v 32 a 48 32 0 0 1 -48 32 h -32 z m 32 32 a 16 16 0 0 1 0 32 z'}]
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([ // M
'm', 4.5, -2,
'h', 1,
'l', 1, 1,
'l', 1, -1,
'h', 1,
'v', 4,
'h', -1,
'v', -2.75,
'l', -1, 1,
'l', -1, -1,
'v', 2.75,
'h', -1,
'z'
], 16).join(' ')}],
['path', {style: 'fill:#5555', d: scaled([ // O
'm', 2, -2,
'a', 2, 2, 0, 0, 1, 0, 4,
'a', 2, 2, 0, 0, 1, 0, -4,
'z',
'm', 0, 3,
'a', 1, 1, 0, 0, 0, 0, -2,
'a', 1, 1, 0, 0, 0, 0, 2,
'z'
], 16).join(' ')}],
['path', {style: 'fill:#5555', d: scaled([ // R
'm', -4, -2,
'h', 2,
'a', 1.5, 1.5, 0, 0, 1, 1.5, 1.5,
'a', 1.5, 1.5, 0, 0, 1, -.75, 1.25,
'l', 1.5, 1.55,
'h', -1.25,
'l',-1.25, -1.25,
'h', -.75,
'v', 1,
'h', -1,
'z',
'm', 1, 2,
'h', 1,
'a', .5, .5, 0, 0, 0, 0, -1,
'h', -1,
'z'
], 16).join(' ')}],
['path', {style: 'fill:#5555', d: scaled([ // D
'm', -8.5, -2,
'h', 2,
'a', 2, 2, 0, 0, 1, 0, 4,
'h', -2,
'z',
'm', 1, 3,
'h', 1,
'a', 1, 1, 0, 0, 0, 0, -2,
'h', -1,
'z'
], 16).join(' ')}],
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([
'm', -8, -2,
'h', 2,
'a', 2, 2, 0, 0, 1, 0, 4,
'h', -2,
'z',
'm', 1, 3,
'h', 1,
'a', 1, 1, 0, 0, 0, 0, -2,
'h', -1,
'z'
], 16).join(' ')}]
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([
'm', 2, -6, 'a', 4, 4, 0, 1, 1, 0, .01,
'm', 2, 14, 'l', 16, -16,
'm', -6, 14, 'a', 4, 4, 0, 1, 1, 0, .01,
'm', 12, 8
], 4).join(' ')}]
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([
'm', 0, 0,
'h', 1,
'a', 3, 3, 0, 0, 0, 6, 0,
'h', 1,
'v', 4,
'h', -8,
'z'
], 16).join(' ')}]
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([
'm', 0, 0,
'a', 3, 3, 0, 0, 0, -6, 0,
'a', 3, 3, 0, 0, 1, -6, 0,
'a', 6, 6, 0, 0, 1, 12, 0,
'z'
], 16).join(' ')}]
])
render(['g', {},
['path', {style: 'fill:#2aa;stroke:none', d: scaled([
..._.range(14, 50, 2).flatMap(r => [
'M', -19.1, 10 + r, 'a', r, r, 0, 0, 0, 0, -2 * r, 'v', -1, 'a', r + 1, r + 1, 0, 0, 1, 0, 2 * (r + 1), 'z',
'M', 19.1, 10 + r, 'a', r, r, 0, 0, 1, 0, -2 * r, 'v', -1, 'a', r + 1, r + 1, 0, 0, 0, 0, 2 * (r + 1), 'z'
])
], 4).join(' ')}]
])
render(['g', {},
['path', {style: 'fill:#5555', d: scaled([
'm', -3, -3,
'h', 3,
'a', 2, 2, 0, 0, 1, 1, 4,
'l', 2, 2,
'h', -2,
'l',-1, -1,
'h', -1,
'v', 1,
'h', -2,
'z'
], 16).join(' ')}]
])
render(['text', 'baseline (default)'])
render(['text', {'alignment-baseline': 'middle', 'stroke-width': '1px', 'stroke': '#777'}, 'middle']) // DON'T WORK in FF
render(['text', {'alignment-baseline': 'hanging'}, 'hanging'])
render(['text', 'start (default)'])
brick = (w, y) => ['g', {transform: 'translate(0,' + (32 * y) + ')'},
['rect', {width: w, height: 32, style: 'fill:#f003'}],
['text', {'text-anchor': 'middle', x: w / 2, y: 12 + 16}, 'B1']
]
render(['g',
brick(150, 0),
brick(100, 1)
])
render(['text', {'text-anchor': 'end'}, 'end'])
render(['text', {x: 16, y: -16, 'fill': '#555'}, 'Moved'])
render(['text', {transform: 'rotate(-45)', y: 32}, 'Rotate'])
render(['circle', {r: 64, fill: "url(#Gradient)"}])
render(['g',
['rect', {
width: 64,
height: 64,
rx: 16,
ry: 16
}]
])
render((s => ['path', { style: 'fill:#5555',
d: scaled([
'M', 1, 1, 'l', -2, -1, 'v', 2, 'z',
'M', -1, 3, 'l', 2, -1, 'v', 2, 'z'
], s / 4)
}])(64))
pin_bus_interface_initiator = render((s => ['path', {style: 'fill:#ddd',
d: scaled([
'M', 0, 0, 'h', 2, 'l', 2, 2, 'l', -2, 2, 'h', -2,
'M', 1, 1.25, 'l', -2, 1, 'v', -2, 'z',
'M', -1, 2.75, 'l', 2, -1, 'v', 2, 'z',
], s / 4)
}])(64))
tlm_initiator_down = render((s => ['g',
['path', {
d: scaled([
'M', 0, 0, 'h', 2, 'v', 2, 'h', -2, 'z',
'M', 0, 0, 'l', 1, 1, 'l', 1, -1
], s)
}]
])(64))
defs = ['defs',
['radialGradient', {id: "Gradient", cx: 0.5, cy: 0.5, r: 1, fx: 0.25, fy: 0.25},
['stop', {offset: "0%", 'stop-color': "yellow"}],
['stop', {offset: "100%", 'stop-color': "red"}]
]
]
render = arr => {
if (typeof arr === 'function') {
arr = arr();
}
return html`${onml.stringify(
getSvg({w:512, h:128})
.concat([defs, style, grid(), ['g', t(256, 64)].concat([arr])])
)}`
};
style = ['style', {}, `
.box { stroke: #000; fill: none; }
.grid { stroke: #eee; fill: none; stroke-width: 1px; }
.axis { stroke: #f00; fill: none; stroke-width: 1px; }
rect { fill: none; stroke: #000; }
/* circle { fill: none; stroke: #000; } */
ellipse { fill: none; stroke: #000; }
line { stroke: #000; }
text { font-size: 32px; font-family: 'sans'}
path { fill: none; stroke: #000; }
`];
onml.gen.svg(10,20)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
