Flexbox and SVG traffic light


by Jeremy Caudle
code

I learned about using the currentcolor keyword within SVG. It's a pretty handy keyword that allows you to pass color values from CSS into paths into SVG. I still have more to learn about it and its best uses, but it was neat to learn about it.

View the code:

HTML and JS 
<section class="code-block">
            <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" hidden class="hide" aria-hidden="true">
                <symbol viewBox="0 0 50 50" id="test">
                    <circle r="20" cx="25" cy="25" stroke="currentcolor" stroke-width="5" />
                </symbol>
            </svg>
                <svg><use href="#test" class="circle-one"></use></svg>
                <svg><use href="#test" class="circle-two" ></use></svg>
                <svg><use href="#test" class="circle-three"></use></svg>
        </section>
CSS 
section.code-block { 
                display: flex;
                flex-flow: column; 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: black;
                z-index: 1;
                padding: 1rem;
                max-width: 160px;
                margin: 1rem auto;
            }
            .hide {
                display: none;
            }
            .circle-one {
                fill: red;
                color: rgb(184, 0, 0); 
            }
            .circle-two {
                fill: yellow;
                color: rgb(223, 223, 0); 
            }
            .circle-three {
                fill: rgb(0, 121, 6);
                color: rgb(0, 95, 5); 
            }

Tags