笑い男のマークをSVGで書いてみた

はじめに（Introduction）

「Webページのローディング画面」の記事を書くためにsvgタグを勉強していたら、ふと「笑い男のマーク作れるんじゃね？」とか思ったのがきっかけです。

笑い男（The Laughing Man）

たぶんITやっている人なら知らない人はいないと思いますが、一応Wikipediaのリンクを張っておきます。
※：余談ですが、海外で外国人の技術者と会話していたら『GHOST IN THE SHELL / 攻殻機動隊』の話題になった事があって世界規模で知られてるのかと思った事がありました。

ということで作ってみました、以下の画像はsvgをpngに変換したものです。
htmlやsvgでは文字が回転します。

作成

寸法は適当です。以下がサンプルです。

HTML

行数は長いですが、画像ファイルよりは小さいかと思います。

HTMLコード

    <svg width="500" viewBox="0 0 500 500" style="user-select: none;">
        <path d="M 50 250
        A 200 200 0 1 1 450 250
        A 200 200 0 1 1 50 250
        " stroke="#0168B7" stroke-width="10" fill="#FFFFFF" />
        <path id="tlms" d="M 85 250
        A 160 160 0 1 1 415 250
        A 160 160 0 1 1 85 250
        " stroke="transparent" fill="#FFFFFF" />
        <text font-size="25" font-weight="bold" font-family="sans-serif" fill="#0168B7">
            <textPath xlink:href="#tlms">
                I thought what I'd do was, I'd pretend I was one of those deaf-mutes.
            </textPath>
        </text>
        <animateTransform xlink:href="#tlms" attributeName="transform" type="rotate" from="0 250 250" to="-360 
        250 250" dur="5s" repeatCount="indefinite" />
        <rect x="240" y="95" width="20" height="10" rx="3" stroke="transparent" fill="#0168B7" />
        <path d="M 110 250
        A 140 140 0 1 1 390 250
        A 140 140 0 1 1 110 250
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
        <rect x="99" y="240" width="22" height="10" stroke="transparent" fill="#FFFFFF" />
        <path d="M 450 230
        A 30 30 0 0 1 480 260
        A 30 30 0 0 1 450 290
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
        <path d="M 110 230
        L 451 230
        " stroke="#0168B7" stroke-width="20" />
        <path d="M 451 290
        L 376 290
        " stroke="#0168B7" stroke-width="20" />
        <path d="M 340 250
        A 90 90 0 1 1 160 250
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
        <path d="M 150 260
        L 451 260
        " stroke="#FFFFFF" stroke-width="40" />
        <path d="M 165 290
        L 335 290
        " stroke="#0168B7" stroke-width="20" />
        <path d="M 175 273
        A 27 25 0 1 1 229 273
        " stroke="transparent" stroke-width="20" fill="#0168B7" />
        <path d="M 175 274
        A 27 12 0 1 1 229 274
        " stroke="transparent" stroke-width="20" fill="#FFFFFF" />
        <path d="M 275 273
        A 27 25 0 1 1 329 273
        " stroke="transparent" stroke-width="20" fill="#0168B7" />
        <path d="M 275 274
        A 27 12 0 1 1 329 274
        " stroke="transparent" stroke-width="20" fill="#FFFFFF" />
    </svg>

SVG

そういえば、svgって中身は単なるXMLファイルじゃなかったっけ？とか思って貼り付けたらうまくいきました。

SVGコード

thelaughman.svg

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M 50 250
        A 200 200 0 1 1 450 250
        A 200 200 0 1 1 50 250
        " stroke="#0168B7" stroke-width="10" fill="#FFFFFF" />
    <path id="tlms" d="M 85 250
        A 160 160 0 1 1 415 250
        A 160 160 0 1 1 85 250
        " stroke="transparent" fill="#FFFFFF" />
    <text font-size="25" font-weight="bold" font-family="sans-serif" fill="#0168B7">
        <textPath xlink:href="#tlms">
            I thought what I'd do was, I'd pretend I was one of those deaf-mutes.
        </textPath>
    </text>
    <animateTransform xlink:href="#tlms" attributeName="transform" type="rotate" from="0 250 250" to="-360 
        250 250" dur="5s" repeatCount="indefinite" />
    <rect x="240" y="95" width="20" height="10" rx="3" stroke="transparent" fill="#0168B7" />
    <path d="M 110 250
        A 140 140 0 1 1 390 250
        A 140 140 0 1 1 110 250
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
    <rect x="99" y="240" width="22" height="10" stroke="transparent" fill="#FFFFFF" />
    <path d="M 450 230
        A 30 30 0 0 1 480 260
        A 30 30 0 0 1 450 290
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
    <path d="M 110 230
        L 451 230
        " stroke="#0168B7" stroke-width="20" />
    <path d="M 451 290
        L 376 290
        " stroke="#0168B7" stroke-width="20" />
    <path d="M 340 250
        A 90 90 0 1 1 160 250
        " stroke="#0168B7" stroke-width="20" fill="#FFFFFF" />
    <path d="M 150 260
        L 451 260
        " stroke="#FFFFFF" stroke-width="40" />
    <path d="M 165 290
        L 335 290
        " stroke="#0168B7" stroke-width="20" />
    <path d="M 175 273
        A 27 25 0 1 1 229 273
        " stroke="transparent" stroke-width="20" fill="#0168B7" />
    <path d="M 175 274
        A 27 12 0 1 1 229 274
        " stroke="transparent" stroke-width="20" fill="#FFFFFF" />
    <path d="M 275 273
        A 27 25 0 1 1 329 273
        " stroke="transparent" stroke-width="20" fill="#0168B7" />
    <path d="M 275 274
        A 27 12 0 1 1 329 274
        " stroke="transparent" stroke-width="20" fill="#FFFFFF" />
</svg>

まとめ（Conclusion）

まあまあ良く出来たと思います。

ソースコードは上記コードのコピペでも十分ですが、GitHubにもあります。

svgをpngに変換するとアニメーションが反映されません。
アニメーションPNGとかにならないものだろうか・・・