svgでmask
これは、面白いかも。
動かし方でプリローダーとかも作れる。
<div xmlns="http://www.w3.org/1999/xhtml"> <svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg"> <desc>Created with Snap</desc> <defs> <mask id="maskSample"> <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sample_img.png" preserveAspectRatio="none" x="0" y="0" width="500" height="500"/> </mask> </defs> <circle cx="250" cy="250" r="200" fill="#ffa500" stroke="#000000" mask="url('#maskSample')" style="stroke-width: 20px;"/> </svg> </div>