CSS Infinity Symbol

Question

I am looking for creating an infinity symbol using CSS, SVG or Canvas.

If you do not know what the symbol of infinity is, this is an example:

I tried to create the form, but I managed to create only one side of the form. Ultimately, I would like to keep this in 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>

Run codeHide result

I found this question:

• HTML Infinity Symbol

But I consider using this as an icon or image of some kind and therefore would like a little more freedom with the form.

Answer 1

CSS

Using pseudo-elements, you can create both sides of the form and, therefore, get the desired result.

.

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>

Hide result

: CSS-Tricks

, , .

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>

Hide result

---

SVG

SVG . - , HTML SVG.

: 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>

Hide result

---

Canvas

Canvas SVG, ().

Canvas .

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>

Hide result

---

HTML

, HTML.

, HTML.

p {
  font-size: 2em;
}

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

Hide result