背景テーマ

前書き

オビ＝ワン・ケノービ、クイ＝ゴン・ジン、ダース・モールが戦おうとしています！しかし、彼らはそれぞれのライトセーバーを持参するのを忘れていました。Jedi入力として文字列が与えられると、この^*のような画像を生成するプログラムまたは関数を作成します。

文字列を指定すると、次のSithような画像が生成されます。

画像の仕様

• 3つのライトセーバー（端に丸いエッジを含む白いブレード（赤いものには2つの丸いエッジ）とハンドルを含む）は、900pxの長さです（これはブレードの周りの色のグラデーションを含みません）。

• ブレードの端の丸いエッジは、ブレードの幅に等しい直径の半円（明らかに離散的な近似）です。

• ブレード（ライトセーバーの白い部分）は幅12pxです。

• 緑と青のライトセーバーは、200ピクセル（緑のブレードの中心線から青のブレードの中心線まで）で区切られています。

• 3つのライトセーバーすべてのハンドルは180px（全長の1/5）です。したがって、丸いエッジを含むブレード自体の長さは、青と緑のライトセーバーでは720px、赤のライトセーバーの2つのブレードでは360pxです。

• 青と緑のライトセーバーのハンドルはライトセーバーの下部にあります。赤いライトセーバーのハンドルは水平方向の中央にあります。

• 白いブレードの端から完全に白い色までのグラデーションの長さは、1.5 *ブレードの幅です（たとえば、直線部分の場合は18px）。

• 緑のグラデーションは、RGB（0,255,0）から白（255,255,255）（または実装しやすい場合は透明）になります。赤のグラデーションは（255,0,0）から白になり、青のグラデーションは（0,0,255）から白になります。

• ハンドルの色はRGB（128,128,128）です。

• ライトセーバーの周りに白い空のスペースがある場合があります。

入力

どちらかSithまたはJedi文字列として。この文字列は、STDINから、関数の引数、コマンドラインパラメーター、または同様のものとして取得できます。あなたは、入力が常に正確にSithまたはJedi他の何もないと仮定するかもしれません。

出力

入力文字列に対応する画像を含む画像ファイルを生成する必要があります。True Colorである限り、必要な画像形式を自由に選択できます。画像で。

得点

これはcode-golfであるため、バイト単位の最短回答が優先されます。力があなたと共にありますように。

^*この投稿の画像はフルサイズで表示されません。

HTML / CSSソリューション、765 740 541バイト

<style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table>

最近のリファクタリングでは、Javascript ではなく:target擬似クラスを使用してい<form>ます。

どちらかの入力を入力するには、URLの最後にターゲットとして追加します。たとえば、test.html#Jediまたはtest.html#Sith

ここにも空白といくつかのコメントがあります：

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
</style>
<div id=Jedi>
  <table><td><td></table>
  <table><td><td></table>
</div>
<table id=Sith><td><td><td></table>

ライトセーバーは<table>、パーツ（ブレード/ハンドル）ごとに1つのセルを持つ要素であり、id属性によって非表示になります。

ブレードはCSSで色付けされてbox-shadowおり、ジェダイのライトセーバーはtransform: rotate()。

写真またはそれが発生しませんでした（クリックして完全な解像度）：

td{background:#fff}body{background:#000}CSSに追加すると、クールで暗いビューが得られます。

FirefoxおよびChrome（Linux上）でテスト済み。サイズをできる限り縮小しようとしていたため、これは標準に準拠していないことに注意してください。

以下のため@manatworkのおかげborder-spacingと:target。