JSFiddle - React, Tailwind, and code Playground

by Tiro

HTML

<h1>Роза ветров</h1>
<p><a href="http://ru.wikipedia.org/wiki/Роза_ветров">Роза ветров</a> — векторная диаграмма, характеризующая в метеорологии и климатологии, режим ветра в данном месте по многолетним наблюдениям.</p>

<h2>Климат Санкт-Петербурга</h2>
<p><a href="http://ru.wikipedia.org/wiki/Климат_Санкт-Петербурга">Климат Санкт-Петербурга</a> умеренный и влажный, переходный от морского к континентальному. Для данного региона характерна частая смена воздушных масс, обусловленная в значительной степени циклонической деятельностью. Летом преобладают западные и северо-западные ветры, зимой западные и юго-западные.</p>   
    
<p><a href="http://www.pogodaiklimat.ru/climate/26063.htm">Повторяемость различных направлений ветра</a></p>

<svg width="300" height="300"> 
    <!-- координатная сетка -->    
    <line x1="150" y1="0"   x2="150" y2="300" stroke="Silver" stroke-width=".8" />         
    <line x1="0"   y1="150" x2="300" y2="150" stroke="Silver" stroke-width=".8" />         
    <line x1="44"  y1="44"  x2="256" y2="256" stroke="Silver" stroke-width="1" />         
    <line x1="44"  y1="256" x2="256" y2="44"  stroke="Silver" stroke-width="1" /> 
    
    <!-- лучи -->
    <line x1="150" y1="150" x2="150" y2="70"  stroke="Blue" stroke-width="2" /> 
    <line x1="150" y1="150" x2="197" y2="103" stroke="Blue" stroke-width="2.1" /> 
    <line x1="150" y1="150" x2="216" y2="150" stroke="Blue" stroke-width="2" /> 
    <line x1="150" y1="150" x2="197" y2="197" stroke="Blue" stroke-width="2.1" /> 
    <line x1="150" y1="150" x2="150" y2="260" stroke="Blue" stroke-width="2" /> 
    <line x1="150" y1="150" x2="47"  y2="253" stroke="Blue" stroke-width="2.1" /> 
    <line x1="150" y1="150" x2="12"  y2="150" stroke="Blue" stroke-width="2" /> 
    <line x1="150" y1="150" x2="109" y2="109" stroke="Blue" stroke-width="2.1" /> 

    <!-- роза -->
    <polygon points="150,70 197,103 216,150 197,197 150,260 47,253 12,150 109,109" 
        stroke="Red" stroke-width="3"...