Skip to content

Instantly share code, notes, and snippets.

@minlare

minlare/svg.html

Created January 21, 2020 19:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save minlare/6c588422d956941aed449c6d76035606 to your computer and use it in GitHub Desktop.
Save minlare/6c588422d956941aed449c6d76035606 to your computer and use it in GitHub Desktop.
Download ZIP
SVG multiline curved text
Raw
svg.html
<svg viewBox="0 0 500 250" preserveAspectRatio="xMidYMid meet">
<path id="concave" d="M0,100 C200,140 300,140 500,100" fill="none" stroke="blue" transform="rotate(180, 250, 135)" />
<text x="0" y="0" fill="green" font-size="30" text-anchor="middle">
<textPath xlink:href="#concave">
<tspan x="50%" dy="0">Health &</tspan>
</textPath>
<textPath xlink:href="#concave">
<tspan x="50%" dy="1em">Safety</tspan>
</textPath>
</text>
</svg>
<svg viewBox="0 0 500 250" preserveAspectRatio="xMidYMid meet">
<path id="convex" d="M0,100 C200,60 300,60 500,100" fill="none" stroke="blue" />
<text x="0" y="0" fill="green" font-size="30" text-anchor="middle">
<textPath xlink:href="#convex">
<tspan x="50%" dy="0">Health &</tspan>
</textPath>
<textPath xlink:href="#convex">
<tspan x="50%" dy="1em">Safety</tspan>
</textPath>
</text>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment