<!-- 
Full tutorial available here:

https://www.propelauth.com/post/drawing-a-turkey-with-css
 
-->
<div id="root"></div>

.container {
    position: relative;
    /* Add margin to the top so it isn't right against the top of the screen */
    margin: 32px auto auto;
    width: 500px;
    height: 500px;
    /* Add a border for debugging, remove later on */
    border: 1px solid green;
}

.circle {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #5A391E;
    border-radius: 50%;
}

.head {
    position: absolute;
    top: 16.5%;
    left: 35%;
    width: 30%;
    height: 30%;
    background: #5A391E;
    border-radius: 50%;
    z-index: 0;
}

.eye {
    position: absolute;
    /* The eye shouldn't be a perfect circle, 
       so we make the height slightly larger */
    width: 25%;
    height: 31%;
    /* The eyes are aligned vertically.
       Note that this position is relative to the head div not the container div */
    top: 25%;
    background: white;
    border-radius: 50%;
    /* It needs to be displayed in front of the head, so add a larger z-index */
    z-index: 10;
}

.eye-left {
    left: 25%;
}

.eye-right {
    right: 25%;
}

.pupil {
    position: absolute;
    width: 35%;
    height: 31%;
    top: 25%;
    left: 35%;
    background: black;
    border-radius: 50%;
}

.pentagon {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #5A391E;
    /* These make up the vertices of a pentagon */
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.beak {
    position: absolute;
    top: 40%;
    left: 35%;
    width: 30%;
    height: 30%;
    background: #FEE05F;
    /* Hand drawn with <3 */
    clip-path: polygon(7% 36%, 40% 90%, 44% 95%, 47% 96%, 50% 96%, 55% 95%, 60% 90%, 94% 36%, 95% 30%, 95% 26%, 90% 23%, 86% 20%, 77% 18%, 10% 20%, 6% 22%, 4% 26%, 4% 31%);
    z-index: 6;
}

.body {
    position: absolute;
    top: 37%;
    left: 25%;
    width: 50%;
    height: 55%;
    background: #5A391E;
    border-radius: 50%;
    z-index: 5;
}

.base-feather {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    clip-path: ellipse(25% 40% at 50% 50%);
    background: red;
}

.rotated-feather {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    clip-path: ellipse(25% 40% at 50% 50%);
    background: orange;
    rotate: 90deg;
}

.feather {
    position: absolute;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 100%;
    clip-path: ellipse(15% 25% at 50% 25%);
    z-index: -1;
}

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'


const FEATHER_COLORS = ['#D63420', '#E26831', '#FCAF2C']

function Turkey() {
    const feathersRotationDegrees = [-90, -75, -60, -45, -30, -15, 0, 15, 30, 45, 60, 75, 90]

    return <div className="container">
        <div className="head">
            <div className="eye eye-left">
                <div className="pupil"/>
            </div>
            <div className="eye eye-right">
                <div className="pupil"/>
            </div>
            <div className="beak"/>
        </div>
        <div className="body"/>
        {feathersRotationDegrees.map((degree, i) => (
            <div key={degree} className="feather" style={{
                rotate: `${degree}deg`,
                background: `${FEATHER_COLORS[i % FEATHER_COLORS.length]}`
            }}/>
        ))}
    </div>
}


ReactDOM.render(<Turkey />,
document.getElementById("root"))