reactions.svg

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="117" class="large">
    <defs>
        <style/>
    </defs>
    <style>@keyframes animation-gauge{0%{stroke-dasharray:0 329}}@keyframes animation-rainbow{0%,to{color:#7f00ff;fill:#7f00ff}14%{color:#a933ff;fill:#a933ff}29%{color:#007fff;fill:#007fff}43%{color:#00ff7f;fill:#00ff7f}57%{color:#ff0;fill:#ff0}71%{color:#ff7f00;fill:#ff7f00}86%{color:red;fill:red}}svg{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:14px;color:#777}h2{margin:8px 0 2px;padding:0;color:#0366d6;font-weight:400;font-size:16px}.gauge text,h2 svg{fill:currentColor}section&gt;.field{margin-left:5px;margin-right:5px}.field{display:flex;align-items:center;margin-bottom:2px;white-space:nowrap}.field svg{margin:0 8px;fill:#959da5;flex-shrink:0}.row{display:flex;flex-wrap:wrap}.row section{flex:1 1 0}.column{display:flex;flex-direction:column;align-items:center}#metrics-end,.fill-width{width:100%}.categories,.category{display:flex;align-items:center}.categories{justify-content:space-around;margin-top:4px}.category{flex-direction:column;flex:1 1 0}.gauge{stroke-linecap:round;fill:none}.gauge.info{color:#58a6ff}.gauge-arc,.gauge-base{stroke:currentColor;stroke-width:10}.gauge-base{stroke-opacity:.2}.gauge-arc{fill:none;stroke-dashoffset:0;animation-delay:250ms;animation:animation-gauge 1s ease forwards}.gauge text{font-size:40px;font-family:monospace;text-anchor:middle;font-weight:600}.gauge .title{font-size:18px;color:#777}:root{--color-calendar-graph-day-bg:#ebedf0;--color-calendar-graph-day-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-bg:#9be9a8;--color-calendar-graph-day-L2-bg:#40c463;--color-calendar-graph-day-L3-bg:#30a14e;--color-calendar-graph-day-L4-bg:#216e39;--color-calendar-halloween-graph-day-L1-bg:#ffee4a;--color-calendar-halloween-graph-day-L2-bg:#ffc501;--color-calendar-halloween-graph-day-L3-bg:#fe9600;--color-calendar-halloween-graph-day-L4-bg:#03001c;--color-calendar-winter-graph-day-L1-bg:#0a3069;--color-calendar-winter-graph-day-L2-bg:#0969da;--color-calendar-winter-graph-day-L3-bg:#54aeff;--color-calendar-winter-graph-day-L4-bg:#b6e3ff;--color-calendar-graph-day-L4-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L3-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L2-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-border:rgba(27,31,35,0.06)}</style>
    <style/>
    <foreignObject x="0" y="0" width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
            <section>
                <h2 class="field">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"/>
                    </svg>
                    Overall users reactions from last 224 comments
                </h2>
                <div class="row">
                    <section>
                        <div class="row fill-width">
                            <section class="categories">
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <text x="60" y="60" dominant-baseline="central">❤️</text>
                                    </svg>
                                    <span class="title nowrap">
                                        0
                                        <small>
                                            (0
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="265.7307692307692 329"/>
                                        <text x="60" y="60" dominant-baseline="central">👍</text>
                                    </svg>
                                    <span class="title nowrap">
                                        21
                                        <small>
                                            (81
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <text x="60" y="60" dominant-baseline="central">👎</text>
                                    </svg>
                                    <span class="title nowrap">
                                        0
                                        <small>
                                            (0
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="12.653846153846155 329"/>
                                        <text x="60" y="60" dominant-baseline="central">😄</text>
                                    </svg>
                                    <span class="title nowrap">
                                        1
                                        <small>
                                            (4
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="12.653846153846155 329"/>
                                        <text x="60" y="60" dominant-baseline="central">😕</text>
                                    </svg>
                                    <span class="title nowrap">
                                        1
                                        <small>
                                            (4
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="25.30769230769231 329"/>
                                        <text x="60" y="60" dominant-baseline="central">👀</text>
                                    </svg>
                                    <span class="title nowrap">
                                        2
                                        <small>
                                            (8
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="12.653846153846155 329"/>
                                        <text x="60" y="60" dominant-baseline="central">🚀</text>
                                    </svg>
                                    <span class="title nowrap">
                                        1
                                        <small>
                                            (4
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                                <div class="category column">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                                        <circle class="gauge-base" r="53" cx="60" cy="60"/>
                                        <text x="60" y="60" dominant-baseline="central">🎉</text>
                                    </svg>
                                    <span class="title nowrap">
                                        0
                                        <small>
                                            (0
                                            <small>%</small>
                                            )
                                        </small>
                                    </span>
                                </div>
                            </section>
                        </div>
                    </section>
                </div>
            </section>
        </div>
        <div xmlns="http://www.w3.org/1999/xhtml" id="metrics-end"></div>
    </foreignObject>
</svg>