@maximeij/react-csstick/lib/react-csstick.css

CSS Stick figures and comics

div.bubble{border-radius:var(--br);border:var(--t) solid var(--bc, transparent);position:absolute!important;width:fit-content;height:fit-content;background-color:var(--bgc, transparent);padding:calc(var(--t, 1px) * 2)}.text{text-align:center;font-family:var(--f, Comic Sans MS, Comic Sans, cursive);font-size:var(--fs, calc(var(--bh) * .5));font-weight:var(--fw, normal);color:var(--c, #888);white-space:pre}.stick{width:var(--w);height:var(--h);background-color:transparent;padding:0;--bh: calc(var(--h) * .29);position:absolute;transition:all .25s ease-in-out}.stick div{box-sizing:content-box;position:relative}.head{margin:0 auto;--d: calc(var(--h) * .3);width:var(--d);height:var(--d);border:var(--t) solid var(--c);border-radius:50%;font-size:smaller;background-color:var(--bgc, transparent)}.body{top:calc(-.35 * var(--t))}.body,.body:after{margin:0 auto;--sh: var(--bh);height:var(--sh)}.body,.body div{background-color:transparent;border:0;--bw: var(--t);width:var(--bw)}.body:after,.body>div div:after{content:"";position:absolute;left:0;top:0;background-color:var(--c);width:var(--bw);height:var(--sh, 100%);border-radius:var(--t)}.body>div{margin:0 auto;width:0;height:0}.arms{top:max(calc(var(--bh) * .05),calc(var(--t) * 1.75))}.legs{top:calc(var(--bh) - calc(var(--t) * .5))}.arms div,.legs div{display:block;transform-origin:top center}.arms>div,.legs>div{position:absolute;top:0;left:calc(-.5 * var(--t));--s1h: calc(var(--bh) * .7);--sh: var(--s1h);height:var(--s1h);transform:rotate(var(--angle-0, var(--base-0)))}.arms>div:last-child,.legs>div:last-child{left:calc(-1 * var(--t));transform:scaleX(-1) rotate(var(--angle-0, var(--base-0))) translate(calc(-.5 * var(--t)))}.arms>div>div,.legs>div>div{top:calc(var(--s1h) - calc(var(--t) * .5));left:0;--s2h: calc(var(--bh) * .7);--sh: var(--s2h);height:var(--s2h);transform:rotate(var(--angle-1, var(--base-1)))}.arms>div>div>div,.legs>div>div>div{top:calc(var(--s2h) - calc(var(--t) * .5));left:0;--s3h: calc(var(--bh) * .2);--sh: var(--s3h);height:var(--s3h);transform:rotate(var(--angle-2, var(--base-2)))}.sketch{--sbr: 54% 44% 51% 47% / 41% 49% 58% 50%;--scp: polygon(20% 0, 80% 0, 68% 25%, 65% 50%, 66% 75%, 80% 100%, 20% 100%, 8% 75%, 5% 50%, 8% 25%);--scp2: polygon(20% 0, 80% 0, 92% 25%, 95% 50%, 92% 75%, 80% 100%, 20% 100%, 32% 75%, 35% 50%, 32% 25%)}.sketch .head{border-radius:var(--sbr)}.sketch .body:after,.sketch .body div:after{clip-path:var(--scp)}.sketch .body>div>div div:after{clip-path:var(--scp2)}.comic{width:var(--w, 100%);height:var(--h, 100%);position:relative;border:var(--t, 2px) solid var(--c, #888888);overflow:hidden;background-color:var(--bgc, transparent);box-sizing:content-box}.row{display:flex;flex-direction:row;flex-wrap:wrap}.row>span{display:contents}.scene{width:var(--w, 100%);height:var(--h, 100%);position:relative;border:var(--t, 2px) solid var(--c, #888888);margin:auto;overflow:hidden;background-color:var(--bgc, transparent);box-sizing:border-box}