Infinity Symbol in CSS

Question

I'm looking at creating a Infinity Symbol using CSS, SVG or Canvas.

If you don't know what an infinity symbol is, this is an example:

I have attempted at created the shape but have only managed to create one side of the shape. I would ultimately like to keep this to one element and as simple as possible.

.infinity {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0 50%;
  border: 5px solid black;
  transform: rotate(-45deg);
}

<div class="infinity"></div>

I have found this question:

• Infinity symbol with HTML

But i'm looking at using this as an icon or image of some sort and therefore would like a bit more freedom with the shape.

Answer 1

CSS

By using pseudo-elements, you can create both sides of the shape and therefore get the output required.

This solution will be well supported across all browsers.

div {
  position: relative;
  width: 178px;
  height: 100px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 10px solid black;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
div:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

<div></div>

This is an amended version from here: CSS-Tricks

If you want it more shapely, a bit of amending to the border radius rules really help give it some more shape.

div {
  position: relative;
  width: 178px;
  height: 100px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 10px solid black;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(45deg);
}
div:after {
  left: auto;
  right: 0;
  transform: rotate(-135deg);
}

<div></div>

---

SVG

SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.

It is well supported across all browsers as viewable here: CanIUse

• SVG | MDN

<svg height="150" viewbox="0 50 200 200">
  <path fill="none" stroke="#333333" stroke-width="5" d="M100,100 
             C200,0 200,200 100,100
             C0,0 0,200 100,100z" />
</svg>

---

Canvas

Canvas is similar to SVG but uses a raster (pixel based) instead of a vector to create the shape.

The browser support for Canvas is quite good.

var shape = document.getElementById('infinity').getContext('2d');
shape.lineWidth = 6;
shape.strokeStyle = "#333";
shape.beginPath();
shape.moveTo(100, 100);
shape.bezierCurveTo(200, 0, 200, 200, 100, 100);
shape.bezierCurveTo(0, 0, 0, 200, 100, 100);
shape.closePath();
shape.stroke();

<canvas id="infinity"></canvas>

---

HTML

As taken from the answer's in the near duplicate, this is an accumulation of all the HTML alternatives.

I've only added this for canonical and to show to users that the shape is possible with HTML entities.

p {
  font-size: 2em;
}

<p>∞</p>
<p>&#8734;</p>
<p>&#x221E;</p>
<p>&infin;</p>