Как нарисовать данный макет для сайта с помощью html, css, js?
думаю можно попробовать это сделать с помощью canvasзадаётся поле<canvas id="canv" width="500" height="500"></canvas>и затем в тегах script пишется код<script>
            var canvas=document.getElementById("canv");
            var x=canvas.getContext("2d");
            x.quadraticCurveTo(250, 120, 280, 80);
            x.quadraticCurveTo(250, 100, 220, 80);
</script>quadraticCurveTo - это функция для рисования кривой, параметры сейчас не помню точно (в интернете найти можно), там параметры задают начальную, конечную и прогиб. значения в функции примерные
также у canvas есть функции для рисования кружков, овалов и так далее
ответьте, если получится
По вопросу не очень понятно что вы хотите получить, если нужно рисовать фигуры на хтмл/цсс/жс есть варианты: 
1) Канвас, как уже упомянула @nata-ponchik
2) CSS стили со скруглением углов для кругов
3) SVG объекты
4) тупо вставить картинку и наложить на нее текст, если надо, как написал Froggyweb, это не всегда подходит, но как вариант..
5) Извращения типа флеш и сильверлайт (привет из 2010).
Если поломать мозг пару часов можно еще вариантов настрочить - например расположить пнг с прозрачностью в нужных местах через позиционирование и z-index.