JSFiddle - React, Tailwind, and code Playground
by Muhammad Nugroho
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rollo — Shiny Demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/screen.css">
<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000">
<g id="mascot">
<title>O Dev Rel Viking</title>
<desc>An SVG mascot for Opera Developer Relations Team</desc>
<use x="437.5" y="50" xlink:href="#face"/>
<use x="462.5" y="100" xlink:href="#eye"/>
<use x="512.5" y="100" xlink:href="#eye"/>
<use x="425" y="150" xlink:href="#beard"/>
<use x="475" y="200" xlink:href="#mouth"/>
<use x="425" y="80" xlink:href="#helmet"/>
<use x="325" y="250" xlink:href="#body"/>
<use x="325" y="450" xlink:href="#belt"/>
<use x="375" y="650" xlink:href="#leg"/>
<use x="375" y="850" xlink:href="#foot"/>
<use x="525" y="650" xlink:href="#leg"/>
<use x="525" y="850" xlink:href="#foot"/>
<use x="245" y="250" xlink:href="#arm"/>
<use x="675" y="250" xlink:href="#arm" transform="rotate(180 715 377.5)"/>
<use x="200" y="240" xlink:href="#flower"/>
<use x="255" y="425" xlink:href="#fist"/>
<use x="675" y="450" xlink:href="#shield"/>
<use x="508" y="295" xlink:href="#o"/>
</g>
<!--my library-->
<defs>
<!-- face -->
<rect id="face" x="0" y="0" width="125" height="200" fill="#E6B8A1"/>
</defs>
<defs>
<!-- beard -->
<path id="beard" d="M 0 0 L 0 100 L 150 100 L 150 0 L 100 0 L 100 25 L 50 25 L 50 0z" fill="#4A310C"/>
</defs>
<defs>
<!-- eye -->
<rect id="eye" x="0" y="0" width="25" height="25" fill="#000000"/>
</defs>
<defs>
<!-- mouth -->
<rect id="mouth" x="0" y="0" width="50" height="25" fill="#f2c4d6"/>
</defs>
<defs>
<!-- helmet -->
<g id="helmet">
<use x="148" y="-80" xlink:href="#horn"/>
<use x="-2" y="-130" xlink:href="#horn" transform="translate(0 50) matrix(-1 0 0 1 0 0)"/>
<path d="M 0 0 L 150 0 A75, 75 0 0,...