html SVGでグラデーション

Posted 2021-05-11

<svg viewBox="0 0 200 200" width="200px" height="200px">

	<linearGradient id="grad-stroke" gradientUnits="userSpeceOnUse" x1="0" y1="75" y2="75">
		<stop offset="0" stop-color="#fcee21"></stop>
		<stop offset="1" stop-color="#ff7bac"></stop>
	</linearGradient>

	<!--
	objectBoundingBoxを指定すると、開始座標と終了座標は図形の大きさにマッチする
	-->
	<radialGradient id="grad-fill" gradientUnits="objectBoundingBox">
		<stop offset="0" stop-color="#cce0f4"></stop>
		<stop offset="1" stop-color="#0075be"></stop>
	</radialGradient>

	<circle fill="url('#grad-fill')" stroke="url('#grad-stroke')" stroke-width="20" cx="75" cy="75" r="65"></circle>
</svg>