Я выполняла подобное тестовое задание - лендинг с адаптивом, дали макет psd. Написали, что время - 8 часов, но я возилась намного дольше.
Взяли. Работаю.

В то время нужен был любой опыт, так что я не парилась: не взяли бы - положила в портфолио и пошла дальше искать.

Для цветной карты можно использовать матрицу в свг. Правда, это по-прежнему не работает в ИЕ, в последнем проекте клиент забил на ИЕ и согласился на такой вариант:

CSS:

[class*="ymaps-2"][class*="-ground-pane"] {
  -webkit-filter: grayscale(100%) url(/path-to-svg/yellowfilter.svg#yellowfilter);
          filter: grayscale(100%) url(/path-to-svg/yellowfilter.svg#yellowfilter);
}

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="yellowfilter">
		<feColorMatrix
		type="matrix"
		values="0.95 0 0 0 0
				0 0.77 0 0 0
				0 0 0.07 0 0
				0 0 0 1 0" />
	</filter>
</svg>

Чтобы получить матрицу для нужного вам цвета, используйте сервис andresgalante.com/RGBAtoFeColorMatrix

Результат:

Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.

Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки - просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0; background: #0382Ce; border-radius: 2px;">
  <tr>
  	<td width="19" style="width: 19px;">&nbsp;</td>
        <td style="height: 38px;">
            <a href="#" style="height: 38px; text-align: center; font-family: Arial, Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 38px; text-decoration: none; padding: 0; display: block; border-radius: 4px;">
                 <font face="Arial, sans-serif" color="#ffffff" style="font-size: 12px; line-height: 38px;">
                           <span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 12px; line-height: 38px; font-weight: bold; letter-spacing: 0.05em; -webkit-text-size-adjust:none;">ПОДРОБНОСТИ&nbsp;НА&nbsp;ПЛОЩАДКЕ</span>
                </font>
             </a>
	</td>
	 <td width="19" style="width: 19px;">&nbsp;</td>
  </tr>
</table>

Я устроилась на работу практически без опыта, на удаленку. Схема была такая:
1. курсы HTML Academy, сначала интерактивные, потом интенсив
2. один макет верстаю для себя, бесплатно, попутно читаю "Отзывчивый веб-дизайн" Итана Маркотта, т.к. на курсах (п. 1) адаптивной верстке не учили
2а. ...тут по плану должен был быть еще один сверстанный макет бесплатно и для себя, но лень, лень...
3. на форуме (не помню, maultalk или searchengines) пишу объявление типа "оооочень начинающий верстальщик, сверстаю первым трем откликнувшимся за отзыв, вот портфолио на гитхабе". А в портфолио - учебный макет и второй.
4. таким макаром выполняю 3 заказа, получаю в качестве спасибо целых 300 рублей на карточку. и отзывы, да
5. параллельно ищу на hh вакансии, где готовы взять джуна на удаленку, честно им пишу о своем опыте

Итог - одни таки рискнули и взяли меня, там и работаю. Конечно, пришлось учиться быстро и на ходу.

Если кружочки будут статичными, лучше не париться и сделать пнг.
А если динамичные, т.е. их положение/количество будет меняться, то примерно так jsfiddle.net/5g9z7t0o/2
Только будут не ломаные кривые, а безье, но принцип тот же.