SVG JTB Circle
✨ Jabont
<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <title>Jabont </title> <style> body{ background:#eee; font-family:sans-serif; display:flex; justify-content:center; align-items:center; margin:0; text-align:center; } svg{ background:white; /* width:90%; */ min-width:100%; position:absolute; left:0; top:0; } #tontoei{ fill:hsl(270,100%,55%); fill:url(#grad1); opacity:.8; fill:url(#grad6); } #pa{ fill:hsl(180,100%,55%); fill:url(#grad1); fill:url(#grad3); /* fill:url(#grad5); */ opacity:.9; /* opacity:0; */ } #jabont{ fill:hsl(360,100%,55%); fill:url(#grad2); fill:url(#grad4); /* fill:url(#grad6); */ opacity:.9; /* opacity:0; */ } </style> </head> <body> <svg viewBox="-10.04 -29.96 40 40"> <g id="grid"> <g id="line" stroke-width=".2" stroke="#00f0"> <svg y="0"> <path d="M0,0 h30"/> </svg> <svg y="-1"> <path d="M0,0 h30"/> </svg> <svg y="-2"> <path d="M0,0 h30"/> </svg> <svg y="-3"> <path d="M0,0 h30"/> </svg> <svg y="-4"> <path d="M0,0 h30"/> </svg> <svg y="-5"> <path d="M0,0 h30"/> </svg> <svg y="-6"> <path d="M0,0 h30"/> </svg> <svg y="-7"> <path d="M0,0 h30"/> </svg> <svg y="-8"> <path d="M0,0 h30"/> </svg> <svg y="-9"> <path d="M0,0 h30"/> </svg> <svg y="-10"> <path d="M0,0 h30"/> </svg> <svg y="-11"> <path d="M0,0 h30"/> </svg> <svg y="-12"> <path d="M0,0 h30"/> </svg> <svg y="-13"> <path d="M0,0 h30"/> </svg> <svg y="-14"> <path d="M0,0 h30"/> </svg> <svg x="0" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="1" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="2" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="3" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="4" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="5" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="6" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="7" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="8" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="9" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="10" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="11" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="12" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="13" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="14" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="15" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="16" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="17" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="18" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="19" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="20" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="21" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="22" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="23" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="24" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="25" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="26" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="27" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="28" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="29" y="-14"> <path d="M0,0 v14"/> </svg> <svg x="30" y="-14"> <path d="M0,0 v14"/> </svg> </g> <mask id="myMask"> <circle fill="white" r="9.96" cx="12" cy="-12"/> </mask> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(190,100%,50%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(270,100%,50%);;stop-opacity:1" /> </radialGradient> <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(350,100%,50%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(270,100%,50%);stop-opacity:1" /> </radialGradient> </defs> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="75%"> <stop offset="0%" style="stop-color:hsl(180,100%,50%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(270,100%,50%);stop-opacity:1" /> </linearGradient> <linearGradient id="grad4" x1="0%" y1="0%" x2="0%" y2="45%"> <stop offset="0%" style="stop-color:hsl(360,100%,50%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(270,100%,50%);stop-opacity:1" /> </linearGradient> </defs> <defs> <linearGradient id="grad5" x1="0%" y1="0%" x2="0%" y2="75%"> <stop offset="0%" style="stop-color:hsl(270,100%,50%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(180,100%,50%);stop-opacity:1" /> </linearGradient> <linearGradient id="grad6" x1="0%" y1="0%" x2="0%" y2="45%"> <stop offset="0%" style="stop-color:hsl(270,100%,50%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(360,100%,50%);stop-opacity:1" /> </linearGradient> </defs> <circle fill="white" r="9.96" cx="12" cy="-12"/> <g mask="url(#myMask)"> <!-- <circle id="tontoei" r="9.96" cx="12" cy="-12"/> --> <!-- <circle id="tontoei" r="8" cx="12" cy="-10"/> --> <circle id="pa" r="9.95" cx="6" cy="-7"/> <circle id="jabont" r="9.995" cx="24" cy="-2"/> </g> <!-- <circle id="" r=".25" cx="6" cy="-7" fill="#f00"/> --> <!-- <circle id="" r=".25" cx="12" cy="-12" fill="#0f0"/> --> <!-- <circle id="" r=".25" cx="24" cy="-2" fill="#00f"/> --> </g> </svg> </body> </html>