Infinity Symbol in CSS - html

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>∞</p>
<p>∞</p>
<p>∞</p>