#svg-fill-patterns { @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } } #outputBox { margin: 2rem 0; padding: 2rem; border: 2px solid aliceblue; } .spinner { width: 4px; height: 40px; background-color: darkcyan; animation: 0.75s ease-in-out both alternate infinite spin; } .results_box { margin: 0 0 1rem 0; .property { font-weight: bold; } } #svgOutput { margin: 2rem 0; } svg#barChart { display: block; width: calc(100% - 2px - 2rem); margin: auto; height: auto; border: 1px solid navy; background-color: azure; .bar { fill: #348A78; fill-opacity: 0.8; fill: url(#diagonal-stripe-3); stroke: darkslategray; stroke-width: 1px; } .percentage-bar { fill: #348A78; fill-opacity: 0.75; } } .block { margin: 2rem 0; padding: 2rem 0; border-top: 1px solid cadetblue; } }