Zenn
😇

誰にも求められていないモノを作る技術

2021/12/16に公開
CSS
tech

Be Crazy!!!

（この記事は ちゅらデータ Advent Calendar 2021 16日目 の記事となります）

ネタすぎるのでQiita→Zennに書くことじゃないって怒られたら個人ブログに移動します

皆様、404ページ好きですか？

弊社の404ページは前々からイケてないなって思っていました。（個人の感想です）

https://churadata.okinawa/aipa-dead-shark-3

存在しないリンクに飛んでみてください。

ほらね、Topページへリダイレクト。イケてない（個人の感想です）

image.png

ぐぐってみると、よさそうな404ページはたくさんありますね。皆様遊び心満載です。

image.png

果たしてそれでいいのか？？？

ぼくの心の中のちゅらデータが言います。

？？？）「本当にそれでいいのか？」

image.png

aipa）「！？　ちゅら太郎！？？」

ちゅら太郎）「あきらめたら、そこで 案件終了 だよ・・・・？」

aipa）「・・・・・・・！」

ちゅら太郎）「だから泣くな」

aipa）「だって、、、ちゅら太郎、、、 袖がっ！！！！ 」

image.png

aipa）「わかったよ、僕泣かない。ちゅら太郎！！！ぼくがんばる、社長みたいな Be Crazy になる」

真面目にやります

世界にふたつとない404ページを作って、社長にプレゼンしようと思います。今回はその過程を共有いたします。

準備

  • Google Chrome
  • Developer tools

今回はすべてDeveloper toolsでやります。

元のページ

https://churadata.okinawa/service/

適当に選んだサービスページでやります。

image.png

404の文字に差し替える

image.png

はい、完成しました。どうもありがとうございました。

異常です

ここでやめたらちゅら太郎との 茶番 約束が違いますよね。もっと頑張ってみます。

ふぁんきーにしてみる

さて、普通。ページのコンテンツを用意するときは企画やら目的があり、何を伝えたいかをまず先に決めたりするのですが、今回は時間もないので、 クレイジーだなー が伝わればいいかなって思います。

もう一度来てみたい と思わせることが大事かなと思います。

すぐ簡単にできそうな案としては、アニメーションです。その昔はJavaScript使わないとできなかったことですが、なんとこの記事のタグにもあるCSSである程度は動かせるんですよね。

アニメーションでUX（？？？）を刺激することができたら勝ちなんじゃないでしょうか。

とりあえずやってみましょう。

<h1 class="mainvisual_text"><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
</style><div class="container-404" style="
    font-size: 100px;
    font-weight: bold;
    
"><span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
">4</span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
">0</span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
">4</span></div><p>ページは存在しません</p>
</h1>

cssでアニメーションするには、animation プロパティと @keyforames なるものを利用します。

https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

結果がこちらです。

![Something went wrong]()

は？？？？

https://qiita.com/kunrenyouAcount/items/9a8e535beea1f55bee73

Qiita投稿画面で画像をアップロードしたときに「Something went wrong」と表示されてアップロードできない

な・・・・なんだってーーーーーーーーー！！！！！！

というわけでZennに来ました。 初Zennです。

続けます。

改めて、結果がこちらです。

ふぁんきーになりました。いいですね！

でも、これではまだまだ Be Crazy に届いていない気がしますね。もっとがんばります。

ちゅら太郎の召喚を召喚する

真ん中の０をちゅら太郎に置き換えたらどうでしょうか？なんか 可愛くなりそう ですよね。

ただ、ぼくはちゅら太郎の素材を手元に持っていません。うーん。どうしましょう。

Developer toolsでみてみると、なんとちゅらデータHPのロゴはSVGでできているじゃないですか。そのままコピペできそうですね。

https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

さっそくためしてみましょう。

！？？？

コピペの仕方を間違えて、文字列をいれてしまいました。まるで 初代ポケモンの技「なみのり」みたいなエフェクト（？） になりました。

びっくりしましたが、適切にコピペしてみます。

うん、良さそうですね！　調整は必要ですが、SVGを0から置き換えてぐるぐる回すことができました。

<h1 class=“mainvisual_text”><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
</style><div class=“container-404" style=”
    font-size: 100px;
    font-weight: bold;
    
“><span style=”
    animation: 3s linear infinite rotation;
    display: inline-block;
“>4</span>
<span style=”
    animation: 3s linear infinite rotation;
    display: inline-block;
“>&lt;svg role=“img” aria-label=“ちゅらデータ” xmlns=“http://www.w3.org/2000/svg” width=“213.257" height=“36.774” viewBox=“0 0 213.257 36.774"&gt;
		&lt;g transform=“translate(45.68 3.742)“&gt;&lt;path d=“M99.5,19.458h5l.551-2.158h4.912l-.413,2.158H124.7V24H108.82l-.459,2.617h8.264a7.9,7.9,0,0,1,4.27,1.194,7.162,7.162,0,0,1,2.433,2.571,6.29,6.29,0,0,1,.735,2.938,6.381,6.381,0,0,1-.735,2.938,6.932,6.932,0,0,1-2.433,2.571,7.575,7.575,0,0,1-4.316,1.148H103.035v-5.1h14.324a1.515,1.515,0,0,0,.918-.275,1.607,1.607,0,0,0,.505-.6,1.653,1.653,0,0,0,.184-.735,1.515,1.515,0,0,0-.184-.643,1.653,1.653,0,0,0-.505-.6,1.7,1.7,0,0,0-.918-.275H105.468a2.294,2.294,0,0,1-2.158-1.01,3.306,3.306,0,0,1-.321-2.433l.735-4.27H99.5Z” transform=“translate(-99.5 -13.099)“&gt;&lt;/path&gt;&lt;path d=“M177.1,27.2v1.745h2.112a4.958,4.958,0,0,1,2.709.826,6.382,6.382,0,0,1,1.882,1.882,8.586,8.586,0,0,1,1.056,2.341,9.272,9.272,0,0,1,.321,2.433,9.456,9.456,0,0,1-.6,3.3,5.83,5.83,0,0,1-2.388,2.8,7.529,7.529,0,0,1-4.27,1.194h-1.515a4.728,4.728,0,0,1-.551,1.469h-4.27a17.169,17.169,0,0,0,1.515-5V35.556L172,36.841,167.134,42.4a2.112,2.112,0,0,1-2.938.092,1.79,1.79,0,0,1-.6-1.377V29.128h3.994v6.886l2.066-2.3a25.848,25.848,0,0,1,3.076-3.076l.321-.275V27.2Zm.735,12.579a3.168,3.168,0,0,0,1.882-.551,3.122,3.122,0,0,0,1.1-1.285,3.856,3.856,0,0,0,.321-1.515,3.535,3.535,0,0,0-.321-1.515,3.49,3.49,0,0,0-1.1-1.285,3.443,3.443,0,0,0-1.882-.643H177.1v6.795Z” transform=“translate(-134.171 -18.454)“&gt;&lt;/path&gt;&lt;path d=“M219.143,35.849h17.033a2.387,2.387,0,0,0,1.194-.321,2.111,2.111,0,0,0,.689-.689,1.469,1.469,0,0,0,0-1.561,2.111,2.111,0,0,0-.689-.689,2.387,2.387,0,0,0-1.194-.321H225.891a7.988,7.988,0,0,1-4.316-1.194,6.657,6.657,0,0,1-2.387-2.617,6.841,6.841,0,0,1-.689-2.984V19h5.05v6.473h.046a2.066,2.066,0,0,0,.918,1.469,2.341,2.341,0,0,0,1.194.321h10.284a7.759,7.759,0,0,1,4.316,1.194,6.841,6.841,0,0,1,2.433,2.617,6.7,6.7,0,0,1,.735,2.984A6.427,6.427,0,0,1,242.74,37a7.024,7.024,0,0,1-2.433,2.617,7.9,7.9,0,0,1-4.27,1.194H219.143ZM240.812,19v4.958H227.039V19Z” transform=“translate(-163.867 -14.019)“&gt;&lt;/path&gt;&lt;path d=“M281.9,13.131h22.817v4.958H281.9Zm0,8.31h22.955v5h-7.3a18.82,18.82,0,0,1-.6,2.892,9.227,9.227,0,0,1-2.433,3.948,6.519,6.519,0,0,1-4.315,1.745H281.9V30.072h7.07a3.305,3.305,0,0,0,2.341-1.056,4.683,4.683,0,0,0,1.194-2.3,1.056,1.056,0,0,1,.046-.275H281.9Zm11.661-10.605a2.686,2.686,0,1,1,2.686,2.686A2.686,2.686,0,0,1,293.561,10.836Zm6.381,0a2.686,2.686,0,1,1,2.686,2.686A2.686,2.686,0,0,1,299.943,10.836Z” transform=“translate(-198.161 -8.15)“&gt;&lt;/path&gt;&lt;path d=“M342.9,37.1h22.817v5H342.9Z” transform=“translate(-231.156 -23.809)“&gt;&lt;/path&gt;&lt;path d=“M413.111,19h16.022a2.525,2.525,0,0,1,1.791.689,2.25,2.25,0,0,1,.689,1.79L430.419,30.2a19.515,19.515,0,0,1-1.377,5,11.3,11.3,0,0,1-2.984,3.948,7.483,7.483,0,0,1-4.5,1.745H415.82V35.94h5.142a3.764,3.764,0,0,0,2.479-1.056,5.371,5.371,0,0,0,1.469-2.3l.092-.275h-9.09v-5h9.917l.321-2.433q.092-.872-.643-.918h-10.7a17.631,17.631,0,0,1-1.01,3.03,11.294,11.294,0,0,1-2.984,3.948,7.483,7.483,0,0,1-4.5,1.745H403.7V27.768h2.02a3.765,3.765,0,0,0,2.479-1.056,5.372,5.372,0,0,0,1.469-2.3,15.432,15.432,0,0,0,.6-2.8v-.184a2.938,2.938,0,0,1,1.01-1.745A2.846,2.846,0,0,1,413.111,19Z” transform=“translate(-264.043 -14.018)“&gt;&lt;/path&gt;&lt;/g&gt;&lt;g transform=“translate(13.867 15.342)“&gt;&lt;path d=“M40.991,33.731a15.288,15.288,0,0,0-2.479,1.24,3.351,3.351,0,0,1-1.423.643H37a3.351,3.351,0,0,1-1.377-.643,15.288,15.288,0,0,0-2.479-1.24c-1.148-.459-2.066-.413-2.571.138a1.377,1.377,0,0,0-.275,1.423c.505,1.1,2.617,1.974,4.086,2.02a8.4,8.4,0,0,0,2.2-.275l.459-.092h.046l.459.092a8.355,8.355,0,0,0,2.158.275h.046c1.469,0,3.627-.872,4.086-2.02a1.377,1.377,0,0,0-.275-1.423C43.057,33.318,42.139,33.272,40.991,33.731Zm-6.2,2.571a1.561,1.561,0,0,1-.872.184,6.106,6.106,0,0,1-1.24-.138c-.735-.184-1.1-.551-1.056-1.056a.872.872,0,0,1,.413-.643,1.331,1.331,0,0,1,.826-.184,3.214,3.214,0,0,1,1.285.6c.321.23.826.643.826,1.01A.367.367,0,0,1,34.793,36.3Zm6.7.046a6.106,6.106,0,0,1-1.24.138,1.561,1.561,0,0,1-.872-.184.367.367,0,0,1-.138-.275c-.046-.367.505-.78.826-1.01a3.214,3.214,0,0,1,1.285-.6,1.331,1.331,0,0,1,.826.184.872.872,0,0,1,.413.643C42.6,35.8,42.185,36.164,41.5,36.348Z” transform=“translate(-30.204 -33.418)“&gt;&lt;/path&gt;&lt;path d=“M35.962,36.85a2.984,2.984,0,0,0-1.148-.551h-.092a1.056,1.056,0,0,0-.551.138.6.6,0,0,0-.275.459c-.046.367.413.643.872.735a4.317,4.317,0,0,0,1.882,0H36.7C36.7,37.493,36.421,37.172,35.962,36.85Z” transform=“translate(-32.2 -34.977)“&gt;&lt;/path&gt;&lt;path d=“M52.979,36.437a1.056,1.056,0,0,0-.551-.138h-.092a2.984,2.984,0,0,0-1.148.551c-.459.321-.689.643-.689.735h.046a3.677,3.677,0,0,0,1.882,0c.6-.138.918-.367.872-.735A.6.6,0,0,0,52.979,36.437Z” transform=“translate(-41.182 -34.977)“&gt;&lt;/path&gt;&lt;/g&gt;&lt;g transform=“translate(11.799 11.11)“&gt;&lt;ellipse cx=“1.515” cy=“1.515" rx=“1.515” ry=“1.515" stroke=“#fff” stroke-linecap=“round” stroke-miterlimit=“10” stroke-width=“0.427"&gt;&lt;/ellipse&gt;&lt;ellipse cx=“1.515” cy=“1.515" rx=“1.515” ry=“1.515" transform=“translate(14.783)” stroke=“#fff” stroke-linecap=“round” stroke-miterlimit=“10" stroke-width=“0.427”&gt;&lt;/ellipse&gt;&lt;/g&gt;&lt;path d=“M26.483,16.33a2.25,2.25,0,0,1-.551-2.525l-.321.275a1.607,1.607,0,0,1-2.25-.275,1.285,1.285,0,0,1,0-1.607,1.148,1.148,0,0,1,1.331-.321.918.918,0,0,1,.551.689.872.872,0,0,1-.275.78.735.735,0,0,1-.643.138.689.689,0,0,1-.551-.505.6.6,0,0,1,.23-.6.147.147,0,1,1,.184.23.321.321,0,0,0-.138.321.413.413,0,0,0,.321.275.459.459,0,0,0,.413-.092.6.6,0,0,0,.184-.551.643.643,0,0,0-.413-.505.872.872,0,0,0-1.01.23,1.01,1.01,0,0,0,0,1.24,1.331,1.331,0,0,0,1.836.23,1.7,1.7,0,0,0,.321-2.341A2.158,2.158,0,0,0,22.718,11,2.341,2.341,0,0,0,21.8,12.84a2.25,2.25,0,0,0,.872,1.79,9.09,9.09,0,0,0,3.03,1.331Z” transform=“translate(-11.792 -5.724)“&gt;&lt;/path&gt;&lt;path d=“M62.837,13.14a2.341,2.341,0,0,0-.918-1.836,2.158,2.158,0,0,0-2.984.413,1.7,1.7,0,0,0,.321,2.341,1.331,1.331,0,0,0,1.836-.23,1.01,1.01,0,0,0,0-1.24.872.872,0,0,0-1.01-.23.643.643,0,0,0-.413.505.6.6,0,0,0,.184.551.459.459,0,0,0,.413.092.413.413,0,0,0,.321-.275.321.321,0,0,0-.138-.321.147.147,0,0,1,.184-.23.6.6,0,0,1,.23.643.689.689,0,0,1-.505.367.735.735,0,0,1-.643-.138.872.872,0,0,1-.275-.78.918.918,0,0,1,.551-.689,1.148,1.148,0,0,1,1.331.321,1.285,1.285,0,0,1,0,1.607,1.607,1.607,0,0,1-2.25.275l-.321-.321a2.25,2.25,0,0,1-.551,2.571l.78-.23a9.09,9.09,0,0,0,3.03-1.331A2.25,2.25,0,0,0,62.837,13.14Z” transform=“translate(-31.481 -5.887)“&gt;&lt;/path&gt;&lt;path d=“M43.208,60.8H41.28V48.867a.367.367,0,0,0-.367-.367H37.057a.367.367,0,0,0-.367.367V60.8h-1.1V53.091a.367.367,0,0,0-.367-.367H31.41a.367.367,0,0,0-.367.367V60.8H29.895V50.933a.367.367,0,0,0-.367-.367H25.717a.367.367,0,0,0-.367.367V60.8H23.467a.367.367,0,0,0-.367.367V62.64a.367.367,0,0,0,.367.367H43.208a.367.367,0,0,0,.367-.367V61.171A.367.367,0,0,0,43.208,60.8Z” transform=“translate(-12.495 -26.234)“&gt;&lt;/path&gt;&lt;g transform=“translate(4.04 25.572)“&gt;&lt;path d=“M12.978,60.98a1.445,1.445,0,0,1,2.066.23,1.24,1.24,0,0,1-.23,1.745,1.01,1.01,0,0,1-.735.23.964.964,0,0,1-.643-.367.826.826,0,0,1,.138-1.148.689.689,0,0,1,.505-.138.643.643,0,0,1,.459.275.6.6,0,0,1-.092.78h-.138a.092.092,0,0,1,0-.138.367.367,0,0,0,.046-.505.413.413,0,0,0-.275-.184.459.459,0,0,0-.321.092.6.6,0,0,0-.138.826.735.735,0,0,0,.505.275.78.78,0,0,0,.6-.184,1.01,1.01,0,0,0,.184-1.423,1.273,1.273,0,0,0-1.79-.184,1.653,1.653,0,0,0-.6,1.056,1.745,1.745,0,0,0,.046.689,1.607,1.607,0,0,0,.275.551,1.974,1.974,0,0,0,1.331.78,2.02,2.02,0,0,0,1.515-.413,2.663,2.663,0,0,0,.505-3.673,3.581,3.581,0,0,0-2.25-1.285H13.85a2.158,2.158,0,0,0-1.79-1.148,1.285,1.285,0,0,0-1.79-1.607l-.275.138a1.882,1.882,0,0,1-1.1-.551H8.8a4.545,4.545,0,0,0,.413,1.148l.275.5a1.285,1.285,0,0,0,.735,1.148,2.112,2.112,0,0,0,2.158,3.351,1.882,1.882,0,0,1,.6-.872Z” transform=“translate(-8.8 -55.7)“&gt;&lt;/path&gt;&lt;path d=“M72.637,56h-.092a1.882,1.882,0,0,1-1.148.551l-.275-.138a1.285,1.285,0,0,0-1.745,1.469,2.158,2.158,0,0,0-1.745,1.194h-.092a3.581,3.581,0,0,0-2.25,1.285,2.663,2.663,0,0,0,.5,3.673,2.02,2.02,0,0,0,1.515.413,1.974,1.974,0,0,0,1.331-.78,1.607,1.607,0,0,0,.275-.551,1.745,1.745,0,0,0,.046-.689,1.653,1.653,0,0,0-.6-1.056,1.273,1.273,0,0,0-1.79.184,1.01,1.01,0,0,0,.184,1.423.781.781,0,0,0,.6.184.735.735,0,0,0,.505-.275.6.6,0,0,0-.138-.826.459.459,0,0,0-.321-.092.413.413,0,0,0-.275.184.367.367,0,0,0,.046.505.092.092,0,0,1,0,.138h-.138a.6.6,0,0,1-.092-.78.643.643,0,0,1,.459-.275.689.689,0,0,1,.505.138.826.826,0,0,1,.138,1.148.964.964,0,0,1-.643.367,1.01,1.01,0,0,1-.735-.23,1.24,1.24,0,0,1-.23-1.745,1.445,1.445,0,0,1,2.066-.23,1.882,1.882,0,0,1,.6.872,2.112,2.112,0,0,0,2.158-3.351,1.285,1.285,0,0,0,.735-1.148l.275-.505A4.591,4.591,0,0,0,72.637,56Z” transform=“translate(-39.077 -55.862)“&gt;&lt;/path&gt;&lt;/g&gt;&lt;path d=“M39.666,21.118a12.763,12.763,0,0,1-1.928-2.892.092.092,0,0,1,0-.092,2.3,2.3,0,0,1-2.525-1.928c-.138-1.285,1.1-2.433,2.158-1.515a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.1.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056s-.918-2.387-1.836-3.4a12.763,12.763,0,0,1-1.928-2.892.138.138,0,0,1,.138-.184h0a5.739,5.739,0,0,0,3.765-3.214,7.3,7.3,0,0,0,.275-5A2.479,2.479,0,0,0,38.885.138l.092-.092c-.964.413-1.285,1.7-2.158,2.25s-2.663,0-3.9.413-1.148.735-1.79,1.056a5.75,5.75,0,0,1-4.361-.092,10.332,10.332,0,0,0-4.453-.735,2.3,2.3,0,0,0-3.122,0,9.667,9.667,0,0,0-4.361.78,5.75,5.75,0,0,1-4.361.092,11.477,11.477,0,0,0-1.79-1.056c-.689-.23-2.8.275-3.9-.413S3.535.413,2.571,0l.092.092A2.479,2.479,0,0,0,1.7,1.607a7.3,7.3,0,0,0,.275,5A5.739,5.739,0,0,0,5.739,9.825h0a.138.138,0,0,1,.092.138h0a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.349,12.349,0,0,1-1.01,1.331,7.838,7.838,0,0,0-1.7,2.387,3.581,3.581,0,0,0-.138.872c0,.046,0,.138,0,.184.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.23-1.24c1.056-.918,2.3.413,2.158,1.515a2.485,2.485,0,0,1-2.479,1.928H3.765a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.35,12.35,0,0,1-1.056,1.377,7.614,7.614,0,0,0-1.7,2.387A3.581,3.581,0,0,0,0,24.332v.184c.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.275-1.24c.78-.689,1.7-.092,2.02.689v.138A4.683,4.683,0,0,0,5.6,25.159c.138.092.367.138.413-.092a.826.826,0,0,0,0-.321q-.207-1.79-.275-3.581c-.046-1.194-.138-1.836.092-2.112s.735,2.25,1.056,2.341.459-2.112.918-2.02.275,1.377.367,2.066a9.525,9.525,0,0,0,2.387,5.555l.138.092c.413.138.321-.138.367-.275s-.092-1.377-.092-2.02a20.292,20.292,0,0,1,.321-4.316h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056,0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.321,0,.6-.367.689-.826.046.459.367.826.689.826h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0a20.292,20.292,0,0,1,.321,4.316c0,.689-.138,1.377-.092,2.02s-.046.413.367.275l.138-.092a9.525,9.525,0,0,0,2.387-5.555c.092-.689-.138-1.745.367-2.066s.505,2.066.872,1.974.689-2.755,1.056-2.341.138,1.377.092,2.112-.138,2.387-.275,3.581a.826.826,0,0,0,0,.321c.046.23.275.184.413.092a4.591,4.591,0,0,0,1.469-1.331c.275-.918,1.24-1.607,2.112-.872a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.056.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056S40.584,22.128,39.666,21.118ZM6.152,9.274c-.138.046-.23-.138-.138-.184.964-.459.505-1.653,0-2.2A8.31,8.31,0,0,0,4.224,5.6a5.509,5.509,0,0,1-2.3-2.846c-.046-.138.184-.184.23-.046a5.05,5.05,0,0,0,1.79,2.433A23.368,23.368,0,0,1,5.922,6.473C6.657,7.116,7.391,8.723,6.152,9.274Zm5.1,5.1a2.571,2.571,0,0,1-.551-3.994c.23-.275,1.1-.23,2.112-.092a7.07,7.07,0,0,1-2.02-1.056,2.525,2.525,0,0,1-.964-2.02,2.571,2.571,0,0,1,1.01-2.066,2.433,2.433,0,0,1,3.4.459,1.974,1.974,0,0,1,.321,1.79A2.479,2.479,0,0,1,17.675,6.7,2.02,2.02,0,0,1,18.5,9.411a1.607,1.607,0,0,1-2.3.689,1.331,1.331,0,0,1-.551-1.79,1.1,1.1,0,0,1,1.469-.459.916.916,0,0,1,.23,1.423l-.138.092a.78.78,0,0,1-.918-.092.643.643,0,0,1-.092-.735.138.138,0,0,1,.23.138.367.367,0,0,0,.046.413.505.505,0,0,0,.6.046h.046a.68.68,0,0,0-.184-1.01.826.826,0,0,0-1.1.321A1.056,1.056,0,0,0,16.3,9.871a1.377,1.377,0,0,0,1.836-.551A1.745,1.745,0,0,0,17.4,6.978a2.2,2.2,0,0,0-2.984.918,2.066,2.066,0,0,0-.092,1.882,2.3,2.3,0,0,0,1.653,1.24A3.03,3.03,0,0,0,18.5,10.7a1.928,1.928,0,0,0,.872-1.285.14.14,0,0,1,.275.046,2.2,2.2,0,0,1-.964,1.515,2.938,2.938,0,0,1-1.653.459H16.39c.138.138.184.23.184.275a3.113,3.113,0,0,1-2.892,3.26H13.13a3.489,3.489,0,0,1-1.882-.6Zm16.482,2.984c-.551,1.24-2.755,2.158-4.361,2.158h-.046a8.585,8.585,0,0,1-2.2-.275l-.413-.092-.413.092a8.677,8.677,0,0,1-2.25.275c-1.607,0-3.811-.918-4.361-2.158A1.653,1.653,0,0,1,14,15.609c.321-.367,1.148-.872,2.846-.23a15.517,15.517,0,0,1,2.525,1.285,3.4,3.4,0,0,0,1.285.6H20.8a3.4,3.4,0,0,0,1.24-.6,15.518,15.518,0,0,1,2.525-1.285c1.7-.643,2.525-.138,2.846.23a1.653,1.653,0,0,1,.321,1.745Zm3.03-6.978a2.571,2.571,0,0,1-.551,3.994,3.489,3.489,0,0,1-1.882.551h-.551a3.581,3.581,0,0,1-2.2-1.148,2.617,2.617,0,0,1-.689-2.112c0-.046,0-.138.184-.275h-.643a2.938,2.938,0,0,1-1.653-.459,2.2,2.2,0,0,1-.964-1.515.14.14,0,1,1,.275-.046,1.928,1.928,0,0,0,.872,1.285,3.03,3.03,0,0,0,2.525.321,2.3,2.3,0,0,0,1.607-1.24,2.066,2.066,0,0,0-.092-1.882,2.2,2.2,0,0,0-2.984-.918,1.745,1.745,0,0,0-.735,2.341,1.377,1.377,0,0,0,1.836.551A1.056,1.056,0,0,0,25.572,8.4a.826.826,0,0,0-1.1-.321.68.68,0,0,0-.184,1.01h.046a.505.505,0,0,0,.6-.046.367.367,0,0,0,.046-.413.138.138,0,0,1,.23-.138.643.643,0,0,1-.092.735.78.78,0,0,1-.918.092l-.138-.092a.916.916,0,0,1,.23-1.423,1.1,1.1,0,0,1,1.469.459A1.331,1.331,0,0,1,25.2,10.1,1.607,1.607,0,0,1,23,9.411,2.02,2.02,0,0,1,23.827,6.7a2.479,2.479,0,0,1,3.122.689,1.974,1.974,0,0,1,.321-1.836,2.433,2.433,0,0,1,3.4-.459,2.571,2.571,0,0,1,1.01,2.066,2.525,2.525,0,0,1-.964,2.02,7.07,7.07,0,0,1-2.02,1.056A3.809,3.809,0,0,1,30.759,10.376Zm4.912-3.9a23.368,23.368,0,0,1,1.974-1.331,5.05,5.05,0,0,0,1.79-2.433c.046-.138.275-.092.23.046A5.463,5.463,0,0,1,37.37,5.6a7.8,7.8,0,0,0-1.836,1.377c-.505.6-.872,1.745.046,2.158.138.046,0,.275-.138.184-1.24-.6-.551-2.158.184-2.846Z”&gt;&lt;/path&gt;&lt;/svg&gt;</span>
<span style=”
    animation: 3s linear infinite rotation;
    display: inline-block;
“>4</span></div><p>ページは存在しません</p>
</h1>

だんぱち（沖縄の方言で散髪）

さて、もともとの予定はちゅら太郎だけがほしいので、ちゅらデータの文字はいりません。しかし、どうやってトリミングのようなことをすればよいでしょうか。

簡単です。SVGは中身はテキストなので、文字にあたるアウトラインを削除すればおｋです。

<h1 class="mainvisual_text"><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
</style><div class="container-404" style="
    font-size: 100px;
    font-weight: bold;
    
"><span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
">4</span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
"><svg role="img" aria-label="ちゅらデータ" xmlns="http://www.w3.org/2000/svg" width="213.257" height="36.774" viewBox="0 0 213.257 36.774" style="
    fill: #fff;
">
        <g transform="translate(45.68 3.742)"><path d="M99.5,19.458h5l.551-2.158h4.912l-.413,2.158H124.7V24H108.82l-.459,2.617h8.264a7.9,7.9,0,0,1,4.27,1.194,7.162,7.162,0,0,1,2.433,2.571,6.29,6.29,0,0,1,.735,2.938,6.381,6.381,0,0,1-.735,2.938,6.932,6.932,0,0,1-2.433,2.571,7.575,7.575,0,0,1-4.316,1.148H103.035v-5.1h14.324a1.515,1.515,0,0,0,.918-.275,1.607,1.607,0,0,0,.505-.6,1.653,1.653,0,0,0,.184-.735,1.515,1.515,0,0,0-.184-.643,1.653,1.653,0,0,0-.505-.6,1.7,1.7,0,0,0-.918-.275H105.468a2.294,2.294,0,0,1-2.158-1.01,3.306,3.306,0,0,1-.321-2.433l.735-4.27H99.5Z" transform="translate(-99.5 -13.099)"></path><path d="M177.1,27.2v1.745h2.112a4.958,4.958,0,0,1,2.709.826,6.382,6.382,0,0,1,1.882,1.882,8.586,8.586,0,0,1,1.056,2.341,9.272,9.272,0,0,1,.321,2.433,9.456,9.456,0,0,1-.6,3.3,5.83,5.83,0,0,1-2.388,2.8,7.529,7.529,0,0,1-4.27,1.194h-1.515a4.728,4.728,0,0,1-.551,1.469h-4.27a17.169,17.169,0,0,0,1.515-5V35.556L172,36.841,167.134,42.4a2.112,2.112,0,0,1-2.938.092,1.79,1.79,0,0,1-.6-1.377V29.128h3.994v6.886l2.066-2.3a25.848,25.848,0,0,1,3.076-3.076l.321-.275V27.2Zm.735,12.579a3.168,3.168,0,0,0,1.882-.551,3.122,3.122,0,0,0,1.1-1.285,3.856,3.856,0,0,0,.321-1.515,3.535,3.535,0,0,0-.321-1.515,3.49,3.49,0,0,0-1.1-1.285,3.443,3.443,0,0,0-1.882-.643H177.1v6.795Z" transform="translate(-134.171 -18.454)"></path><path d="M219.143,35.849h17.033a2.387,2.387,0,0,0,1.194-.321,2.111,2.111,0,0,0,.689-.689,1.469,1.469,0,0,0,0-1.561,2.111,2.111,0,0,0-.689-.689,2.387,2.387,0,0,0-1.194-.321H225.891a7.988,7.988,0,0,1-4.316-1.194,6.657,6.657,0,0,1-2.387-2.617,6.841,6.841,0,0,1-.689-2.984V19h5.05v6.473h.046a2.066,2.066,0,0,0,.918,1.469,2.341,2.341,0,0,0,1.194.321h10.284a7.759,7.759,0,0,1,4.316,1.194,6.841,6.841,0,0,1,2.433,2.617,6.7,6.7,0,0,1,.735,2.984A6.427,6.427,0,0,1,242.74,37a7.024,7.024,0,0,1-2.433,2.617,7.9,7.9,0,0,1-4.27,1.194H219.143ZM240.812,19v4.958H227.039V19Z" transform="translate(-163.867 -14.019)"></path><path d="M281.9,13.131h22.817v4.958H281.9Zm0,8.31h22.955v5h-7.3a18.82,18.82,0,0,1-.6,2.892,9.227,9.227,0,0,1-2.433,3.948,6.519,6.519,0,0,1-4.315,1.745H281.9V30.072h7.07a3.305,3.305,0,0,0,2.341-1.056,4.683,4.683,0,0,0,1.194-2.3,1.056,1.056,0,0,1,.046-.275H281.9Zm11.661-10.605a2.686,2.686,0,1,1,2.686,2.686A2.686,2.686,0,0,1,293.561,10.836Zm6.381,0a2.686,2.686,0,1,1,2.686,2.686A2.686,2.686,0,0,1,299.943,10.836Z" transform="translate(-198.161 -8.15)"></path><path d="M342.9,37.1h22.817v5H342.9Z" transform="translate(-231.156 -23.809)"></path><path d="M413.111,19h16.022a2.525,2.525,0,0,1,1.791.689,2.25,2.25,0,0,1,.689,1.79L430.419,30.2a19.515,19.515,0,0,1-1.377,5,11.3,11.3,0,0,1-2.984,3.948,7.483,7.483,0,0,1-4.5,1.745H415.82V35.94h5.142a3.764,3.764,0,0,0,2.479-1.056,5.371,5.371,0,0,0,1.469-2.3l.092-.275h-9.09v-5h9.917l.321-2.433q.092-.872-.643-.918h-10.7a17.631,17.631,0,0,1-1.01,3.03,11.294,11.294,0,0,1-2.984,3.948,7.483,7.483,0,0,1-4.5,1.745H403.7V27.768h2.02a3.765,3.765,0,0,0,2.479-1.056,5.372,5.372,0,0,0,1.469-2.3,15.432,15.432,0,0,0,.6-2.8v-.184a2.938,2.938,0,0,1,1.01-1.745A2.846,2.846,0,0,1,413.111,19Z" transform="translate(-264.043 -14.018)"></path></g><g transform="translate(13.867 15.342)"><path d="M40.991,33.731a15.288,15.288,0,0,0-2.479,1.24,3.351,3.351,0,0,1-1.423.643H37a3.351,3.351,0,0,1-1.377-.643,15.288,15.288,0,0,0-2.479-1.24c-1.148-.459-2.066-.413-2.571.138a1.377,1.377,0,0,0-.275,1.423c.505,1.1,2.617,1.974,4.086,2.02a8.4,8.4,0,0,0,2.2-.275l.459-.092h.046l.459.092a8.355,8.355,0,0,0,2.158.275h.046c1.469,0,3.627-.872,4.086-2.02a1.377,1.377,0,0,0-.275-1.423C43.057,33.318,42.139,33.272,40.991,33.731Zm-6.2,2.571a1.561,1.561,0,0,1-.872.184,6.106,6.106,0,0,1-1.24-.138c-.735-.184-1.1-.551-1.056-1.056a.872.872,0,0,1,.413-.643,1.331,1.331,0,0,1,.826-.184,3.214,3.214,0,0,1,1.285.6c.321.23.826.643.826,1.01A.367.367,0,0,1,34.793,36.3Zm6.7.046a6.106,6.106,0,0,1-1.24.138,1.561,1.561,0,0,1-.872-.184.367.367,0,0,1-.138-.275c-.046-.367.505-.78.826-1.01a3.214,3.214,0,0,1,1.285-.6,1.331,1.331,0,0,1,.826.184.872.872,0,0,1,.413.643C42.6,35.8,42.185,36.164,41.5,36.348Z" transform="translate(-30.204 -33.418)"></path><path d="M35.962,36.85a2.984,2.984,0,0,0-1.148-.551h-.092a1.056,1.056,0,0,0-.551.138.6.6,0,0,0-.275.459c-.046.367.413.643.872.735a4.317,4.317,0,0,0,1.882,0H36.7C36.7,37.493,36.421,37.172,35.962,36.85Z" transform="translate(-32.2 -34.977)"></path><path d="M52.979,36.437a1.056,1.056,0,0,0-.551-.138h-.092a2.984,2.984,0,0,0-1.148.551c-.459.321-.689.643-.689.735h.046a3.677,3.677,0,0,0,1.882,0c.6-.138.918-.367.872-.735A.6.6,0,0,0,52.979,36.437Z" transform="translate(-41.182 -34.977)"></path></g><g transform="translate(11.799 11.11)"><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" transform="translate(14.783)" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse></g><path d="M26.483,16.33a2.25,2.25,0,0,1-.551-2.525l-.321.275a1.607,1.607,0,0,1-2.25-.275,1.285,1.285,0,0,1,0-1.607,1.148,1.148,0,0,1,1.331-.321.918.918,0,0,1,.551.689.872.872,0,0,1-.275.78.735.735,0,0,1-.643.138.689.689,0,0,1-.551-.505.6.6,0,0,1,.23-.6.147.147,0,1,1,.184.23.321.321,0,0,0-.138.321.413.413,0,0,0,.321.275.459.459,0,0,0,.413-.092.6.6,0,0,0,.184-.551.643.643,0,0,0-.413-.505.872.872,0,0,0-1.01.23,1.01,1.01,0,0,0,0,1.24,1.331,1.331,0,0,0,1.836.23,1.7,1.7,0,0,0,.321-2.341A2.158,2.158,0,0,0,22.718,11,2.341,2.341,0,0,0,21.8,12.84a2.25,2.25,0,0,0,.872,1.79,9.09,9.09,0,0,0,3.03,1.331Z" transform="translate(-11.792 -5.724)"></path><path d="M62.837,13.14a2.341,2.341,0,0,0-.918-1.836,2.158,2.158,0,0,0-2.984.413,1.7,1.7,0,0,0,.321,2.341,1.331,1.331,0,0,0,1.836-.23,1.01,1.01,0,0,0,0-1.24.872.872,0,0,0-1.01-.23.643.643,0,0,0-.413.505.6.6,0,0,0,.184.551.459.459,0,0,0,.413.092.413.413,0,0,0,.321-.275.321.321,0,0,0-.138-.321.147.147,0,0,1,.184-.23.6.6,0,0,1,.23.643.689.689,0,0,1-.505.367.735.735,0,0,1-.643-.138.872.872,0,0,1-.275-.78.918.918,0,0,1,.551-.689,1.148,1.148,0,0,1,1.331.321,1.285,1.285,0,0,1,0,1.607,1.607,1.607,0,0,1-2.25.275l-.321-.321a2.25,2.25,0,0,1-.551,2.571l.78-.23a9.09,9.09,0,0,0,3.03-1.331A2.25,2.25,0,0,0,62.837,13.14Z" transform="translate(-31.481 -5.887)"></path><path d="M43.208,60.8H41.28V48.867a.367.367,0,0,0-.367-.367H37.057a.367.367,0,0,0-.367.367V60.8h-1.1V53.091a.367.367,0,0,0-.367-.367H31.41a.367.367,0,0,0-.367.367V60.8H29.895V50.933a.367.367,0,0,0-.367-.367H25.717a.367.367,0,0,0-.367.367V60.8H23.467a.367.367,0,0,0-.367.367V62.64a.367.367,0,0,0,.367.367H43.208a.367.367,0,0,0,.367-.367V61.171A.367.367,0,0,0,43.208,60.8Z" transform="translate(-12.495 -26.234)"></path><g transform="translate(4.04 25.572)"><path d="M12.978,60.98a1.445,1.445,0,0,1,2.066.23,1.24,1.24,0,0,1-.23,1.745,1.01,1.01,0,0,1-.735.23.964.964,0,0,1-.643-.367.826.826,0,0,1,.138-1.148.689.689,0,0,1,.505-.138.643.643,0,0,1,.459.275.6.6,0,0,1-.092.78h-.138a.092.092,0,0,1,0-.138.367.367,0,0,0,.046-.505.413.413,0,0,0-.275-.184.459.459,0,0,0-.321.092.6.6,0,0,0-.138.826.735.735,0,0,0,.505.275.78.78,0,0,0,.6-.184,1.01,1.01,0,0,0,.184-1.423,1.273,1.273,0,0,0-1.79-.184,1.653,1.653,0,0,0-.6,1.056,1.745,1.745,0,0,0,.046.689,1.607,1.607,0,0,0,.275.551,1.974,1.974,0,0,0,1.331.78,2.02,2.02,0,0,0,1.515-.413,2.663,2.663,0,0,0,.505-3.673,3.581,3.581,0,0,0-2.25-1.285H13.85a2.158,2.158,0,0,0-1.79-1.148,1.285,1.285,0,0,0-1.79-1.607l-.275.138a1.882,1.882,0,0,1-1.1-.551H8.8a4.545,4.545,0,0,0,.413,1.148l.275.5a1.285,1.285,0,0,0,.735,1.148,2.112,2.112,0,0,0,2.158,3.351,1.882,1.882,0,0,1,.6-.872Z" transform="translate(-8.8 -55.7)"></path><path d="M72.637,56h-.092a1.882,1.882,0,0,1-1.148.551l-.275-.138a1.285,1.285,0,0,0-1.745,1.469,2.158,2.158,0,0,0-1.745,1.194h-.092a3.581,3.581,0,0,0-2.25,1.285,2.663,2.663,0,0,0,.5,3.673,2.02,2.02,0,0,0,1.515.413,1.974,1.974,0,0,0,1.331-.78,1.607,1.607,0,0,0,.275-.551,1.745,1.745,0,0,0,.046-.689,1.653,1.653,0,0,0-.6-1.056,1.273,1.273,0,0,0-1.79.184,1.01,1.01,0,0,0,.184,1.423.781.781,0,0,0,.6.184.735.735,0,0,0,.505-.275.6.6,0,0,0-.138-.826.459.459,0,0,0-.321-.092.413.413,0,0,0-.275.184.367.367,0,0,0,.046.505.092.092,0,0,1,0,.138h-.138a.6.6,0,0,1-.092-.78.643.643,0,0,1,.459-.275.689.689,0,0,1,.505.138.826.826,0,0,1,.138,1.148.964.964,0,0,1-.643.367,1.01,1.01,0,0,1-.735-.23,1.24,1.24,0,0,1-.23-1.745,1.445,1.445,0,0,1,2.066-.23,1.882,1.882,0,0,1,.6.872,2.112,2.112,0,0,0,2.158-3.351,1.285,1.285,0,0,0,.735-1.148l.275-.505A4.591,4.591,0,0,0,72.637,56Z" transform="translate(-39.077 -55.862)"></path></g><path d="M39.666,21.118a12.763,12.763,0,0,1-1.928-2.892.092.092,0,0,1,0-.092,2.3,2.3,0,0,1-2.525-1.928c-.138-1.285,1.1-2.433,2.158-1.515a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.1.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056s-.918-2.387-1.836-3.4a12.763,12.763,0,0,1-1.928-2.892.138.138,0,0,1,.138-.184h0a5.739,5.739,0,0,0,3.765-3.214,7.3,7.3,0,0,0,.275-5A2.479,2.479,0,0,0,38.885.138l.092-.092c-.964.413-1.285,1.7-2.158,2.25s-2.663,0-3.9.413-1.148.735-1.79,1.056a5.75,5.75,0,0,1-4.361-.092,10.332,10.332,0,0,0-4.453-.735,2.3,2.3,0,0,0-3.122,0,9.667,9.667,0,0,0-4.361.78,5.75,5.75,0,0,1-4.361.092,11.477,11.477,0,0,0-1.79-1.056c-.689-.23-2.8.275-3.9-.413S3.535.413,2.571,0l.092.092A2.479,2.479,0,0,0,1.7,1.607a7.3,7.3,0,0,0,.275,5A5.739,5.739,0,0,0,5.739,9.825h0a.138.138,0,0,1,.092.138h0a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.349,12.349,0,0,1-1.01,1.331,7.838,7.838,0,0,0-1.7,2.387,3.581,3.581,0,0,0-.138.872c0,.046,0,.138,0,.184.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.23-1.24c1.056-.918,2.3.413,2.158,1.515a2.485,2.485,0,0,1-2.479,1.928H3.765a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.35,12.35,0,0,1-1.056,1.377,7.614,7.614,0,0,0-1.7,2.387A3.581,3.581,0,0,0,0,24.332v.184c.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.275-1.24c.78-.689,1.7-.092,2.02.689v.138A4.683,4.683,0,0,0,5.6,25.159c.138.092.367.138.413-.092a.826.826,0,0,0,0-.321q-.207-1.79-.275-3.581c-.046-1.194-.138-1.836.092-2.112s.735,2.25,1.056,2.341.459-2.112.918-2.02.275,1.377.367,2.066a9.525,9.525,0,0,0,2.387,5.555l.138.092c.413.138.321-.138.367-.275s-.092-1.377-.092-2.02a20.292,20.292,0,0,1,.321-4.316h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056,0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.321,0,.6-.367.689-.826.046.459.367.826.689.826h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0a20.292,20.292,0,0,1,.321,4.316c0,.689-.138,1.377-.092,2.02s-.046.413.367.275l.138-.092a9.525,9.525,0,0,0,2.387-5.555c.092-.689-.138-1.745.367-2.066s.505,2.066.872,1.974.689-2.755,1.056-2.341.138,1.377.092,2.112-.138,2.387-.275,3.581a.826.826,0,0,0,0,.321c.046.23.275.184.413.092a4.591,4.591,0,0,0,1.469-1.331c.275-.918,1.24-1.607,2.112-.872a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.056.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056S40.584,22.128,39.666,21.118ZM6.152,9.274c-.138.046-.23-.138-.138-.184.964-.459.505-1.653,0-2.2A8.31,8.31,0,0,0,4.224,5.6a5.509,5.509,0,0,1-2.3-2.846c-.046-.138.184-.184.23-.046a5.05,5.05,0,0,0,1.79,2.433A23.368,23.368,0,0,1,5.922,6.473C6.657,7.116,7.391,8.723,6.152,9.274Zm5.1,5.1a2.571,2.571,0,0,1-.551-3.994c.23-.275,1.1-.23,2.112-.092a7.07,7.07,0,0,1-2.02-1.056,2.525,2.525,0,0,1-.964-2.02,2.571,2.571,0,0,1,1.01-2.066,2.433,2.433,0,0,1,3.4.459,1.974,1.974,0,0,1,.321,1.79A2.479,2.479,0,0,1,17.675,6.7,2.02,2.02,0,0,1,18.5,9.411a1.607,1.607,0,0,1-2.3.689,1.331,1.331,0,0,1-.551-1.79,1.1,1.1,0,0,1,1.469-.459.916.916,0,0,1,.23,1.423l-.138.092a.78.78,0,0,1-.918-.092.643.643,0,0,1-.092-.735.138.138,0,0,1,.23.138.367.367,0,0,0,.046.413.505.505,0,0,0,.6.046h.046a.68.68,0,0,0-.184-1.01.826.826,0,0,0-1.1.321A1.056,1.056,0,0,0,16.3,9.871a1.377,1.377,0,0,0,1.836-.551A1.745,1.745,0,0,0,17.4,6.978a2.2,2.2,0,0,0-2.984.918,2.066,2.066,0,0,0-.092,1.882,2.3,2.3,0,0,0,1.653,1.24A3.03,3.03,0,0,0,18.5,10.7a1.928,1.928,0,0,0,.872-1.285.14.14,0,0,1,.275.046,2.2,2.2,0,0,1-.964,1.515,2.938,2.938,0,0,1-1.653.459H16.39c.138.138.184.23.184.275a3.113,3.113,0,0,1-2.892,3.26H13.13a3.489,3.489,0,0,1-1.882-.6Zm16.482,2.984c-.551,1.24-2.755,2.158-4.361,2.158h-.046a8.585,8.585,0,0,1-2.2-.275l-.413-.092-.413.092a8.677,8.677,0,0,1-2.25.275c-1.607,0-3.811-.918-4.361-2.158A1.653,1.653,0,0,1,14,15.609c.321-.367,1.148-.872,2.846-.23a15.517,15.517,0,0,1,2.525,1.285,3.4,3.4,0,0,0,1.285.6H20.8a3.4,3.4,0,0,0,1.24-.6,15.518,15.518,0,0,1,2.525-1.285c1.7-.643,2.525-.138,2.846.23a1.653,1.653,0,0,1,.321,1.745Zm3.03-6.978a2.571,2.571,0,0,1-.551,3.994,3.489,3.489,0,0,1-1.882.551h-.551a3.581,3.581,0,0,1-2.2-1.148,2.617,2.617,0,0,1-.689-2.112c0-.046,0-.138.184-.275h-.643a2.938,2.938,0,0,1-1.653-.459,2.2,2.2,0,0,1-.964-1.515.14.14,0,1,1,.275-.046,1.928,1.928,0,0,0,.872,1.285,3.03,3.03,0,0,0,2.525.321,2.3,2.3,0,0,0,1.607-1.24,2.066,2.066,0,0,0-.092-1.882,2.2,2.2,0,0,0-2.984-.918,1.745,1.745,0,0,0-.735,2.341,1.377,1.377,0,0,0,1.836.551A1.056,1.056,0,0,0,25.572,8.4a.826.826,0,0,0-1.1-.321.68.68,0,0,0-.184,1.01h.046a.505.505,0,0,0,.6-.046.367.367,0,0,0,.046-.413.138.138,0,0,1,.23-.138.643.643,0,0,1-.092.735.78.78,0,0,1-.918.092l-.138-.092a.916.916,0,0,1,.23-1.423,1.1,1.1,0,0,1,1.469.459A1.331,1.331,0,0,1,25.2,10.1,1.607,1.607,0,0,1,23,9.411,2.02,2.02,0,0,1,23.827,6.7a2.479,2.479,0,0,1,3.122.689,1.974,1.974,0,0,1,.321-1.836,2.433,2.433,0,0,1,3.4-.459,2.571,2.571,0,0,1,1.01,2.066,2.525,2.525,0,0,1-.964,2.02,7.07,7.07,0,0,1-2.02,1.056A3.809,3.809,0,0,1,30.759,10.376Zm4.912-3.9a23.368,23.368,0,0,1,1.974-1.331,5.05,5.05,0,0,0,1.79-2.433c.046-.138.275-.092.23.046A5.463,5.463,0,0,1,37.37,5.6a7.8,7.8,0,0,0-1.836,1.377c-.505.6-.872,1.745.046,2.158.138.046,0,.275-.138.184-1.24-.6-.551-2.158.184-2.846Z"></path></svg></span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
">4</span></div><p>ページは存在しません</p>
</h1>

ちょっとSVGのテキスト量が減ったのがわかりますでしょうか（わからないよね、わかる。わかるよ）

さて、テキスト量を減らしただけでは見栄えがアレです。下記画像をみてください。

月のような衛星みたいな 動きをしているので、中心に寄せられないか考えてみます。

また、SVGの話に戻りますが、SVGはviewBoxという属性があります。

https://www.indetail.co.jp/blog/13002/

詳しい話は↑の記事を確認してほしいのですが、要は描画されるエリアと画像の拡大・縮小などがコントロールすることができます。

今回はそれを使って反映してみました。するとどうなるでしょうか。

Perfect!!!

良いですね。これすべてCSSとHTMLでやっているのでとても良い時代になったなと感じます。

さぁ、これで Be Crazy になれたでしょうか。いいえ、まだまです。うちの社長と比べたらまだまだこんなものではありません。

RAINBOW

輝かせたいですよね？

色味が白なので味気がない気がします。

さて、ここから回転させるときに使ったようなanimationを再度使っていきます。

<h1 class="mainvisual_text"><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}</style><div class="container-404" style="
    font-size: 100px;
    font-weight: bold;
"><span style="
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span>
<span style="
    display: inline-block;
    width: 200px;
    height: 135px;
    animation: 3s linear infinite rotation;
"><svg role="img" id="img-404" aria-label="ちゅらデータ" xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="-2 0 50 36.774" style="
    fill: #fff;
    position: absolute;
    width: 200px;
    height: 200px;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
">
        <g transform="translate(13.867 15.342)"><path d="M40.991,33.731a15.288,15.288,0,0,0-2.479,1.24,3.351,3.351,0,0,1-1.423.643H37a3.351,3.351,0,0,1-1.377-.643,15.288,15.288,0,0,0-2.479-1.24c-1.148-.459-2.066-.413-2.571.138a1.377,1.377,0,0,0-.275,1.423c.505,1.1,2.617,1.974,4.086,2.02a8.4,8.4,0,0,0,2.2-.275l.459-.092h.046l.459.092a8.355,8.355,0,0,0,2.158.275h.046c1.469,0,3.627-.872,4.086-2.02a1.377,1.377,0,0,0-.275-1.423C43.057,33.318,42.139,33.272,40.991,33.731Zm-6.2,2.571a1.561,1.561,0,0,1-.872.184,6.106,6.106,0,0,1-1.24-.138c-.735-.184-1.1-.551-1.056-1.056a.872.872,0,0,1,.413-.643,1.331,1.331,0,0,1,.826-.184,3.214,3.214,0,0,1,1.285.6c.321.23.826.643.826,1.01A.367.367,0,0,1,34.793,36.3Zm6.7.046a6.106,6.106,0,0,1-1.24.138,1.561,1.561,0,0,1-.872-.184.367.367,0,0,1-.138-.275c-.046-.367.505-.78.826-1.01a3.214,3.214,0,0,1,1.285-.6,1.331,1.331,0,0,1,.826.184.872.872,0,0,1,.413.643C42.6,35.8,42.185,36.164,41.5,36.348Z" transform="translate(-30.204 -33.418)"></path><path d="M35.962,36.85a2.984,2.984,0,0,0-1.148-.551h-.092a1.056,1.056,0,0,0-.551.138.6.6,0,0,0-.275.459c-.046.367.413.643.872.735a4.317,4.317,0,0,0,1.882,0H36.7C36.7,37.493,36.421,37.172,35.962,36.85Z" transform="translate(-32.2 -34.977)"></path><path d="M52.979,36.437a1.056,1.056,0,0,0-.551-.138h-.092a2.984,2.984,0,0,0-1.148.551c-.459.321-.689.643-.689.735h.046a3.677,3.677,0,0,0,1.882,0c.6-.138.918-.367.872-.735A.6.6,0,0,0,52.979,36.437Z" transform="translate(-41.182 -34.977)"></path></g><g transform="translate(11.799 11.11)"><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" transform="translate(14.783)" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse></g><path d="M26.483,16.33a2.25,2.25,0,0,1-.551-2.525l-.321.275a1.607,1.607,0,0,1-2.25-.275,1.285,1.285,0,0,1,0-1.607,1.148,1.148,0,0,1,1.331-.321.918.918,0,0,1,.551.689.872.872,0,0,1-.275.78.735.735,0,0,1-.643.138.689.689,0,0,1-.551-.505.6.6,0,0,1,.23-.6.147.147,0,1,1,.184.23.321.321,0,0,0-.138.321.413.413,0,0,0,.321.275.459.459,0,0,0,.413-.092.6.6,0,0,0,.184-.551.643.643,0,0,0-.413-.505.872.872,0,0,0-1.01.23,1.01,1.01,0,0,0,0,1.24,1.331,1.331,0,0,0,1.836.23,1.7,1.7,0,0,0,.321-2.341A2.158,2.158,0,0,0,22.718,11,2.341,2.341,0,0,0,21.8,12.84a2.25,2.25,0,0,0,.872,1.79,9.09,9.09,0,0,0,3.03,1.331Z" transform="translate(-11.792 -5.724)"></path><path d="M62.837,13.14a2.341,2.341,0,0,0-.918-1.836,2.158,2.158,0,0,0-2.984.413,1.7,1.7,0,0,0,.321,2.341,1.331,1.331,0,0,0,1.836-.23,1.01,1.01,0,0,0,0-1.24.872.872,0,0,0-1.01-.23.643.643,0,0,0-.413.505.6.6,0,0,0,.184.551.459.459,0,0,0,.413.092.413.413,0,0,0,.321-.275.321.321,0,0,0-.138-.321.147.147,0,0,1,.184-.23.6.6,0,0,1,.23.643.689.689,0,0,1-.505.367.735.735,0,0,1-.643-.138.872.872,0,0,1-.275-.78.918.918,0,0,1,.551-.689,1.148,1.148,0,0,1,1.331.321,1.285,1.285,0,0,1,0,1.607,1.607,1.607,0,0,1-2.25.275l-.321-.321a2.25,2.25,0,0,1-.551,2.571l.78-.23a9.09,9.09,0,0,0,3.03-1.331A2.25,2.25,0,0,0,62.837,13.14Z" transform="translate(-31.481 -5.887)"></path><path d="M43.208,60.8H41.28V48.867a.367.367,0,0,0-.367-.367H37.057a.367.367,0,0,0-.367.367V60.8h-1.1V53.091a.367.367,0,0,0-.367-.367H31.41a.367.367,0,0,0-.367.367V60.8H29.895V50.933a.367.367,0,0,0-.367-.367H25.717a.367.367,0,0,0-.367.367V60.8H23.467a.367.367,0,0,0-.367.367V62.64a.367.367,0,0,0,.367.367H43.208a.367.367,0,0,0,.367-.367V61.171A.367.367,0,0,0,43.208,60.8Z" transform="translate(-12.495 -26.234)"></path><g transform="translate(4.04 25.572)"><path d="M12.978,60.98a1.445,1.445,0,0,1,2.066.23,1.24,1.24,0,0,1-.23,1.745,1.01,1.01,0,0,1-.735.23.964.964,0,0,1-.643-.367.826.826,0,0,1,.138-1.148.689.689,0,0,1,.505-.138.643.643,0,0,1,.459.275.6.6,0,0,1-.092.78h-.138a.092.092,0,0,1,0-.138.367.367,0,0,0,.046-.505.413.413,0,0,0-.275-.184.459.459,0,0,0-.321.092.6.6,0,0,0-.138.826.735.735,0,0,0,.505.275.78.78,0,0,0,.6-.184,1.01,1.01,0,0,0,.184-1.423,1.273,1.273,0,0,0-1.79-.184,1.653,1.653,0,0,0-.6,1.056,1.745,1.745,0,0,0,.046.689,1.607,1.607,0,0,0,.275.551,1.974,1.974,0,0,0,1.331.78,2.02,2.02,0,0,0,1.515-.413,2.663,2.663,0,0,0,.505-3.673,3.581,3.581,0,0,0-2.25-1.285H13.85a2.158,2.158,0,0,0-1.79-1.148,1.285,1.285,0,0,0-1.79-1.607l-.275.138a1.882,1.882,0,0,1-1.1-.551H8.8a4.545,4.545,0,0,0,.413,1.148l.275.5a1.285,1.285,0,0,0,.735,1.148,2.112,2.112,0,0,0,2.158,3.351,1.882,1.882,0,0,1,.6-.872Z" transform="translate(-8.8 -55.7)"></path><path d="M72.637,56h-.092a1.882,1.882,0,0,1-1.148.551l-.275-.138a1.285,1.285,0,0,0-1.745,1.469,2.158,2.158,0,0,0-1.745,1.194h-.092a3.581,3.581,0,0,0-2.25,1.285,2.663,2.663,0,0,0,.5,3.673,2.02,2.02,0,0,0,1.515.413,1.974,1.974,0,0,0,1.331-.78,1.607,1.607,0,0,0,.275-.551,1.745,1.745,0,0,0,.046-.689,1.653,1.653,0,0,0-.6-1.056,1.273,1.273,0,0,0-1.79.184,1.01,1.01,0,0,0,.184,1.423.781.781,0,0,0,.6.184.735.735,0,0,0,.505-.275.6.6,0,0,0-.138-.826.459.459,0,0,0-.321-.092.413.413,0,0,0-.275.184.367.367,0,0,0,.046.505.092.092,0,0,1,0,.138h-.138a.6.6,0,0,1-.092-.78.643.643,0,0,1,.459-.275.689.689,0,0,1,.505.138.826.826,0,0,1,.138,1.148.964.964,0,0,1-.643.367,1.01,1.01,0,0,1-.735-.23,1.24,1.24,0,0,1-.23-1.745,1.445,1.445,0,0,1,2.066-.23,1.882,1.882,0,0,1,.6.872,2.112,2.112,0,0,0,2.158-3.351,1.285,1.285,0,0,0,.735-1.148l.275-.505A4.591,4.591,0,0,0,72.637,56Z" transform="translate(-39.077 -55.862)"></path></g><path d="M39.666,21.118a12.763,12.763,0,0,1-1.928-2.892.092.092,0,0,1,0-.092,2.3,2.3,0,0,1-2.525-1.928c-.138-1.285,1.1-2.433,2.158-1.515a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.1.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056s-.918-2.387-1.836-3.4a12.763,12.763,0,0,1-1.928-2.892.138.138,0,0,1,.138-.184h0a5.739,5.739,0,0,0,3.765-3.214,7.3,7.3,0,0,0,.275-5A2.479,2.479,0,0,0,38.885.138l.092-.092c-.964.413-1.285,1.7-2.158,2.25s-2.663,0-3.9.413-1.148.735-1.79,1.056a5.75,5.75,0,0,1-4.361-.092,10.332,10.332,0,0,0-4.453-.735,2.3,2.3,0,0,0-3.122,0,9.667,9.667,0,0,0-4.361.78,5.75,5.75,0,0,1-4.361.092,11.477,11.477,0,0,0-1.79-1.056c-.689-.23-2.8.275-3.9-.413S3.535.413,2.571,0l.092.092A2.479,2.479,0,0,0,1.7,1.607a7.3,7.3,0,0,0,.275,5A5.739,5.739,0,0,0,5.739,9.825h0a.138.138,0,0,1,.092.138h0a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.349,12.349,0,0,1-1.01,1.331,7.838,7.838,0,0,0-1.7,2.387,3.581,3.581,0,0,0-.138.872c0,.046,0,.138,0,.184.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.23-1.24c1.056-.918,2.3.413,2.158,1.515a2.485,2.485,0,0,1-2.479,1.928H3.765a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.35,12.35,0,0,1-1.056,1.377,7.614,7.614,0,0,0-1.7,2.387A3.581,3.581,0,0,0,0,24.332v.184c.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.275-1.24c.78-.689,1.7-.092,2.02.689v.138A4.683,4.683,0,0,0,5.6,25.159c.138.092.367.138.413-.092a.826.826,0,0,0,0-.321q-.207-1.79-.275-3.581c-.046-1.194-.138-1.836.092-2.112s.735,2.25,1.056,2.341.459-2.112.918-2.02.275,1.377.367,2.066a9.525,9.525,0,0,0,2.387,5.555l.138.092c.413.138.321-.138.367-.275s-.092-1.377-.092-2.02a20.292,20.292,0,0,1,.321-4.316h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056,0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.321,0,.6-.367.689-.826.046.459.367.826.689.826h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0a20.292,20.292,0,0,1,.321,4.316c0,.689-.138,1.377-.092,2.02s-.046.413.367.275l.138-.092a9.525,9.525,0,0,0,2.387-5.555c.092-.689-.138-1.745.367-2.066s.505,2.066.872,1.974.689-2.755,1.056-2.341.138,1.377.092,2.112-.138,2.387-.275,3.581a.826.826,0,0,0,0,.321c.046.23.275.184.413.092a4.591,4.591,0,0,0,1.469-1.331c.275-.918,1.24-1.607,2.112-.872a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.056.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056S40.584,22.128,39.666,21.118ZM6.152,9.274c-.138.046-.23-.138-.138-.184.964-.459.505-1.653,0-2.2A8.31,8.31,0,0,0,4.224,5.6a5.509,5.509,0,0,1-2.3-2.846c-.046-.138.184-.184.23-.046a5.05,5.05,0,0,0,1.79,2.433A23.368,23.368,0,0,1,5.922,6.473C6.657,7.116,7.391,8.723,6.152,9.274Zm5.1,5.1a2.571,2.571,0,0,1-.551-3.994c.23-.275,1.1-.23,2.112-.092a7.07,7.07,0,0,1-2.02-1.056,2.525,2.525,0,0,1-.964-2.02,2.571,2.571,0,0,1,1.01-2.066,2.433,2.433,0,0,1,3.4.459,1.974,1.974,0,0,1,.321,1.79A2.479,2.479,0,0,1,17.675,6.7,2.02,2.02,0,0,1,18.5,9.411a1.607,1.607,0,0,1-2.3.689,1.331,1.331,0,0,1-.551-1.79,1.1,1.1,0,0,1,1.469-.459.916.916,0,0,1,.23,1.423l-.138.092a.78.78,0,0,1-.918-.092.643.643,0,0,1-.092-.735.138.138,0,0,1,.23.138.367.367,0,0,0,.046.413.505.505,0,0,0,.6.046h.046a.68.68,0,0,0-.184-1.01.826.826,0,0,0-1.1.321A1.056,1.056,0,0,0,16.3,9.871a1.377,1.377,0,0,0,1.836-.551A1.745,1.745,0,0,0,17.4,6.978a2.2,2.2,0,0,0-2.984.918,2.066,2.066,0,0,0-.092,1.882,2.3,2.3,0,0,0,1.653,1.24A3.03,3.03,0,0,0,18.5,10.7a1.928,1.928,0,0,0,.872-1.285.14.14,0,0,1,.275.046,2.2,2.2,0,0,1-.964,1.515,2.938,2.938,0,0,1-1.653.459H16.39c.138.138.184.23.184.275a3.113,3.113,0,0,1-2.892,3.26H13.13a3.489,3.489,0,0,1-1.882-.6Zm16.482,2.984c-.551,1.24-2.755,2.158-4.361,2.158h-.046a8.585,8.585,0,0,1-2.2-.275l-.413-.092-.413.092a8.677,8.677,0,0,1-2.25.275c-1.607,0-3.811-.918-4.361-2.158A1.653,1.653,0,0,1,14,15.609c.321-.367,1.148-.872,2.846-.23a15.517,15.517,0,0,1,2.525,1.285,3.4,3.4,0,0,0,1.285.6H20.8a3.4,3.4,0,0,0,1.24-.6,15.518,15.518,0,0,1,2.525-1.285c1.7-.643,2.525-.138,2.846.23a1.653,1.653,0,0,1,.321,1.745Zm3.03-6.978a2.571,2.571,0,0,1-.551,3.994,3.489,3.489,0,0,1-1.882.551h-.551a3.581,3.581,0,0,1-2.2-1.148,2.617,2.617,0,0,1-.689-2.112c0-.046,0-.138.184-.275h-.643a2.938,2.938,0,0,1-1.653-.459,2.2,2.2,0,0,1-.964-1.515.14.14,0,1,1,.275-.046,1.928,1.928,0,0,0,.872,1.285,3.03,3.03,0,0,0,2.525.321,2.3,2.3,0,0,0,1.607-1.24,2.066,2.066,0,0,0-.092-1.882,2.2,2.2,0,0,0-2.984-.918,1.745,1.745,0,0,0-.735,2.341,1.377,1.377,0,0,0,1.836.551A1.056,1.056,0,0,0,25.572,8.4a.826.826,0,0,0-1.1-.321.68.68,0,0,0-.184,1.01h.046a.505.505,0,0,0,.6-.046.367.367,0,0,0,.046-.413.138.138,0,0,1,.23-.138.643.643,0,0,1-.092.735.78.78,0,0,1-.918.092l-.138-.092a.916.916,0,0,1,.23-1.423,1.1,1.1,0,0,1,1.469.459A1.331,1.331,0,0,1,25.2,10.1,1.607,1.607,0,0,1,23,9.411,2.02,2.02,0,0,1,23.827,6.7a2.479,2.479,0,0,1,3.122.689,1.974,1.974,0,0,1,.321-1.836,2.433,2.433,0,0,1,3.4-.459,2.571,2.571,0,0,1,1.01,2.066,2.525,2.525,0,0,1-.964,2.02,7.07,7.07,0,0,1-2.02,1.056A3.809,3.809,0,0,1,30.759,10.376Zm4.912-3.9a23.368,23.368,0,0,1,1.974-1.331,5.05,5.05,0,0,0,1.79-2.433c.046-.138.275-.092.23.046A5.463,5.463,0,0,1,37.37,5.6a7.8,7.8,0,0,0-1.836,1.377c-.505.6-.872,1.745.046,2.158.138.046,0,.275-.138.184-1.24-.6-.551-2.158.184-2.846Z"></path></svg></span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span></div><p style="
    animation: rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    font-weight: bold;
">ページは存在しません</p>
</h1>

複数 animation を行うにはどうすればよいの？ No problem.

animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;

こんな感じで、 , で区切ることで複数 animation を表現することができます。

さて、結果はどうなったでしょうか。

とてもよくなりましたね！

欲を言えばちゅら太郎も輝かせたかったのですが、SVGがド素人のぼくにはうまく扱えませんでした。教えてすごい人。

ここまできたら、 後光 を指したくなりました。

ガンダムになりたい

あるアナザーガンダムでは、ガンダムを神と崇める人がいるように、ちゅら太郎も眩しくしたいと思います。

box-shadow というプロパティがあります。こいつをつかっていきましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

<h1 class="mainvisual_text" style="
    animation: 10s linear infinite rainbow_animation_shadow;
    border-radius: 50%;
    box-shadow: 0px 0px 30px 30px #fffac0;
"><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}</style><div class="container-404" style="
    font-size: 100px;
    font-weight: bold;
"><span style="
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span>
<span style="
    display: inline-block;
    width: 200px;
    height: 135px;
    animation: 3s linear infinite rotation;
"><svg role="img" id="img-404" aria-label="ちゅらデータ" xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="-2 0 50 36.774" style="
    fill: #fff;
    position: absolute;
    width: 200px;
    height: 200px;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
">
        <g transform="translate(13.867 15.342)"><path d="M40.991,33.731a15.288,15.288,0,0,0-2.479,1.24,3.351,3.351,0,0,1-1.423.643H37a3.351,3.351,0,0,1-1.377-.643,15.288,15.288,0,0,0-2.479-1.24c-1.148-.459-2.066-.413-2.571.138a1.377,1.377,0,0,0-.275,1.423c.505,1.1,2.617,1.974,4.086,2.02a8.4,8.4,0,0,0,2.2-.275l.459-.092h.046l.459.092a8.355,8.355,0,0,0,2.158.275h.046c1.469,0,3.627-.872,4.086-2.02a1.377,1.377,0,0,0-.275-1.423C43.057,33.318,42.139,33.272,40.991,33.731Zm-6.2,2.571a1.561,1.561,0,0,1-.872.184,6.106,6.106,0,0,1-1.24-.138c-.735-.184-1.1-.551-1.056-1.056a.872.872,0,0,1,.413-.643,1.331,1.331,0,0,1,.826-.184,3.214,3.214,0,0,1,1.285.6c.321.23.826.643.826,1.01A.367.367,0,0,1,34.793,36.3Zm6.7.046a6.106,6.106,0,0,1-1.24.138,1.561,1.561,0,0,1-.872-.184.367.367,0,0,1-.138-.275c-.046-.367.505-.78.826-1.01a3.214,3.214,0,0,1,1.285-.6,1.331,1.331,0,0,1,.826.184.872.872,0,0,1,.413.643C42.6,35.8,42.185,36.164,41.5,36.348Z" transform="translate(-30.204 -33.418)"></path><path d="M35.962,36.85a2.984,2.984,0,0,0-1.148-.551h-.092a1.056,1.056,0,0,0-.551.138.6.6,0,0,0-.275.459c-.046.367.413.643.872.735a4.317,4.317,0,0,0,1.882,0H36.7C36.7,37.493,36.421,37.172,35.962,36.85Z" transform="translate(-32.2 -34.977)"></path><path d="M52.979,36.437a1.056,1.056,0,0,0-.551-.138h-.092a2.984,2.984,0,0,0-1.148.551c-.459.321-.689.643-.689.735h.046a3.677,3.677,0,0,0,1.882,0c.6-.138.918-.367.872-.735A.6.6,0,0,0,52.979,36.437Z" transform="translate(-41.182 -34.977)"></path></g><g transform="translate(11.799 11.11)"><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" transform="translate(14.783)" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse></g><path d="M26.483,16.33a2.25,2.25,0,0,1-.551-2.525l-.321.275a1.607,1.607,0,0,1-2.25-.275,1.285,1.285,0,0,1,0-1.607,1.148,1.148,0,0,1,1.331-.321.918.918,0,0,1,.551.689.872.872,0,0,1-.275.78.735.735,0,0,1-.643.138.689.689,0,0,1-.551-.505.6.6,0,0,1,.23-.6.147.147,0,1,1,.184.23.321.321,0,0,0-.138.321.413.413,0,0,0,.321.275.459.459,0,0,0,.413-.092.6.6,0,0,0,.184-.551.643.643,0,0,0-.413-.505.872.872,0,0,0-1.01.23,1.01,1.01,0,0,0,0,1.24,1.331,1.331,0,0,0,1.836.23,1.7,1.7,0,0,0,.321-2.341A2.158,2.158,0,0,0,22.718,11,2.341,2.341,0,0,0,21.8,12.84a2.25,2.25,0,0,0,.872,1.79,9.09,9.09,0,0,0,3.03,1.331Z" transform="translate(-11.792 -5.724)"></path><path d="M62.837,13.14a2.341,2.341,0,0,0-.918-1.836,2.158,2.158,0,0,0-2.984.413,1.7,1.7,0,0,0,.321,2.341,1.331,1.331,0,0,0,1.836-.23,1.01,1.01,0,0,0,0-1.24.872.872,0,0,0-1.01-.23.643.643,0,0,0-.413.505.6.6,0,0,0,.184.551.459.459,0,0,0,.413.092.413.413,0,0,0,.321-.275.321.321,0,0,0-.138-.321.147.147,0,0,1,.184-.23.6.6,0,0,1,.23.643.689.689,0,0,1-.505.367.735.735,0,0,1-.643-.138.872.872,0,0,1-.275-.78.918.918,0,0,1,.551-.689,1.148,1.148,0,0,1,1.331.321,1.285,1.285,0,0,1,0,1.607,1.607,1.607,0,0,1-2.25.275l-.321-.321a2.25,2.25,0,0,1-.551,2.571l.78-.23a9.09,9.09,0,0,0,3.03-1.331A2.25,2.25,0,0,0,62.837,13.14Z" transform="translate(-31.481 -5.887)"></path><path d="M43.208,60.8H41.28V48.867a.367.367,0,0,0-.367-.367H37.057a.367.367,0,0,0-.367.367V60.8h-1.1V53.091a.367.367,0,0,0-.367-.367H31.41a.367.367,0,0,0-.367.367V60.8H29.895V50.933a.367.367,0,0,0-.367-.367H25.717a.367.367,0,0,0-.367.367V60.8H23.467a.367.367,0,0,0-.367.367V62.64a.367.367,0,0,0,.367.367H43.208a.367.367,0,0,0,.367-.367V61.171A.367.367,0,0,0,43.208,60.8Z" transform="translate(-12.495 -26.234)"></path><g transform="translate(4.04 25.572)"><path d="M12.978,60.98a1.445,1.445,0,0,1,2.066.23,1.24,1.24,0,0,1-.23,1.745,1.01,1.01,0,0,1-.735.23.964.964,0,0,1-.643-.367.826.826,0,0,1,.138-1.148.689.689,0,0,1,.505-.138.643.643,0,0,1,.459.275.6.6,0,0,1-.092.78h-.138a.092.092,0,0,1,0-.138.367.367,0,0,0,.046-.505.413.413,0,0,0-.275-.184.459.459,0,0,0-.321.092.6.6,0,0,0-.138.826.735.735,0,0,0,.505.275.78.78,0,0,0,.6-.184,1.01,1.01,0,0,0,.184-1.423,1.273,1.273,0,0,0-1.79-.184,1.653,1.653,0,0,0-.6,1.056,1.745,1.745,0,0,0,.046.689,1.607,1.607,0,0,0,.275.551,1.974,1.974,0,0,0,1.331.78,2.02,2.02,0,0,0,1.515-.413,2.663,2.663,0,0,0,.505-3.673,3.581,3.581,0,0,0-2.25-1.285H13.85a2.158,2.158,0,0,0-1.79-1.148,1.285,1.285,0,0,0-1.79-1.607l-.275.138a1.882,1.882,0,0,1-1.1-.551H8.8a4.545,4.545,0,0,0,.413,1.148l.275.5a1.285,1.285,0,0,0,.735,1.148,2.112,2.112,0,0,0,2.158,3.351,1.882,1.882,0,0,1,.6-.872Z" transform="translate(-8.8 -55.7)"></path><path d="M72.637,56h-.092a1.882,1.882,0,0,1-1.148.551l-.275-.138a1.285,1.285,0,0,0-1.745,1.469,2.158,2.158,0,0,0-1.745,1.194h-.092a3.581,3.581,0,0,0-2.25,1.285,2.663,2.663,0,0,0,.5,3.673,2.02,2.02,0,0,0,1.515.413,1.974,1.974,0,0,0,1.331-.78,1.607,1.607,0,0,0,.275-.551,1.745,1.745,0,0,0,.046-.689,1.653,1.653,0,0,0-.6-1.056,1.273,1.273,0,0,0-1.79.184,1.01,1.01,0,0,0,.184,1.423.781.781,0,0,0,.6.184.735.735,0,0,0,.505-.275.6.6,0,0,0-.138-.826.459.459,0,0,0-.321-.092.413.413,0,0,0-.275.184.367.367,0,0,0,.046.505.092.092,0,0,1,0,.138h-.138a.6.6,0,0,1-.092-.78.643.643,0,0,1,.459-.275.689.689,0,0,1,.505.138.826.826,0,0,1,.138,1.148.964.964,0,0,1-.643.367,1.01,1.01,0,0,1-.735-.23,1.24,1.24,0,0,1-.23-1.745,1.445,1.445,0,0,1,2.066-.23,1.882,1.882,0,0,1,.6.872,2.112,2.112,0,0,0,2.158-3.351,1.285,1.285,0,0,0,.735-1.148l.275-.505A4.591,4.591,0,0,0,72.637,56Z" transform="translate(-39.077 -55.862)"></path></g><path d="M39.666,21.118a12.763,12.763,0,0,1-1.928-2.892.092.092,0,0,1,0-.092,2.3,2.3,0,0,1-2.525-1.928c-.138-1.285,1.1-2.433,2.158-1.515a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.1.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056s-.918-2.387-1.836-3.4a12.763,12.763,0,0,1-1.928-2.892.138.138,0,0,1,.138-.184h0a5.739,5.739,0,0,0,3.765-3.214,7.3,7.3,0,0,0,.275-5A2.479,2.479,0,0,0,38.885.138l.092-.092c-.964.413-1.285,1.7-2.158,2.25s-2.663,0-3.9.413-1.148.735-1.79,1.056a5.75,5.75,0,0,1-4.361-.092,10.332,10.332,0,0,0-4.453-.735,2.3,2.3,0,0,0-3.122,0,9.667,9.667,0,0,0-4.361.78,5.75,5.75,0,0,1-4.361.092,11.477,11.477,0,0,0-1.79-1.056c-.689-.23-2.8.275-3.9-.413S3.535.413,2.571,0l.092.092A2.479,2.479,0,0,0,1.7,1.607a7.3,7.3,0,0,0,.275,5A5.739,5.739,0,0,0,5.739,9.825h0a.138.138,0,0,1,.092.138h0a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.349,12.349,0,0,1-1.01,1.331,7.838,7.838,0,0,0-1.7,2.387,3.581,3.581,0,0,0-.138.872c0,.046,0,.138,0,.184.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.23-1.24c1.056-.918,2.3.413,2.158,1.515a2.485,2.485,0,0,1-2.479,1.928H3.765a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.35,12.35,0,0,1-1.056,1.377,7.614,7.614,0,0,0-1.7,2.387A3.581,3.581,0,0,0,0,24.332v.184c.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.275-1.24c.78-.689,1.7-.092,2.02.689v.138A4.683,4.683,0,0,0,5.6,25.159c.138.092.367.138.413-.092a.826.826,0,0,0,0-.321q-.207-1.79-.275-3.581c-.046-1.194-.138-1.836.092-2.112s.735,2.25,1.056,2.341.459-2.112.918-2.02.275,1.377.367,2.066a9.525,9.525,0,0,0,2.387,5.555l.138.092c.413.138.321-.138.367-.275s-.092-1.377-.092-2.02a20.292,20.292,0,0,1,.321-4.316h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056,0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.321,0,.6-.367.689-.826.046.459.367.826.689.826h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0a20.292,20.292,0,0,1,.321,4.316c0,.689-.138,1.377-.092,2.02s-.046.413.367.275l.138-.092a9.525,9.525,0,0,0,2.387-5.555c.092-.689-.138-1.745.367-2.066s.505,2.066.872,1.974.689-2.755,1.056-2.341.138,1.377.092,2.112-.138,2.387-.275,3.581a.826.826,0,0,0,0,.321c.046.23.275.184.413.092a4.591,4.591,0,0,0,1.469-1.331c.275-.918,1.24-1.607,2.112-.872a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.056.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056S40.584,22.128,39.666,21.118ZM6.152,9.274c-.138.046-.23-.138-.138-.184.964-.459.505-1.653,0-2.2A8.31,8.31,0,0,0,4.224,5.6a5.509,5.509,0,0,1-2.3-2.846c-.046-.138.184-.184.23-.046a5.05,5.05,0,0,0,1.79,2.433A23.368,23.368,0,0,1,5.922,6.473C6.657,7.116,7.391,8.723,6.152,9.274Zm5.1,5.1a2.571,2.571,0,0,1-.551-3.994c.23-.275,1.1-.23,2.112-.092a7.07,7.07,0,0,1-2.02-1.056,2.525,2.525,0,0,1-.964-2.02,2.571,2.571,0,0,1,1.01-2.066,2.433,2.433,0,0,1,3.4.459,1.974,1.974,0,0,1,.321,1.79A2.479,2.479,0,0,1,17.675,6.7,2.02,2.02,0,0,1,18.5,9.411a1.607,1.607,0,0,1-2.3.689,1.331,1.331,0,0,1-.551-1.79,1.1,1.1,0,0,1,1.469-.459.916.916,0,0,1,.23,1.423l-.138.092a.78.78,0,0,1-.918-.092.643.643,0,0,1-.092-.735.138.138,0,0,1,.23.138.367.367,0,0,0,.046.413.505.505,0,0,0,.6.046h.046a.68.68,0,0,0-.184-1.01.826.826,0,0,0-1.1.321A1.056,1.056,0,0,0,16.3,9.871a1.377,1.377,0,0,0,1.836-.551A1.745,1.745,0,0,0,17.4,6.978a2.2,2.2,0,0,0-2.984.918,2.066,2.066,0,0,0-.092,1.882,2.3,2.3,0,0,0,1.653,1.24A3.03,3.03,0,0,0,18.5,10.7a1.928,1.928,0,0,0,.872-1.285.14.14,0,0,1,.275.046,2.2,2.2,0,0,1-.964,1.515,2.938,2.938,0,0,1-1.653.459H16.39c.138.138.184.23.184.275a3.113,3.113,0,0,1-2.892,3.26H13.13a3.489,3.489,0,0,1-1.882-.6Zm16.482,2.984c-.551,1.24-2.755,2.158-4.361,2.158h-.046a8.585,8.585,0,0,1-2.2-.275l-.413-.092-.413.092a8.677,8.677,0,0,1-2.25.275c-1.607,0-3.811-.918-4.361-2.158A1.653,1.653,0,0,1,14,15.609c.321-.367,1.148-.872,2.846-.23a15.517,15.517,0,0,1,2.525,1.285,3.4,3.4,0,0,0,1.285.6H20.8a3.4,3.4,0,0,0,1.24-.6,15.518,15.518,0,0,1,2.525-1.285c1.7-.643,2.525-.138,2.846.23a1.653,1.653,0,0,1,.321,1.745Zm3.03-6.978a2.571,2.571,0,0,1-.551,3.994,3.489,3.489,0,0,1-1.882.551h-.551a3.581,3.581,0,0,1-2.2-1.148,2.617,2.617,0,0,1-.689-2.112c0-.046,0-.138.184-.275h-.643a2.938,2.938,0,0,1-1.653-.459,2.2,2.2,0,0,1-.964-1.515.14.14,0,1,1,.275-.046,1.928,1.928,0,0,0,.872,1.285,3.03,3.03,0,0,0,2.525.321,2.3,2.3,0,0,0,1.607-1.24,2.066,2.066,0,0,0-.092-1.882,2.2,2.2,0,0,0-2.984-.918,1.745,1.745,0,0,0-.735,2.341,1.377,1.377,0,0,0,1.836.551A1.056,1.056,0,0,0,25.572,8.4a.826.826,0,0,0-1.1-.321.68.68,0,0,0-.184,1.01h.046a.505.505,0,0,0,.6-.046.367.367,0,0,0,.046-.413.138.138,0,0,1,.23-.138.643.643,0,0,1-.092.735.78.78,0,0,1-.918.092l-.138-.092a.916.916,0,0,1,.23-1.423,1.1,1.1,0,0,1,1.469.459A1.331,1.331,0,0,1,25.2,10.1,1.607,1.607,0,0,1,23,9.411,2.02,2.02,0,0,1,23.827,6.7a2.479,2.479,0,0,1,3.122.689,1.974,1.974,0,0,1,.321-1.836,2.433,2.433,0,0,1,3.4-.459,2.571,2.571,0,0,1,1.01,2.066,2.525,2.525,0,0,1-.964,2.02,7.07,7.07,0,0,1-2.02,1.056A3.809,3.809,0,0,1,30.759,10.376Zm4.912-3.9a23.368,23.368,0,0,1,1.974-1.331,5.05,5.05,0,0,0,1.79-2.433c.046-.138.275-.092.23.046A5.463,5.463,0,0,1,37.37,5.6a7.8,7.8,0,0,0-1.836,1.377c-.505.6-.872,1.745.046,2.158.138.046,0,.275-.138.184-1.24-.6-.551-2.158.184-2.846Z"></path></svg></span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span></div><p style="
    animation: rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    font-weight: bold;
">ページは存在しません</p>
</h1>

できましたら、さて結果は。。。

ガン・・・ダム・・・・!

いい感じになりましたね。

animationを加える

ここまできたら、おわかりの通り、 box-shadow も animation にしちゃいましょう。

<h1 class="mainvisual_text" style="
    animation: 10s linear infinite rainbow_animation_shadow;
    border-radius: 50%;
"><style>
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

@keyframes rainbow_animation_shadow {
    0%,100% {
        box-shadow: 0px 0px 5px 1000px #fff575;
    }

    25% {
        box-shadow: 0px 0px 42px #fff;
    }

    75% {
        box-shadow: 0px 0px 42px 500px #f00;
    }
}</style><div class="container-404" style="
    font-size: 100px;
    font-weight: bold;
"><span style="
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span>
<span style="
    display: inline-block;
    width: 200px;
    height: 135px;
    animation: 3s linear infinite rotation;
"><svg role="img" id="img-404" aria-label="ちゅらデータ" xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="-2 0 50 36.774" style="
    fill: #fff;
    position: absolute;
    width: 200px;
    height: 200px;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
">
        <g transform="translate(13.867 15.342)"><path d="M40.991,33.731a15.288,15.288,0,0,0-2.479,1.24,3.351,3.351,0,0,1-1.423.643H37a3.351,3.351,0,0,1-1.377-.643,15.288,15.288,0,0,0-2.479-1.24c-1.148-.459-2.066-.413-2.571.138a1.377,1.377,0,0,0-.275,1.423c.505,1.1,2.617,1.974,4.086,2.02a8.4,8.4,0,0,0,2.2-.275l.459-.092h.046l.459.092a8.355,8.355,0,0,0,2.158.275h.046c1.469,0,3.627-.872,4.086-2.02a1.377,1.377,0,0,0-.275-1.423C43.057,33.318,42.139,33.272,40.991,33.731Zm-6.2,2.571a1.561,1.561,0,0,1-.872.184,6.106,6.106,0,0,1-1.24-.138c-.735-.184-1.1-.551-1.056-1.056a.872.872,0,0,1,.413-.643,1.331,1.331,0,0,1,.826-.184,3.214,3.214,0,0,1,1.285.6c.321.23.826.643.826,1.01A.367.367,0,0,1,34.793,36.3Zm6.7.046a6.106,6.106,0,0,1-1.24.138,1.561,1.561,0,0,1-.872-.184.367.367,0,0,1-.138-.275c-.046-.367.505-.78.826-1.01a3.214,3.214,0,0,1,1.285-.6,1.331,1.331,0,0,1,.826.184.872.872,0,0,1,.413.643C42.6,35.8,42.185,36.164,41.5,36.348Z" transform="translate(-30.204 -33.418)"></path><path d="M35.962,36.85a2.984,2.984,0,0,0-1.148-.551h-.092a1.056,1.056,0,0,0-.551.138.6.6,0,0,0-.275.459c-.046.367.413.643.872.735a4.317,4.317,0,0,0,1.882,0H36.7C36.7,37.493,36.421,37.172,35.962,36.85Z" transform="translate(-32.2 -34.977)"></path><path d="M52.979,36.437a1.056,1.056,0,0,0-.551-.138h-.092a2.984,2.984,0,0,0-1.148.551c-.459.321-.689.643-.689.735h.046a3.677,3.677,0,0,0,1.882,0c.6-.138.918-.367.872-.735A.6.6,0,0,0,52.979,36.437Z" transform="translate(-41.182 -34.977)"></path></g><g transform="translate(11.799 11.11)"><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse><ellipse cx="1.515" cy="1.515" rx="1.515" ry="1.515" transform="translate(14.783)" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.427"></ellipse></g><path d="M26.483,16.33a2.25,2.25,0,0,1-.551-2.525l-.321.275a1.607,1.607,0,0,1-2.25-.275,1.285,1.285,0,0,1,0-1.607,1.148,1.148,0,0,1,1.331-.321.918.918,0,0,1,.551.689.872.872,0,0,1-.275.78.735.735,0,0,1-.643.138.689.689,0,0,1-.551-.505.6.6,0,0,1,.23-.6.147.147,0,1,1,.184.23.321.321,0,0,0-.138.321.413.413,0,0,0,.321.275.459.459,0,0,0,.413-.092.6.6,0,0,0,.184-.551.643.643,0,0,0-.413-.505.872.872,0,0,0-1.01.23,1.01,1.01,0,0,0,0,1.24,1.331,1.331,0,0,0,1.836.23,1.7,1.7,0,0,0,.321-2.341A2.158,2.158,0,0,0,22.718,11,2.341,2.341,0,0,0,21.8,12.84a2.25,2.25,0,0,0,.872,1.79,9.09,9.09,0,0,0,3.03,1.331Z" transform="translate(-11.792 -5.724)"></path><path d="M62.837,13.14a2.341,2.341,0,0,0-.918-1.836,2.158,2.158,0,0,0-2.984.413,1.7,1.7,0,0,0,.321,2.341,1.331,1.331,0,0,0,1.836-.23,1.01,1.01,0,0,0,0-1.24.872.872,0,0,0-1.01-.23.643.643,0,0,0-.413.505.6.6,0,0,0,.184.551.459.459,0,0,0,.413.092.413.413,0,0,0,.321-.275.321.321,0,0,0-.138-.321.147.147,0,0,1,.184-.23.6.6,0,0,1,.23.643.689.689,0,0,1-.505.367.735.735,0,0,1-.643-.138.872.872,0,0,1-.275-.78.918.918,0,0,1,.551-.689,1.148,1.148,0,0,1,1.331.321,1.285,1.285,0,0,1,0,1.607,1.607,1.607,0,0,1-2.25.275l-.321-.321a2.25,2.25,0,0,1-.551,2.571l.78-.23a9.09,9.09,0,0,0,3.03-1.331A2.25,2.25,0,0,0,62.837,13.14Z" transform="translate(-31.481 -5.887)"></path><path d="M43.208,60.8H41.28V48.867a.367.367,0,0,0-.367-.367H37.057a.367.367,0,0,0-.367.367V60.8h-1.1V53.091a.367.367,0,0,0-.367-.367H31.41a.367.367,0,0,0-.367.367V60.8H29.895V50.933a.367.367,0,0,0-.367-.367H25.717a.367.367,0,0,0-.367.367V60.8H23.467a.367.367,0,0,0-.367.367V62.64a.367.367,0,0,0,.367.367H43.208a.367.367,0,0,0,.367-.367V61.171A.367.367,0,0,0,43.208,60.8Z" transform="translate(-12.495 -26.234)"></path><g transform="translate(4.04 25.572)"><path d="M12.978,60.98a1.445,1.445,0,0,1,2.066.23,1.24,1.24,0,0,1-.23,1.745,1.01,1.01,0,0,1-.735.23.964.964,0,0,1-.643-.367.826.826,0,0,1,.138-1.148.689.689,0,0,1,.505-.138.643.643,0,0,1,.459.275.6.6,0,0,1-.092.78h-.138a.092.092,0,0,1,0-.138.367.367,0,0,0,.046-.505.413.413,0,0,0-.275-.184.459.459,0,0,0-.321.092.6.6,0,0,0-.138.826.735.735,0,0,0,.505.275.78.78,0,0,0,.6-.184,1.01,1.01,0,0,0,.184-1.423,1.273,1.273,0,0,0-1.79-.184,1.653,1.653,0,0,0-.6,1.056,1.745,1.745,0,0,0,.046.689,1.607,1.607,0,0,0,.275.551,1.974,1.974,0,0,0,1.331.78,2.02,2.02,0,0,0,1.515-.413,2.663,2.663,0,0,0,.505-3.673,3.581,3.581,0,0,0-2.25-1.285H13.85a2.158,2.158,0,0,0-1.79-1.148,1.285,1.285,0,0,0-1.79-1.607l-.275.138a1.882,1.882,0,0,1-1.1-.551H8.8a4.545,4.545,0,0,0,.413,1.148l.275.5a1.285,1.285,0,0,0,.735,1.148,2.112,2.112,0,0,0,2.158,3.351,1.882,1.882,0,0,1,.6-.872Z" transform="translate(-8.8 -55.7)"></path><path d="M72.637,56h-.092a1.882,1.882,0,0,1-1.148.551l-.275-.138a1.285,1.285,0,0,0-1.745,1.469,2.158,2.158,0,0,0-1.745,1.194h-.092a3.581,3.581,0,0,0-2.25,1.285,2.663,2.663,0,0,0,.5,3.673,2.02,2.02,0,0,0,1.515.413,1.974,1.974,0,0,0,1.331-.78,1.607,1.607,0,0,0,.275-.551,1.745,1.745,0,0,0,.046-.689,1.653,1.653,0,0,0-.6-1.056,1.273,1.273,0,0,0-1.79.184,1.01,1.01,0,0,0,.184,1.423.781.781,0,0,0,.6.184.735.735,0,0,0,.505-.275.6.6,0,0,0-.138-.826.459.459,0,0,0-.321-.092.413.413,0,0,0-.275.184.367.367,0,0,0,.046.505.092.092,0,0,1,0,.138h-.138a.6.6,0,0,1-.092-.78.643.643,0,0,1,.459-.275.689.689,0,0,1,.505.138.826.826,0,0,1,.138,1.148.964.964,0,0,1-.643.367,1.01,1.01,0,0,1-.735-.23,1.24,1.24,0,0,1-.23-1.745,1.445,1.445,0,0,1,2.066-.23,1.882,1.882,0,0,1,.6.872,2.112,2.112,0,0,0,2.158-3.351,1.285,1.285,0,0,0,.735-1.148l.275-.505A4.591,4.591,0,0,0,72.637,56Z" transform="translate(-39.077 -55.862)"></path></g><path d="M39.666,21.118a12.763,12.763,0,0,1-1.928-2.892.092.092,0,0,1,0-.092,2.3,2.3,0,0,1-2.525-1.928c-.138-1.285,1.1-2.433,2.158-1.515a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.1.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056s-.918-2.387-1.836-3.4a12.763,12.763,0,0,1-1.928-2.892.138.138,0,0,1,.138-.184h0a5.739,5.739,0,0,0,3.765-3.214,7.3,7.3,0,0,0,.275-5A2.479,2.479,0,0,0,38.885.138l.092-.092c-.964.413-1.285,1.7-2.158,2.25s-2.663,0-3.9.413-1.148.735-1.79,1.056a5.75,5.75,0,0,1-4.361-.092,10.332,10.332,0,0,0-4.453-.735,2.3,2.3,0,0,0-3.122,0,9.667,9.667,0,0,0-4.361.78,5.75,5.75,0,0,1-4.361.092,11.477,11.477,0,0,0-1.79-1.056c-.689-.23-2.8.275-3.9-.413S3.535.413,2.571,0l.092.092A2.479,2.479,0,0,0,1.7,1.607a7.3,7.3,0,0,0,.275,5A5.739,5.739,0,0,0,5.739,9.825h0a.138.138,0,0,1,.092.138h0a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.349,12.349,0,0,1-1.01,1.331,7.838,7.838,0,0,0-1.7,2.387,3.581,3.581,0,0,0-.138.872c0,.046,0,.138,0,.184.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.23-1.24c1.056-.918,2.3.413,2.158,1.515a2.485,2.485,0,0,1-2.479,1.928H3.765a12.3,12.3,0,0,1-.78,1.423l-.092.138h0a12.35,12.35,0,0,1-1.056,1.377,7.614,7.614,0,0,0-1.7,2.387A3.581,3.581,0,0,0,0,24.332v.184c.092,1.7,2.2,1.974,3.351,1.01a1.745,1.745,0,0,0,.505-2.02,1.24,1.24,0,0,0-1.1-.689,1.056,1.056,0,0,0-.6.275.6.6,0,0,0-.23.413q-.23.505.643.505a.115.115,0,1,1,.184.138.551.551,0,0,1-.964,0,.964.964,0,0,1,.275-1.24c.78-.689,1.7-.092,2.02.689v.138A4.683,4.683,0,0,0,5.6,25.159c.138.092.367.138.413-.092a.826.826,0,0,0,0-.321q-.207-1.79-.275-3.581c-.046-1.194-.138-1.836.092-2.112s.735,2.25,1.056,2.341.459-2.112.918-2.02.275,1.377.367,2.066a9.525,9.525,0,0,0,2.387,5.555l.138.092c.413.138.321-.138.367-.275s-.092-1.377-.092-2.02a20.292,20.292,0,0,1,.321-4.316h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056,0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.321,0,.6-.367.689-.826.046.459.367.826.689.826h1.745c.367,0,.689-.459.689-1.056h.046c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0c0,.6.321,1.056.689,1.056h1.745c.367,0,.689-.459.689-1.056h0a20.292,20.292,0,0,1,.321,4.316c0,.689-.138,1.377-.092,2.02s-.046.413.367.275l.138-.092a9.525,9.525,0,0,0,2.387-5.555c.092-.689-.138-1.745.367-2.066s.505,2.066.872,1.974.689-2.755,1.056-2.341.138,1.377.092,2.112-.138,2.387-.275,3.581a.826.826,0,0,0,0,.321c.046.23.275.184.413.092a4.591,4.591,0,0,0,1.469-1.331c.275-.918,1.24-1.607,2.112-.872a.964.964,0,0,1,.275,1.24.551.551,0,0,1-.964,0c-.092-.138.138-.23.184-.138s.78-.184.643-.505a.6.6,0,0,0-.23-.413,1.056,1.056,0,0,0-.6-.275,1.24,1.24,0,0,0-1.056.689,1.745,1.745,0,0,0,.505,2.02c1.148.918,3.305.689,3.351-1.056S40.584,22.128,39.666,21.118ZM6.152,9.274c-.138.046-.23-.138-.138-.184.964-.459.505-1.653,0-2.2A8.31,8.31,0,0,0,4.224,5.6a5.509,5.509,0,0,1-2.3-2.846c-.046-.138.184-.184.23-.046a5.05,5.05,0,0,0,1.79,2.433A23.368,23.368,0,0,1,5.922,6.473C6.657,7.116,7.391,8.723,6.152,9.274Zm5.1,5.1a2.571,2.571,0,0,1-.551-3.994c.23-.275,1.1-.23,2.112-.092a7.07,7.07,0,0,1-2.02-1.056,2.525,2.525,0,0,1-.964-2.02,2.571,2.571,0,0,1,1.01-2.066,2.433,2.433,0,0,1,3.4.459,1.974,1.974,0,0,1,.321,1.79A2.479,2.479,0,0,1,17.675,6.7,2.02,2.02,0,0,1,18.5,9.411a1.607,1.607,0,0,1-2.3.689,1.331,1.331,0,0,1-.551-1.79,1.1,1.1,0,0,1,1.469-.459.916.916,0,0,1,.23,1.423l-.138.092a.78.78,0,0,1-.918-.092.643.643,0,0,1-.092-.735.138.138,0,0,1,.23.138.367.367,0,0,0,.046.413.505.505,0,0,0,.6.046h.046a.68.68,0,0,0-.184-1.01.826.826,0,0,0-1.1.321A1.056,1.056,0,0,0,16.3,9.871a1.377,1.377,0,0,0,1.836-.551A1.745,1.745,0,0,0,17.4,6.978a2.2,2.2,0,0,0-2.984.918,2.066,2.066,0,0,0-.092,1.882,2.3,2.3,0,0,0,1.653,1.24A3.03,3.03,0,0,0,18.5,10.7a1.928,1.928,0,0,0,.872-1.285.14.14,0,0,1,.275.046,2.2,2.2,0,0,1-.964,1.515,2.938,2.938,0,0,1-1.653.459H16.39c.138.138.184.23.184.275a3.113,3.113,0,0,1-2.892,3.26H13.13a3.489,3.489,0,0,1-1.882-.6Zm16.482,2.984c-.551,1.24-2.755,2.158-4.361,2.158h-.046a8.585,8.585,0,0,1-2.2-.275l-.413-.092-.413.092a8.677,8.677,0,0,1-2.25.275c-1.607,0-3.811-.918-4.361-2.158A1.653,1.653,0,0,1,14,15.609c.321-.367,1.148-.872,2.846-.23a15.517,15.517,0,0,1,2.525,1.285,3.4,3.4,0,0,0,1.285.6H20.8a3.4,3.4,0,0,0,1.24-.6,15.518,15.518,0,0,1,2.525-1.285c1.7-.643,2.525-.138,2.846.23a1.653,1.653,0,0,1,.321,1.745Zm3.03-6.978a2.571,2.571,0,0,1-.551,3.994,3.489,3.489,0,0,1-1.882.551h-.551a3.581,3.581,0,0,1-2.2-1.148,2.617,2.617,0,0,1-.689-2.112c0-.046,0-.138.184-.275h-.643a2.938,2.938,0,0,1-1.653-.459,2.2,2.2,0,0,1-.964-1.515.14.14,0,1,1,.275-.046,1.928,1.928,0,0,0,.872,1.285,3.03,3.03,0,0,0,2.525.321,2.3,2.3,0,0,0,1.607-1.24,2.066,2.066,0,0,0-.092-1.882,2.2,2.2,0,0,0-2.984-.918,1.745,1.745,0,0,0-.735,2.341,1.377,1.377,0,0,0,1.836.551A1.056,1.056,0,0,0,25.572,8.4a.826.826,0,0,0-1.1-.321.68.68,0,0,0-.184,1.01h.046a.505.505,0,0,0,.6-.046.367.367,0,0,0,.046-.413.138.138,0,0,1,.23-.138.643.643,0,0,1-.092.735.78.78,0,0,1-.918.092l-.138-.092a.916.916,0,0,1,.23-1.423,1.1,1.1,0,0,1,1.469.459A1.331,1.331,0,0,1,25.2,10.1,1.607,1.607,0,0,1,23,9.411,2.02,2.02,0,0,1,23.827,6.7a2.479,2.479,0,0,1,3.122.689,1.974,1.974,0,0,1,.321-1.836,2.433,2.433,0,0,1,3.4-.459,2.571,2.571,0,0,1,1.01,2.066,2.525,2.525,0,0,1-.964,2.02,7.07,7.07,0,0,1-2.02,1.056A3.809,3.809,0,0,1,30.759,10.376Zm4.912-3.9a23.368,23.368,0,0,1,1.974-1.331,5.05,5.05,0,0,0,1.79-2.433c.046-.138.275-.092.23.046A5.463,5.463,0,0,1,37.37,5.6a7.8,7.8,0,0,0-1.836,1.377c-.505.6-.872,1.745.046,2.158.138.046,0,.275-.138.184-1.24-.6-.551-2.158.184-2.846Z"></path></svg></span>
<span style="
    animation: 3s linear infinite rotation;
    display: inline-block;
    animation: 3s linear infinite rotation, rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
">4</span></div><p style="
    animation: rainbow_animation 6s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    font-weight: bold;
">ページは存在しません</p>
</h1>

よさそうです！さて実行すｒ・・・・あっ

box-shadow: 0px 0px 5px 1000px #fff575;

やべ 100pxで指定しようと思ったのに、 1000px はでか、アッ

・・・・まぁいいかな

UXを加える

このままだと、トップページに戻れないので、 UX を足します。

これでおｋです。

以上です。

どうでしょうか。 Be Crazy に近づけたんじゃないでしょうか。本日HP定例会があるので、プレゼンしてこうと思います。

では、また来年〜。さようなら〜〜〜。

後日談(2021/12/20)

（ボス）ええんじゃない。とりあえず404ページ、こちらでデプロイしてどうぞ
（aipa）ワロタ

まじか（まじか）

というわけで実装しました。本当にありがとうございました。

https://churadata.okinawa/404

くぅ〜〜〜疲れま(ry

Discussion