Something went wrong. Try again.
WIP WYSIWYG ~3D SVG editor.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329/* Global styles */*, *::before, *::after { box-sizing: border-box; margin: 0; line-height: calc(1em + 0.5rem);}
body { -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg { display: block; max-width: 100%;}
input, button, textarea, select { font: inherit; border: none;}
/* Presets */:root { --charcoal: #333; --raisin: #534; --faded-raisin: #5342; --plum: #636; --rose: #C25; --orange: #E62; --gold: #EA0; --lemon: #ED0; --peach: #FDB; --lace: #FFF4E8; --blueberry: #359; --lime: #4A2; --mint: #CFD;
--roundness: .5rem;}
/* Fonts */body { font-family: "din-2014-rounded-variable", sans-serif; font-variation-settings: "wght" 400; color: var(--raisin);}
/* Toolbar */button { width: 2rem; height: 2rem; border-radius: var(--roundness);
color: var(--raisin); background: var(--lace); box-shadow: 0 0 0 0.25rem transparent;
cursor: pointer; font-size: 0; transition: box-shadow 0.2s, background 0.2s;}
button:first-letter { font-size: 1.5rem; line-height: 2rem; font-variation-settings: "wght" 600;}
button:hover { background: var(--peach); box-shadow: 0 1px 0.25rem 0 color-mix(in srgb, var(--raisin) 10%, transparent);}
menu { position: fixed; left: 0; height: 100vh; padding-left: 1rem; padding-top: 1rem; display: flex; flex-direction: column; gap: .5em;}
menu li { list-style: none;}
main { width: 100vw; height: 100vh;
display: grid; grid-template-columns: 1fr 20rem; grid-template-rows: 20rem 1fr; grid-template-areas: "canvas outliner" "canvas properties";}
/* Canvas */.canvas-container { position: relative; grid-area: canvas;}
.canvas-layer { position: absolute; width: 100%; height: 100%; pointer-events: none;}
#canvas { pointer-events: auto; z-index: 0;}
#canvas { cursor: grab;}
#overlay ~ #canvas:active { cursor: grabbing;}
#canvas > * { cursor: pointer;}
/* Change to pointer when clicking on canvas would deselect elements */#overlay:has(> *) ~ #canvas { cursor: pointer;}
#overlay { opacity: 0.8; z-index: 1;}
/*#overlay:not(:empty) { filter: url(#better-highlight);}*/
#ui { z-index: 2;}
#ui > *, #ui.active { pointer-events: auto; cursor: pointer;}
/* Panels */#properties, #outliner { max-height: 100%; overflow-y: scroll; margin: 1rem; padding: 1rem; background: var(--lace); color: var(--raisin); border-radius: var(--roundness); border: 2px solid var(--raisin); box-shadow: .5px .5px 0 .5px var(--raisin);}
#properties { grid-area: properties; margin-top: .5rem;}
#outliner { grid-area: outliner; margin-bottom: .5rem;}
/* Properties */.prop-group { padding: .5rem; margin: .5rem; border: 2px solid var(--faded-raisin); border-radius: var(--roundness);}
.prop { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;}
.prop h4 { flex-basis: 100%; text-align: center; line-height: 1; margin-top: .5rem;}
.prop.vector label { margin-right: 0 !important;}
.prop.vector input + label { margin-left: .75rem;}
.prop input[type="number"] { width: 1rem; flex-grow: 10;}
.prop input { margin: .25rem 0; padding: .125rem; text-align: center; max-width: 6rem; border: 1px solid var(--raisin); box-shadow: .5px .5px 0 .5px var(--raisin); border-radius: calc( var(--roundness) / 2 );}
#properties label { font-weight: bold; font-size: 1em; margin-right: .25rem; flex-grow: 1;}
#properties.hidden .prop-group,#properties .prop-group:not(:has(:not(.hidden))),#properties .hidden { display: none;}
/* Hide disabled optional properties */#properties .prop.optional input[type="checkbox"]:not(:checked) + input { display: none;}
/* Outliner */#outliner ul { --color: #333; padding-left: 0;}
#outliner li { list-style: none; padding: .1rem .5rem; padding-right: 0; font-size: 1.1rem;}
#outliner .name { display: inline-block; width: 100%;}
#outliner li.selected { background: var(--peach); color: #111; border-radius: var(--roundness);
& > .name { font-weight: bold; color: #000; text-decoration: underline; }}
#outliner .icon { display: inline-block; width: 1rem; height: 1rem; background-color: var(--color); vertical-align: middle; margin-right: .25rem; border-radius: .25rem;}
/* Outliner icons *//*#outliner .icon { clip-path: circle(50%);}
#outliner [data-type] > .name > .icon { width: 32px; height: 32px; transform: scale(0.5); margin: -8px; margin-right: calc( .25rem - 8px );}
#outliner [data-type="Illustration"] > .name > .icon { clip-path: path("M30.5 6.3c0-1.8.5-5.1-6.9-5.1S2.5.5 1.4 1.6 1 17.4.9 20C.8 33.8.8 30.8 29.4 30.9s.4-21.1 1-24.7zM3.8 3.7c7.1-.1 14.2 0 21.3.6 1.3 7.2 1.4 14.5.4 21.7-7.1-.1-14.2-.3-21.3-.4-.3-6.1-.4-20.7-.4-21.9zm9.3 16.4c-1 .1-2.3.6-3.3.2-1.7-.8-.5-2.5 0-3.6 1.4-2.6 2.4-5.4 3.6-8 0-1.5 2-2 2.8-.7 1.7 2.8 3.5 5.5 5.1 8.4 2.2 4.1-6.1 3.1-8.3 3.8z");}
#outliner [data-type="Cone"] > .name > .icon { clip-path: path("M27.7,22.6c-3.4-5.9-6.4-11.9-9-18.2,0,0,0,0,0,0-.4-.9-.6-2.1-1.8-2.1-4.8-1.4-8.7,12.1-10.9,15.7-.4,2-3.8,4.7-1.8,6.5,3.9,3.3,25,5.9,23.5-1.9ZM10.1,16c1.6-3.6,3.3-7.4,5.8-10.5,2.2,5.2,4.6,10.2,7.3,15.1-4.8-1.3-10.1-1.7-14.9-.6.6-1.3,1.2-2.7,1.8-4Z");}#outliner [data-type="Shape"] > .name > .icon { clip-path: path("M26.58 5.2c-2.01-5-9.77-1.5-8.26 3.29-9.06 2.82.9 13.49-6.37 15.01 1.51-6.12-7.26-9.07-8.02-2.1-.24 2.47 1.45 4.4 4.36 4.16 9 .93 9.75-1.72 8.85-10.88-.25-2.54 1.82-4.02 3.15-3.98 2.39.69 8.54-.26 6.29-5.5zM6.61 22.66c-1.14-2.55 2.18-3.31 2.7-1.4.45 1.64-1.84 2.96-2.7 1.4zM24.54 7.08c.46 1.93-3.4 2.59-3.73.65-.41-2.39 2.91-4.06 3.73-.65z");}*/
/* Footer *//* Animation */@keyframes toast { 0% { transform: translateY(100%); } 10%, 90% { transform: translateY(0); } 100% { transform: translateY(100%); }}footer { display: inline-block; position: fixed; bottom: 0; left: 0; padding: .25rem; background: var(--lace); color: var(--raisin); border-top-right-radius: .25rem; animation: toast 5s; animation-delay: 2s; transform: translateY(100%);}