SVG pool balls

In this example below you will see how to do a SVG pool balls with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ceejay76, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ceejay76 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG pool balls</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Rajdhani'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg height="100" width="100"><defs><radialGradient cx="50%" cy="50%" fx="25%" fy="25%" id="lightgrad" r="50%"><stop offset="5%" stop-color="#fff" stop-opacity="1"></stop><stop offset="25%" stop-color="#fff" stop-opacity="0.3"></stop><stop offset="95%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><circle cx="50" cy="50" fill="#fc0" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">1</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#00c" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">2</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#f00" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">3</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#309" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">4</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#f60" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">5</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#070" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">6</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#703" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">7</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#000" r="50"></circle><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">8</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><defs><mask id="hole"><rect fill="white" height="100%" width="100%"></rect><circle cx="50" cy="50" fill="black" r="50"></circle></mask></defs><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#fc0" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">9</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#00c" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">10</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#f00" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">11</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#309" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">12</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#f60" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">13</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#070" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">14</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><rect fill="#703" height="50" width="100" x="0" y="25"></rect><rect fill="white" height="100" mask="url(#hole)" width="100" x="0" y="0"></rect><circle cx="50" cy="50" fill="#fff" r="20"></circle><text alignment-baseline="central" fill="#000" text-anchor="middle" x="50" y="50">15</text><circle cx="50" cy="50" fill="url(#lightgrad)" r="50"></circle></svg><svg height="100" width="100"><defs><radialGradient cx="50%" cy="50%" fx="25%" fy="25%" id="lightgrad2" r="50%"><stop offset="5%" stop-color="#fff" stop-opacity="1"></stop><stop offset="95%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><circle cx="50" cy="50" fill="#ffd" r="50" style="stroke-width:1;stroke:rgba(0,0,0,0.1)"></circle><circle cx="50" cy="50" fill="#000" r="3"></circle><circle cx="50" cy="50" fill="url(#lightgrad2)" r="50"></circle></svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ceejay76/svg-pool-balls-ZaNWZN */
svg {
  margin-right: 5px;
}
svg text {
  font-size: 26px;
  font-weight: 500;
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Comments