SVG JTB Circle Crop
✨ 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:#002; font-family:sans-serif; display:flex; justify-content:center; align-items:center; margin:0; text-align:center; } svg{ width:90%; /* min-width:100%; */ position:absolute; left:0; top:0; } </style> </head> <body> <svg viewBox="2.04 -21.96 19.92 19.92"> <mask id="myMask"> <circle fill="white" r="9.96" cx="12" cy="-12"/> </mask> <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> <g mask="url(#myMask)"> <!-- <circle id="pa" r="9.95" cx="6" cy="-7" fill="#fff"/> <circle id="jabont" r="9.995" cx="24" fill="#fff" cy="-2"/> --> <circle id="pa" r="9.95" cx="6" cy="-7" fill="url(#grad3)" opacity=".9"/> <circle id="jabont" r="9.995" cx="24" fill="url(#grad4)" cy="-2" opacity=".9"/> </g> </svg> </body> </html>