UNPKG

@webwriter/chemdraw

Version:

Periodic table of the elements. Each element can be focused on to get a brief overview of its properties.

57 lines (55 loc) • 13.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { svg } from 'lit'; const add = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M417-417H229q-26 0-44.5-18.5T166-480q0-26 18.5-44.5T229-543h188v-188q0-26 18.5-44.5T480-794q26 0 44.5 18.5T543-731v188h188q26 0 44.5 18.5T794-480q0 26-18.5 44.5T731-417H543v188q0 26-18.5 44.5T480-166q-26 0-44.5-18.5T417-229v-188Z"/></svg>`; const arrow = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m426-417 71 157q10 22-8 37t-38 2L127-427q-29-19-29-53t29-53l324-206q20-13 38 2t8 37l-71 157h414q26 0 44.5 18.5T903-480q0 26-18.5 44.5T840-417H426Z"/></svg>`; const bold = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M348-167q-53 0-89.5-36.5T222-293v-375q0-53 36.5-89.5T348-794h177q78 0 135.5 48.5T718-622q0 39-18 74t-53 52v3q44 18 67.5 58t23.5 88q0 79-62 129.5T531-167H348Zm29-130h129q28 0 48.5-18t20.5-45q0-27-20.5-45.5T506-424H377v127Zm0-254h120q25 0 43.5-16.5T559-608q0-24-18.5-40.5T497-665H377v114Z"/></svg>`; const cursor = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M639-33q-29 14-59 2.5T536-71L408-344l-92 129q-27 38-70.5 24T202-251v-580q0-40 35.5-57t66.5 7l455 357q35 28 20.5 70.5T720-411H549l128 274q14 29 2.5 59.5T639-33Z"/></svg>`; const double = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.68,18.38c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11l11.7-11.7c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11l-11.7,11.7Z" style="stroke-width:0"/><path d="m10.67,19.55c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11l8.87-8.87c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11l-8.87,8.87Z" style="stroke-width:0"/><rect height="24" style="fill:none;stroke-width:0" width="24"/></svg>`; const eraser = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M744-252h190v126H618l126-126ZM152-126l-87-87q-37-37-37-88.5T65-391l431-435q37-38 89-37.5t89 37.5l178 178q37 37 37 89t-37 89L511-126H152Z"/></svg>`; const free_pair = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="m13.58,20.27c0,.43-.15.8-.46,1.11s-.68.46-1.11.46-.8-.15-1.11-.46-.46-.68-.46-1.11V3.73c0-.43.15-.8.46-1.11s.68-.46,1.11-.46.8.15,1.11.46.46.68.46,1.11v16.55Z" style="stroke-width: 0px;"/><rect width="24" height="24" style="fill: none; stroke-width: 0px;"/></svg>`; const heptagon = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="24" style="fill:none;stroke-width:0" width="24"/><path d="m22.8,14.31l-2.64-7.25s-.03-.04-.04-.06c0-.06-.01-.11-.03-.17-.1-.38-.32-.67-.66-.86l-6.68-3.86c-.22-.13-.45-.19-.69-.19-.02,0-.04,0-.06,0-.02,0-.04,0-.06,0-.24,0-.47.06-.69.19l-6.68,3.86c-.23.13-.39.33-.51.55-.08.11-.17.23-.22.37l-2.64,7.25c-.07.2-.1.39-.08.58-.02.36.09.69.33.97l4.96,5.91c.25.3.57.47.96.5.1,0,.2,0,.29,0,.04,0,.07,0,.1,0h8.14c.1,0,.2,0,.3-.03.12.02.25.03.38.02.39-.03.71-.2.96-.5l4.75-5.66c.19-.14.35-.3.46-.53.17-.36.18-.72.05-1.09Zm-7.01,4.94h-7.65l-4.04-4.81,2.27-6.24,5.62-3.24,5.53,3.19,2.29,6.3-4.03,4.8Z" style="stroke-width:0"/></svg>`; const hexagon = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="24" style="fill:none;stroke-width:0" width="24"/><path d="m12,1.78s-.04,0-.06,0c-.27,0-.52.06-.77.21L3.76,6.26c-.38.22-.62.54-.73.96-.05.17-.06.33-.05.5,0,.03,0,.06,0,.1v8.55s0,.04,0,.06c0,.04,0,.08.01.12,0,.08.02.15.04.22,0,0,0,.01,0,.02,0,0,0,0,0,.01.05.17.12.33.23.48.03.04.07.08.1.13.02.02.04.05.06.07.09.09.18.16.28.22.02.01.03.03.04.04l7.4,4.28c.25.14.5.21.77.21.02,0,.04,0,.07,0,.02,0,.04,0,.07,0,.27,0,.52-.06.77-.21l7.4-4.28s.03-.03.04-.04c.1-.06.19-.14.28-.22.02-.02.04-.05.06-.07.04-.04.07-.08.1-.13.11-.15.18-.31.23-.48,0,0,0,0,0-.01,0,0,0-.01,0-.02.02-.07.03-.15.04-.22,0-.04,0-.08.01-.12,0-.02,0-.04,0-.06V7.81s0-.07,0-.1c0-.16,0-.33-.05-.5-.11-.42-.36-.74-.73-.96L12.84,1.99c-.25-.14-.5-.21-.77-.21-.02,0-.04,0-.07,0Zm5.88,6.76v6.93l-5.88,3.39-5.88-3.39v-6.93l5.88-3.39,5.88,3.39Z" style="stroke-width:0"/></svg>`; const highlight = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M175 0q-40 0-67.5-28T80-96q0-40 28-67.5t68-27.5h609q40 0 67.5 27.5T880-96q0 40-28 68T784 0H175Zm289-749 277 278-164 164q-36 36-88.5 36T400-307q-18 17-40.5 26.5T312-271h-73q-21 0-29-19.5t7-34.5l83-82q-37-37-37.5-88.5T299-584l165-165Zm58-58 86-86q38-38 89-38t89 38l99 100q38 38 38 89t-38 89l-86 86-277-278Z"/></svg>`; const italic = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M248-167q-30 0-51.5-21.5T175-240q0-30 21.5-51.5T248-313h93l111-332h-78q-30 0-51.5-21.5T301-718q0-30 21.5-51.5T374-791h300q30 0 51.5 21.5T747-718q0 30-21.5 51.5T674-645h-73L490-313h58q30 0 51.5 21.5T621-240q0 30-21.5 51.5T548-167H248Z"/></svg>`; const lewis = svg`<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M480-377q-43 0-73-30t-30-73q0-43 30-73t73-30q43 0 73 30t30 73q0 43-30 73t-73 30Zm0-286q-26 0-44.5-18.5T417-726v-82q0-26 18.5-44.5T480-871q26 0 44.5 18.5T543-808v82q0 26-18.5 44.5T480-663Zm0 574q-26 0-44.5-18.5T417-152v-82q0-26 18.5-44.5T480-297q26 0 44.5 18.5T543-234v82q0 26-18.5 44.5T480-89Zm246-328q-26 0-44.5-18.5T663-480q0-26 18.5-44.5T726-543h82q26 0 44.5 18.5T871-480q0 26-18.5 44.5T808-417h-82Zm-574 0q-26 0-44.5-18.5T89-480q0-26 18.5-44.5T152-543h82q26 0 44.5 18.5T297-480q0 26-18.5 44.5T234-417h-82Z"/></svg>`; const octagon = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="24" style="fill:none;stroke-width:0" width="24" /><path d="m22.42,8.21c0-.38-.13-.7-.4-.97l-5.25-5.25c-.27-.27-.59-.4-.97-.4-.02,0-.03,0-.05,0-.02,0-.03,0-.05,0h-7.43s-.03,0-.05,0c-.02,0-.03,0-.05,0-.38,0-.7.13-.97.4L1.97,7.24c-.27.27-.4.59-.4.97,0,.02,0,.04,0,.06,0,.02,0,.04,0,.05v7.43s0,.01,0,.02c0,0,0,.01,0,.02,0,.38.13.7.4.97l5.25,5.25c.27.27.59.4.97.4.02,0,.03,0,.05,0,.02,0,.03,0,.05,0h7.43s.03,0,.05,0c.02,0,.03,0,.05,0,.38,0,.7-.13.97-.4l5.25-5.25c.27-.27.4-.59.4-.97,0,0,0-.01,0-.02,0,0,0-.01,0-.02v-7.43s0-.04,0-.05c0-.02,0-.04,0-.06Zm-7.18,11.46h-6.48l-4.45-4.45v-6.45l4.45-4.45h6.48l4.45,4.45v6.45l-4.45,4.45Z" style="stroke-width:0" /></svg>`; const pentagon = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="24" style="fill:none;stroke-width:0" width="24" /><path d="m20.19,10.36c-.04-.43-.22-.79-.55-1.07l-6.55-5.5c-.3-.25-.64-.37-1.02-.36,0,0,0,0,0,0-.02,0-.04,0-.06,0-.02,0-.04,0-.06,0,0,0,0,0,0,0-.38,0-.72.11-1.02.36l-6.55,5.5c-.33.28-.52.64-.55,1.07,0,.11,0,.21,0,.32,0,.15,0,.3.05.46l2.21,8.26c.11.42.36.74.73.95.28.16.58.23.89.21.02,0,.03,0,.05,0h8.55s.05,0,.08,0c.27,0,.52-.07.77-.21.38-.22.62-.54.73-.95l2.21-8.26s.01-.07.02-.1c.07-.21.11-.43.09-.67Zm-11.39,7.05l-1.69-6.31,4.89-4.1,4.85,4.07-1.7,6.35h-6.34Z" style="stroke-width:0" /></svg>`; const radical = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12,15.75c-1.02,0-1.87-.34-2.64-1.11-.68-.68-1.11-1.62-1.11-2.64s.34-1.87,1.11-2.64c.68-.68,1.62-1.11,2.64-1.11s1.87.34,2.64,1.11c.68.68,1.11,1.62,1.11,2.64s-.34,1.87-1.11,2.64-1.62,1.11-2.64,1.11Z" style="stroke-width:0" /><rect height="24" style="fill:none;stroke-width:0" width="24" /></svg>`; const reactsTo = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M594-417H189q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h405l-77-77q-18-18-18-44t18-44q18-18 44-18t44 18l184 183q9 9 14 21t5 24q0 12-5 24t-14 21L605-252q-18 18-44 18t-44-18q-18-18-18-44t18-44l77-77Z"/></svg>`; const redo = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" ><path d="M594-537H375q-51 0-87 35.5T252-415q0 51 36 87t87 36h230q26 0 44.5 18.5T668-229q0 26-18.5 44.5T605-166H375q-103 0-176-72.5T126-414q0-103 73-176t176-73h219l-39-39q-18-18-18-44t18-44q18-18 44-18t44 18l146 145q9 9 14 21t5 24q0 12-5 24t-14 21L643-410q-18 18-44 18t-44-18q-18-18-18-44t18-44l39-39Z"/></svg>`; const single = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m7.26,18.97c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11l11.7-11.7c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11l-11.7,11.7Z" style="stroke-width:0" /><rect height="24" style="fill:none;stroke-width:0" width="24" /></svg>`; const skelett = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.26,8.22c-.31-.31-.68-.46-1.11-.46s-.81.15-1.11.46l-4.3,4.3-4.29-4.3c-.31-.31-.68-.46-1.11-.46-.03,0-.05,0-.07,0-.02,0-.05,0-.07,0-.44,0-.81.15-1.11.46l-5.34,5.34c-.31.31-.46.68-.46,1.11s.15.81.46,1.11.68.46,1.11.46.81-.15,1.11-.46l4.3-4.3,4.3,4.3c.31.31.68.46,1.11.46.02,0,.05,0,.07,0,.02,0,.05,0,.07,0,.44,0,.81-.15,1.11-.46l5.34-5.34c.31-.31.46-.68.46-1.11s-.15-.81-.46-1.11Z" style="stroke-width: 0px;"/><rect width="24" height="24" style="fill: none; stroke-width: 0px;"/></svg>`; const text_field = svg`<svg height=24 viewBox="0 -960 960 960" width=24 xmlns="http://www.w3.org/2000/svg"><path d="M440-560h-80q-17 0-28.5-11.5T320-600q0-17 11.5-28.5T360-640h240q17 0 28.5 11.5T640-600q0 17-11.5 28.5T600-560h-80v200q0 17-11.5 28.5T480-320q-17 0-28.5-11.5T440-360v-200ZM9-72v-160q0-26 18.5-44.5T72-295h17v-370H72q-26 0-44.5-18.5T9-728v-160q0-26 18.5-44.5T72-951h160q26 0 44.5 18.5T295-888v17h370v-17q0-26 18.5-44.5T728-951h160q26 0 44.5 18.5T951-888v160q0 26-18.5 44.5T888-665h-17v370h17q26 0 44.5 18.5T951-232v160q0 26-18.5 44.5T888-9H728q-26 0-44.5-18.5T665-72v-17H295v17q0 26-18.5 44.5T232-9H72Q46-9 27.5-27.5T9-72Zm286-143h370v-17q0-26 18.5-44.5T728-295h17v-370h-17q-26 0-44.5-18.5T665-728v-17H295v17q0 26-18.5 44.5T232-665h-17v370h17q26 0 44.5 18.5T295-232v17Z"/></svg>`; const text_color = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24"viewBox="0 -960 960 960"width="24"><path d="M175 0q-39 0-67-28T80-95q0-39 28-67.5t67-28.5h610q39 0 67 28.5T880-95q0 39-28 67T785 0H175Zm33-271q-26 0-44.5-18.5T145-334v-82q0-13 4.5-24t14.5-21l353-354 172 172-354 353q-10 10-21 14.5t-24 4.5h-82Zm512-404L549-847l79-79q16-17 39-17t39 17l94 94q16 16 16 38t-16 39l-80 80Z"/>`; const triple = svg`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m7.26,18.97c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11l11.7-11.7c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11l-11.7,11.7Z" style="stroke-width:0" /><path d="m11.25,20.13c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11l8.87-8.87c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11l-8.87,8.87Z" style="stroke-width:0" /><path d="m6.1,14.98c-.31.31-.68.46-1.11.46s-.81-.15-1.11-.46-.46-.68-.46-1.11.15-.81.46-1.11L12.75,3.87c.31-.31.68-.46,1.11-.46s.81.15,1.11.46.46.68.46,1.11-.15.81-.46,1.11L6.1,14.98Z" style="stroke-width:0" /><rect height="24" style="fill:none;stroke-width:0" width="24" /></svg>`; const underline = svg`<svg height=24 viewBox="0 -960 960 960"width=24 xmlns="http://www.w3.org/2000/svg"><path d="M240-40q-26 0-44.5-18.5T177-103q0-26 18.5-44.5T240-166h480q26 0 44.5 18.5T783-103q0 26-18.5 44.5T720-40H240Zm240-190q-121 0-192-71t-71-192v-270q0-30 21.5-51.5T290-836q30 0 51.5 21.5T363-763v270q0 54 31.5 85.5T480-376q54 0 85.5-31.5T597-493v-270q0-30 21.5-51.5T670-836q30 0 51.5 21.5T743-763v270q0 121-71 192t-192 71Z"/></svg>`; const undo = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" > <path d="M355-166q-26 0-44.5-18.5T292-229q0-26 18.5-44.5T355-292h230q51 0 87-35.5t36-86.5q0-51-36-87t-87-36H366l39 39q18 18 18 44t-18 44q-18 18-44 18t-44-18L171-555q-9-9-14-21t-5-24q0-12 5-24t14-21l146-145q18-18 44-18t44 18q18 18 18 44t-18 44l-39 39h219q103 0 176 72.5T834-415q0 103-73 176t-176 73H355Z"/></svg>`; const zoom_in = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M332-540h-34q-17 0-28.5-11.5T258-580q0-17 11.5-28.5T298-620h34v-34q0-17 11.5-28.5T372-694q17 0 28.5 11.5T412-654v34h34q17 0 28.5 11.5T486-580q0 17-11.5 28.5T446-540h-34v34q0 17-11.5 28.5T372-466q-17 0-28.5-11.5T332-506v-34Zm40 243q-118 0-200.5-82.5T89-580q0-118 82.5-200.5T372-863q118 0 200.5 82.5T655-580q0 46-12 83.5T611-431l216 217q18 19 18 44.5T826.5-126Q808-108 782-108t-44-18L523-341q-29 20-67.5 32T372-297Zm0-126q66 0 111.5-45.5T529-580q0-66-45.5-111.5T372-737q-66 0-111.5 45.5T215-580q0 66 45.5 111.5T372-423Z"/></svg>`; const zoom_out = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" > <path d="M312-540q-17 0-28.5-11.5T272-580q0-17 11.5-28.5T312-620h120q17 0 28.5 11.5T472-580q0 17-11.5 28.5T432-540H312Zm60 243q-118 0-200.5-82.5T89-580q0-118 82.5-200.5T372-863q118 0 200.5 82.5T655-580q0 46-12 83.5T611-431l216 217q18 19 18 44.5T826-126q-18 18-44 18t-44-18L523-341q-29 20-67.5 32T372-297Zm0-126q66 0 111.5-45.5T529-580q0-66-45.5-111.5T372-737q-66 0-111.5 45.5T215-580q0 66 45.5 111.5T372-423Z"/></svg>`; export default { add: add, arrow: arrow, bold: bold, cursor: cursor, double: double, eraser: eraser, free_pair: free_pair, heptagon: heptagon, hexagon: hexagon, highlight: highlight, italic: italic, lewis: lewis, octagon: octagon, pentagon: pentagon, radical: radical, reactsTo: reactsTo, redo: redo, single: single, skelett: skelett, text_field: text_field, text_color: text_color, triple: triple, underline: underline, undo: undo, zoom_in: zoom_in, zoom_out: zoom_out, };