<div class="w"></div>
<img class='pic' srcset="https://picsum.photos/200/200?image=1063 200w,
             https://picsum.photos/300/300?image=1064 300w,
             https://picsum.photos/600/600?image=1065 600w,
              https://picsum.photos/800/400?image=1066 800w,
              https://picsum.photos/1000/500?image=1067 1000w,
              https://picsum.photos/1200/600?image=1068 1200w"
     sizes="98vw"
     src="https://picsum.photos/1200/600?image=1069" alt="___">
<div class="pics">
 <p title="1200"><img src="https://picsum.photos/200/100?image=1068" title="1200"></p>
 <p title="1000"><img src="https://picsum.photos/200/100?image=1067" title="1000"></p>
 <p title="800"><img src="https://picsum.photos/200/100?image=1066" title="800"></p>
 <p title="600"><img src="https://picsum.photos/200/100?image=1065" title="600"></p>
 <p title="400"><img src="https://picsum.photos/200/100?image=1064" title="400"></p>
 <p title="200"><img src="https://picsum.photos/200/100?image=1063" title="200"></p>
</div>
<div>
<picture>
   <source media="(min-width: 1200px)" srcset="https://picsum.photos/1200/600?image=1068">
   <source media="(min-width: 1000px)" srcset="https://picsum.photos/1000/500?image=1067">
   <source media="(min-width: 800px)" srcset="https://picsum.photos/800/400?image=1066">
   <source media="(min-width: 600px)" srcset="https://picsum.photos/600/600?image=1065">
  <source srcset="https://picsum.photos/400/200?image=1064 ">
   <img src="https://picsum.photos/1200/600?image=1069" alt="A photo of London by night">
</picture>

</div>


<div class="dwf">
  <a class="btn" href="https://codepen.io/uchardon/">done with fun - @uchardon &copy; 2018</a></div>
<div class="share">
  <a target="_blank" href="https://twitter.com/intent/tweet?text=Atom%20SVG%20stroke%20animation%20with%20no%20JS&url=https://codepen.io/uchardon/pen/NORoXJ&via=CodePen">
<svg class="twitter" viewBox="0 0 612 612" >
  <path class="ani" d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
  <path d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
</svg>
    </a>
</div>

.pics {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;

  p {
    position: relative;
    flex-basis:150px;
    max-width:200px;
    flex-grow:1;
    height:100px;
    &:after {
     content: "width: " attr(title) "px ";
      position:absolute;
      top:2px;
      left:2px;
      text-shadow:0px 0px 3px #000;
    }
    img {
      object-fit: cover;
      width:100%;
      height:100%;
    }
  }
}
picture {
  width:100vw;
  display:block;
  img {
    width:100%;
  }
}


@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html { 
  height: 100%; 
  background: #1A2A3A;  
  color: #FFF; 
  scroll-behavior: smooth;
}
body {
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: auto;
}

*, *:before, *:after {
  position: relative;
  box-sizing: border-box;
}



.dwf, .share {
  position:fixed;
  bottom:4px;
  right:10px;
  background-color:#0003;
  padding:3px;
  border-radius:3px;
  .btn {
    color:#fff;
    text-decoration:none
  }
}
.share {
  right:auto;
  left:10px;
  border-radius:50%;
  padding:5px;
  .twitter {
    width: 20px;
    fill:#fff;
    stroke:none;
    overflow:visible;
  }
}

console.clear();  
const responsiveImage = document.querySelector('.pic')
window.addEventListener("resize", ()=> {
  getInfo();
});
function getInfo () {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  //console.log('w '+w);
  const box = document.querySelector('.w');
  box.innerHTML = "Viewport width = "+ w +"px";
}
getInfo();