Instagram Logo Pure CSS

This is not image but created by CSS and HTML

INSTAGRAM LOGO PURE CSS & HTML

<style type='text/css'>
.box1 {
  width: 300px;
  height: 300px;
  padding: 30px;
  border-radius: 23%;
  border: 5px solid white;
  background: -webkit-linear-gradient(bottom left, #FFC54E 0%, #FC0538 50%, #4E37DB 100%);
}
.box1 .inner {
  width: 250px;
  height: 250px;
  padding: 0;
  margin: 5px;
  border: 15px solid white;
  border-radius: 23%;
  position: absolute;
  transform: translate(-6%, -5%);
}
.box1 .inner::before {
  width: 130px;
  height: 130px;
  padding: 0;
  margin: 5px;
  border: 15px solid white;
  border-radius: 50%;
  position: absolute;
  transform: translate(30%, 30%);
  content:''
}
.box1 .inner::after {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 5px;
  border: 15px solid white;
  border-radius: 50%;
  position: absolute;
  background: #ffffff;
  transform: translate(550%, 50%);
  content:''
}
</style>
<div class='box1'><div class='inner'></div></div>