svg-parse-path-normalized/demos/style.css

Parse svg path data from string and normalize it to calculable value arrays

        
        :root {
            --color1: hsl(193, 23%, 45%);
            --colorBG: #333;
        }

        body {
            font-family: 'Fira Sans', 'Segoe UI', sans-serif;
            background-color: var(--colorBG);
            color: #fff;
            margin: 0;
            padding: 0;
            font-size:1em;
            line-height:1.3em;
            letter-spacing: 0em;
        }

        h1,
        h2,
        h3,
        p {
            margin: 0;
            margin-bottom: 1rem;
        }

        * {
            box-sizing: border-box;
        }

        ::selection {
            background: var(--color1)
        }

        ::-webkit-scrollbar {
            width: 0.5em;
            border-radius: 0.5em;
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #aaa;
            border-radius: 0.5em;
        }

        ::-webkit-scrollbar-track {
            border-radius: 0.5em;
        }


        a {
            color: inherit;
            text-decoration: none;
        }


        .bck-wht {
            background-color: #fff
        }

        label {
            display: inline-block;
        }

        select{
            width: 100%;
            height:2em;
            display:block;
            font-family:inherit;

            background-color:var(--colorBG);
            color: #fff;
            border: 1px solid #fff;
            padding:0.3em;
            appearance: none;
            background-size: 1.25em;
            background-position: 100% 0.3em;
            background-repeat: no-repeat;
            background-image: var(--icon-select);

            background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 100' id='icn-chevron-double-down' style='color:%2358828d; stroke-width:10px'><path fill='none' stroke='currentColor' d='M85 32l-37.5 37.5l-37.5-37.5' pathLength='100' /></svg>");


        }
        textarea {
            font-family:'Fira Code', monospace;
            width: 100%;
            min-height: 20em;
            max-height: 100%;
            border-color: transparent;
            /*
            border-left: 4px solid var(--color1);
            padding-left: 1rem;
            */
            white-space: pre-wrap;
            resize: vertical;
            flex: 1;
            background-color: inherit;
            color: #fff;
            transition: 0.3s;

            background:#222;
            border-radius:0.5em;
            

        }

        textarea:focus {
            outline: 1px dotted var(--color1);

        }

        input[type="number"] {
            width: 6ch;
            transform: translateY(-0.1em);
            border-radius: 0.333em;
        }

        input[type="number"]::-webkit-inner-spin-button {
            opacity: 1;
        }

        .btn-default{
            background-color: var(--color1);
            padding: 0.3em;
            color:#fff;
            display:block;
            margin:0.5rem 0;
        }



        .brd-rad{
            border-radius: 0.3em;
        }

        svg {
            display: block;
            height: 100%;
            width: auto;
            margin: 0 auto;
            overflow:visible;
        }

        .icn-svg{
            display:inline-block;
            height:1em;
            transform: translateY(0.2em);
        }

        .icn-stroke{
            stroke-width:8px
        }

        .showMarkers
        path {
            marker-start: url(#markerStart);
            marker-mid: url(#markerRound);
            stroke-width: 0.25% !important;
          }


        .grd {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
            height: 100vh;
        }



        fieldset {
            display: flex;
            flex-direction: column;
            margin: 0;
            margin-top: 1rem;
            padding-left: 0;
            padding-right: 0;
            padding-top: 1rem;
            border: none;
            border-top: 0.7em solid var(--color1)
        }

        legend {
            padding: 0;
            margin: 0;
            margin-left: 0rem;
            margin-right: 1rem;
            padding-left: 0rem;
            padding-right: 0.5rem;
            font-weight: 700;
        }


        @media (min-width:1000px) {
            .grd {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 2fr;
            }

            fieldset{
                padding-left: 0;
            }

            
            .grd>
            fieldset:first-of-type {
                margin-left: 1rem;
            }
            

            fieldset:last-of-type {
                margin-right: 1rem;
                padding-right: 0;
            }

        }