<meta name="viewport" content="width=device-width, initial-scale=1.0">

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" x2="950" y1="100" y2="100" stroke="#ccc" stroke-width="6" />
  
  <g fill="tomato">
    <circle cx="90"  cy="100" r="20" data-pos="0" data-orient="0" class="dots"/>
    <circle cx="200" cy="100" r="20" data-pos="110" data-orient="780" class="dots"/>
    <circle cx="430" cy="100" r="20" data-pos="340" data-orient="1730" class="dots"/>
    <circle cx="580" cy="100" r="20" data-pos="490" data-orient="2730" class="dots"/>
    <circle cx="860" cy="100" r="20" data-pos="770" data-orient="3730" class="dots"/>
  </g>
  
  <g id="cloud" fill="tomato">
    <path d="M85,50 95,50 90,57z"/>
    <circle cx="90" cy="25" r="25"></circle>
  </g>
  
  <g fill="#fff" style="font-size: 13px">
    <text x="70" y="30">2007</text>
    <text x="181" y="30">2012</text>
    <text x="411" y="30">2017</text>
    <text x="561" y="30">2018</text>
    <text x="841" y="30">2020</text>
  </g>
  
   <g id="news">
    <foreignObject x="200" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2007 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="1000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2012 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="2000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2017 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="3000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2018 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="4000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2020 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
  </g>  
</svg>

#cloud,#news{
  transition: 0.34s cubic-bezier(0,1.28,1,.12);
}

circle:hover{
  fill: lightblue;
  cursor: pointer;
}

.obj h1{
  font-size: 34px
}

.obj p{
  font-size: 18px;
}

document.querySelectorAll(".dots").forEach(function (cir){
   let pos = cir.getAttribute('data-pos');
   let orient = cir.getAttribute('data-orient');
   cir.onclick = function (){
     cloud.style.transform = `translate(${pos+"px"}, 0)`;
     news.style.transform = `translate(${-orient+"px"}, 0)`;
   }
})