Edit in JSFiddle

//--- Arctext plugin (second tile)
jQuery(".top-arc").arctext({
    radius: 300
});

jQuery(".bottom-arc").arctext({
    radius: 300,
    dir: -1
});

<h2 class="tegel-text">Arctext plugin</h2>

<div id="tegel-font-arc" class="tegel">
    <p class="top-arc">Alleen &nbsp; ga &nbsp; je &nbsp; sneller</p>
    <p class="dwarf">
        <img src="http://www.blog.plint-sites.nl/wordpress/wp-content/uploads/2015/08/walking-dwarf.gif">
    </p>
    <p class="bottom-arc">Samen &nbsp; kom &nbsp; je &nbsp; verder</p>
</div>

@import url(http://fonts.googleapis.com/css?family=Lato:400, 700|Droid+Serif:400, 700|Roboto:400, 300, 500|Open+Sans:400, 800);
 h2 {
    font-family:'Droid Serif', serif;
    text-align: center;
    font-size: 55px;
}
.tegel {
    font-family:'Lato';
    text-align: center;
    height: 170px;
    vertical-align: middle;
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.tegel p {
    margin-top: 15px;
    font-size: 45px;
}
#tegel-font-arc {
    background: #acffe9;
    color:#1e8c93;
    border-width: 10px;
    border-color: #ff714b;
    border-style: ridge;
    border-radius: 50%;
    width: 674px;
    height: 600px;
    font-family:'Open Sans';
    position: relative;
}
p.top-arc {
    position: relative;
    top: -36px;
    color: #c60052;
}
p.bottom-arc {
    position: relative;
    bottom: -370px;
    color: #c60052;
}
p.dwarf {
    position: absolute;
    left: 32%;
    top: 26%;
    padding: 62px 78px;
    background: #333;
    border-radius: 50%;
}