Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="team" viewBox="0 0 123 123"> <circle class="x1" fill="currentColor" cx="19.5" cy="12.2" r="12.1"/> <path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/> <circle class="x2" tyle="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/> <path class="x3" tyle="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/> <path class="x4" tyle="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/> <circle class="x5" cx="61.4" cy="26" r="13.9"/> </symbol> </defs> </svg>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
a {display: inline-block;} svg {fill: currentColor} @keyframes normal { from {fill: #000;} to {fill: #fff;} } @keyframes normal { from {fill: #000;} to {fill: #fff;} } @-webkit-keyframes hover { from {fill: #000;} to {fill: #fff;} } @-webkit-keyframes hover { from {fill: #000;} to {fill: #fff;} } .x1, .x2, .x3, .x4, .x5 {-webkit-animation: normal 3s infinite; animation: normal 3s infinite;} svg:hover .x1, svg:hover .x2, svg:hover .x3, svg:hover .x4, svg:hover .x5 {-webkit-animation: hover 3s infinite; animation: hover 3s infinite;} .x1 {color: #f00;} .x2 {fill: #f0f;} .x3 {fill: #0f0;} .x4 {fill: #ff0;} .x5 {fill: #00f;} a:hover .x1 {color: #000;} a:hover .x2 {fill: #000;} a:hover .x3 {fill: #000;} a:hover .x4 {fill: #000;} a:hover .x5 {fill: #000;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>