<div class="wrapper">
    <svg class="bubbles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300px" width="300px" fill="#000000" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M52.335,14.359c-4.587,0-8.284,3.598-8.284,8.095c0,4.47,3.697,8.151,8.284,8.151c4.56,0,8.313-3.682,8.313-8.151   C60.647,17.957,56.895,14.359,52.335,14.359L52.335,14.359z M52.335,15.905c3.698,0,6.7,2.923,6.7,6.549s-3.002,6.605-6.7,6.605   c-3.725,0-6.699-2.979-6.699-6.605S48.61,15.905,52.335,15.905L52.335,15.905z M52.335,16.776c-3.169,0-5.782,2.53-5.782,5.678   c0,0.422,0.39,0.815,0.806,0.815c0.39,0,0.779-0.394,0.779-0.815c0-2.276,1.834-4.104,4.197-4.104   c0.39,0.028,0.778-0.365,0.778-0.787C53.113,17.143,52.725,16.776,52.335,16.776L52.335,16.776z M37.823,38.082   c-4.559,0-8.229,3.598-8.229,8.096c0,4.469,3.67,8.151,8.229,8.151c4.588,0,8.313-3.683,8.313-8.151   C46.136,41.68,42.411,38.082,37.823,38.082L37.823,38.082z M37.823,39.628c3.726,0,6.729,2.924,6.729,6.55   c0,3.625-3.003,6.605-6.729,6.605c-3.697,0-6.672-2.98-6.672-6.605C31.151,42.552,34.126,39.628,37.823,39.628L37.823,39.628z    M37.851,40.5c-3.168,0-5.781,2.558-5.781,5.705c0,0.422,0.361,0.787,0.777,0.787c0.418,0,0.807-0.365,0.807-0.787   c0-2.276,1.863-4.132,4.197-4.132c0.418,0.028,0.807-0.365,0.807-0.787C38.657,40.865,38.269,40.5,37.851,40.5L37.851,40.5z    M58.284,61.777c-6.699,0-12.148,5.368-12.148,11.945s5.449,11.918,12.148,11.918c6.7,0,12.121-5.341,12.121-11.918   S64.984,61.777,58.284,61.777L58.284,61.777z M58.284,63.352c5.839,0,10.509,4.638,10.509,10.371   c0,5.734-4.67,10.344-10.509,10.344c-5.838,0-10.508-4.609-10.508-10.344C47.776,67.989,52.446,63.352,58.284,63.352L58.284,63.352   z M58.284,65.487c-4.587,0-8.34,3.683-8.34,8.235c0,0.422,0.361,0.787,0.778,0.787s0.807-0.365,0.778-0.787   c0-3.653,3.003-6.661,6.783-6.661c0.417,0.028,0.779-0.365,0.779-0.787S58.701,65.487,58.284,65.487L58.284,65.487z"></path></g></svg>
    <svg class="c-fish" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300px" width="300px" xml:space="preserve" version="1.1" viewBox="0 0 716 465" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">
        </style></defs><g><path class="fil0" d="M592 233c32,9 120,71 124,142 -75,-4 -182,-31 -204,-97 -13,39 -34,61 -136,101 16,29 33,58 50,86 -66,1 -123,-22 -163,-69 -131,8 -232,-77 -263,-163 31,-86 132,-172 263,-163 40,-48 97,-70 163,-70 -17,29 -34,58 -50,86 102,40 123,62 136,102 22,-66 129,-94 204,-97 -4,70 -92,133 -124,142zm-496 -69c17,0 31,14 31,31 0,17 -14,31 -31,31 -17,0 -31,-14 -31,-31 0,-17 14,-31 31,-31z"></path></g></svg>
    <svg class="c-fish c-fish-left " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300px" width="300px" xml:space="preserve" version="1.1" viewBox="0 0 716 465" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">
        </style></defs><g><path class="fil0" d="M592 233c32,9 120,71 124,142 -75,-4 -182,-31 -204,-97 -13,39 -34,61 -136,101 16,29 33,58 50,86 -66,1 -123,-22 -163,-69 -131,8 -232,-77 -263,-163 31,-86 132,-172 263,-163 40,-48 97,-70 163,-70 -17,29 -34,58 -50,86 102,40 123,62 136,102 22,-66 129,-94 204,-97 -4,70 -92,133 -124,142zm-496 -69c17,0 31,14 31,31 0,17 -14,31 -31,31 -17,0 -31,-14 -31,-31 0,-17 14,-31 31,-31z"></path></g></svg>
    <ul id="ul">
        <li>Christopher</li>
        <li>Winnie</li>
        <li>Tigger</li>
        <li>Kanga</li>
        <li>Just rabbit.</li>
    </ul>
    <div class="pantone">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300px" width="300px" version="1.1" x="0px" y="0px" viewBox="0 0 100 67" enable-background="new 0 0 100 100" xml:space="preserve" style="
    fill: white;
    position: absolute;
    top: -339px;
    right: -136px;
    transform: rotate(8deg);
    width: 340px;
    height: 340px;
"><path d="M37.92,36.035c-0.209-1.427-0.245-2.865-0.108-4.273c0.209-2.148,1.232-4.501,3.129-7.193  c0.317-0.452,0.942-0.56,1.394-0.241c0.451,0.318,0.56,0.942,0.241,1.394c-1.691,2.4-2.599,4.44-2.773,6.234  c-0.123,1.266-0.091,2.505,0.097,3.79c0.08,0.547-0.298,1.055-0.845,1.134c-0.049,0.007-0.098,0.011-0.146,0.011  C38.42,36.89,37.992,36.532,37.92,36.035z M51.785,39.467c-0.494,0.247-0.694,0.848-0.447,1.342c1.726,3.453,3.682,7.366,3.427,11.7  c-0.182,3.095-1.654,6.268-3.147,9.253c-0.247,0.494-0.047,1.095,0.447,1.342c0.144,0.071,0.296,0.105,0.446,0.105  c0.367,0,0.72-0.202,0.896-0.553c1.586-3.171,3.151-6.557,3.354-10.03c0.286-4.868-1.796-9.035-3.634-12.712  C52.881,39.42,52.28,39.22,51.785,39.467z M46.953,68.874c0.898,1.576,1.522,2.978,1.917,3.988c0.958-2.19,2.145-4.211,2.985-5.538  c-0.446-1.331-1.126-2.92-2.141-4.648c-1.689-2.427-4.08-4.516-5.016-5.292c-0.2-0.143-0.381-0.277-0.468-0.364  c-3.984-4.037-2.952-9.699-1.677-13.287c-1.262-2.824-1.949-4.776-2.314-5.988C32.667,49.74,35.309,56.137,41.66,62.07  c0.063,0.063,0.12,0.123,0.18,0.184C42.903,63.093,45.137,65.167,46.953,68.874z M43.617,43.654c0.054,0.111,0.11,0.231,0.163,0.342  c1.42,2.89,2.76,5.622,2.62,8.462c-0.05,1.085-0.542,2.465-1.243,4.007c0.728,0.588,2.916,2.437,4.725,4.759  c1.562-3.104,2.934-6.052,3.098-8.824c0.22-3.85-1.54-7.38-3.24-10.79c-1.44-2.88-2.8-5.6-2.8-8.21c0-2.86,2.63-6.34,5.16-9.69  c2.49-3.28,4.83-6.38,5.14-9.28c0.22-2.11-0.22-3.72-1.32-4.76c-1.59-1.5-3.85-1.3-3.96-1.27c-0.83,0.05-1.38,0.56-1.67,0.87  c-0.72,0.8-0.62,1.9-0.61,2.03c0.06,0.54,0.56,0.93,1.09,0.88c0.54-0.05,0.94-0.54,0.9-1.08c-0.01-0.14,0.02-0.4,0.11-0.49  c0.07-0.07,0.24-0.08,0.32-0.08c0.33,0,0.67,0.23,0.92,0.61c0.53,0.84,0.47,2.16-0.17,3.54c-0.31,0.661-1.095,1.641-2.076,2.761  l0.011,0.01l-7.299,8.472c-1.52,2.101-2.661,4.202-2.846,6.108C40.503,33.425,40.601,35,40.824,36h0.003  C40.831,36,41.215,38.339,43.617,43.654z M47.17,9.36c-1.54-2.51-3.76-4.21-6.24-4.77c-0.53-0.12-1.08,0.11-1.36,0.57  c-0.28,0.46-0.24,1.05,0.11,1.47c5.201,6.273,5.266,13.22,4.946,16.437l4.69-5.443C49.34,14.555,48.623,11.716,47.17,9.36z   M61.91,51.55c0.07-0.48-0.18-0.95-0.61-1.17c-0.44-0.22-0.97-0.14-1.34,0.23c-2.001,2.108-2.801,4.941-2.477,8.594  c1.314-1.729,3.362-4.68,4.409-7.498C61.899,51.654,61.902,51.603,61.91,51.55z M68,84h-2.24c3.16-4.65,2.67-12.22-1.55-19.21  c-0.126-0.213-0.242-0.431-0.358-0.649c-1.527,2.389-2.724,4.753-3.285,5.979c0.084,0.215,0.169,0.436,0.253,0.65  c0.88,2.22,1.64,4.13,1.77,5.3C62.96,79.3,61,82.6,60.03,84h-1.35c-0.88-1.58-2.13-5.02-0.65-10.43  c0.293-1.066,0.823-2.253,1.471-3.516c0.55-1.259,2.046-4.286,4.011-7.219c1.669-3.106,3.22-6.472,3.898-10.065  c0.71-3.76,0.27-6.63-1.31-8.54c-0.89-1.07-2.07-2.03-3.85-2.18c-1.56-0.13-3.03,0.88-3.07,2.51c-0.02,0.92,0.42,1.98,1.32,2.2  c0.53,0.14,1.08-0.19,1.21-0.73c0.12-0.44-0.09-0.9-0.48-1.11c-0.09-0.05-0.06-0.39-0.03-0.47c0.04-0.16,0.17-0.29,0.33-0.34  c0.2-0.07,0.42-0.04,0.63,0c1.52,0.35,1.74,2.64,1.71,3.89c-0.02,0.88-0.17,1.75-0.38,2.6c-0.192,0.716-0.604,1.641-1.172,2.691  c-1.45,3.185-3.776,6.23-4.789,7.484c-0.431,0.631-0.869,1.262-1.299,1.875c-0.874,1.266-1.723,2.492-2.517,3.667l0.006,0.005  c-0.035,0.049-3.031,4.294-4.564,8.531c-0.577,1.895-0.813,3.61-0.876,4.928c-1.03-1.33-1.92-2.99-2.44-5.06  c-0.396-1.598-0.192-3.341,0.335-5.152c-1.548-3.261-3.463-5.248-4.572-6.207c-1.84,3.557-3.41,7.098-3.253,10.119  c0.23,4.58,2.39,8.15,4.95,10.52h-2.5c-0.39-1.23-1.47-3.13-4.23-5.84c-3.61-3.55-4.12-6.51-1.73-10.19  c2.55-3.92,2.61-9.02,0.16-12.12c-0.32-0.41-0.86-0.56-1.34-0.37c-0.49,0.18-0.79,0.66-0.76,1.18c0.22,3.74-0.75,7.33-2.74,10.11  c-3.66,5.12-3.52,9.78,0.36,12.78c2.98,2.29,3.65,3.59,3.68,4.27c0,0.05,0,0.12-0.01,0.18H31c-0.55,0-1,0.45-1,1s0.45,1,1,1h37  c0.55,0,1-0.45,1-1S68.55,84,68,84z">
            </svg>
            <p>Pantone</p>
            <p>Living Coral</p>
            <p>16-1546</p>
            </div>
    </div>



    <h2>Click on a list item to select it.
        <small>Hold Ctrl to multiselect</small>
    </h2>

:root {
    --coral: #FF6F61;
}

body {
    background: var(--coral);
    color: white;
    font-family: 'Gothic A1', sans-serif;
    margin: 6rem;
    font-size: 15px;
}

h2 {
    margin: 5em 0 .2em 0;
    letter-spacing: -.04em;
    color: white;
    display: inline-block;
    font-weight: 800;
    text-align: center;
    position: relative;
    small {
        font-size: 60%;
        color: white;
        position: absolute;
        font-weight: 800;
        right: 0;
        bottom: -20px;
        letter-spacing: -.02em;
        border-top: 2px solid hsla(0, 0%, 100%, .25);
        padding-top: 0.3em;
    }
}

.wrapper {
    padding: 0;
    width: 380px;
    box-sizing: border-box;
    margin: 0 auto;
    box-shadow: 0 20px 100px hsla(0, 0%, 0%, .18);
    margin-top: -1px;
    position: relative;
    .bubbles {
        transform: rotate(-180deg);
        fill: white;
        width: 170px;
        top: -140px;
        right: 27px;
        position: absolute;
    }

    .c-fish {
        position: absolute;
        fill: white;
        width: 84px;
        height: 84px;
        right: -180px;
        top: 22px;
    }
    .c-fish-left {
        fill: white;
        left: -216px;
        top: 240px;
        width: 140px;
        height: 140px;
        transform: rotate3d(0, 1, 0, 3.142rad);
    }
    ul {
        list-style: none;
        padding: 0;
        box-sizing: border-box;
        margin: 0;
        border: 10px solid;
        li {
            cursor: pointer;
            padding: .6em .8em .45em 2.8em;
            font-size: 23px;
            font-weight: 700;
            transition: all 200ms ease;
            position: relative;
            letter-spacing: -.04em;
            line-height: 1.5;
            z-index: 9999;
            overflow: hidden;
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, hsla(0, 0%, 100%, .8), transparent);
                position: absolute;
                left: 0;
                top: 0;
                transform: translateX(-380px);
                transition: all 500ms cubic-bezier(0.175, 0.885, 0.335, 1);
                z-index: -1;
            }
            &::after {
                content: "";
                display: block;
                width: 24px;
                height: 24px;
                background: white;
                position: absolute;
                left: 17px;
                top: 17px;
                transition: all 200ms ease;
                border-radius: 33% 67% 65% 35% / 46% 62% 38% 54%;
            }
        }
    }
    .pantone {
        background: white;
        color: var(--coral);
        font-size: 57px;
        font-weight: 900;
        padding: .45em .7em .5em;
        letter-spacing: -.04em;
        position: relative;
        svg {
            fill: white;
            position: absolute;
            top: -339px;
            right: -136px;
            transform: rotate(8deg);
            width: 340px;
            height: 340px;
        }
        p {
            margin: 0;
            &:nth-of-type(1) 
            {text-transform: uppercase;font-size: 52px}
            &:nth-of-type(2)
            {font-weight: 700}
            &:nth-of-type(3)
            {font-size: 31px;margin-top: .2em;letter-spacing: 0}
        }
    }
}

.selected {
    //background: linear-gradient(to right, hsla(0, 0%, 100%, .4), transparent);
    color: hsl(5, 27%, 30%);
    &::before {
        transform: translateX(0) !important;
    }
    &::after {
        background: var(--coral) !important;
    }
}

function selectElement(e) {
    if (e.target.tagName !== 'LI') return;
    if (e.ctrlKey || e.metaKey) {
        e.target.classList.toggle('selected');
    } else {
        let selected = ul.querySelectorAll('.selected');
        selected.forEach(li => li.classList.remove('selected'));
        e.target.classList.add('selected')
    }
}

ul.onmousedown = function() { return false }
ul.addEventListener('click', selectElement);