본문 바로가기
svg

svg simple logo

by peach1227 2023. 9. 2.
<h2>Simple Logo</h2>
<svg width="400" height="400">

<style>
text {font: normal 24px serif;}
#path1 {fill: url("#pattern1");}
#path3 {fill: url("#pattern2");}

</style>

<defs>
	<pattern id="pattern1" x="100"  width="200" height="100" patternUnits="userSpaceOnUse">
		<image id="image1"  width="200" height="100" href="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Hydrangeas.jpg"/>
	</pattern>
	<pattern id="pattern2" x="100" width="200" height="100" patternUnits="userSpaceOnUse">
		<image id="image2"  width="200" height="100" href="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Koala.jpg"/>
	</pattern>
</defs>


<path id="path2" class="path1"  fill="green" stroke="blue" stroke-width="2" d="M80,200 A120,120 0 0 1 320,200"/>
<path id="path1" class="path1"  fill="yellow" stroke="blue" stroke-width="2" d="M100,200 A100,100 0 0 1 300,200"/>

<path id="path4" class="path1"  fill="skyblue" stroke="blue" stroke-width="2" d="M80,200 A120,120 0 0 0 320,200"/>
<path id="path3" class="path1"  fill="yellow" stroke="blue" stroke-width="2" d="M100,200 A100,100 0 0 0 300,200"/>

<text rotate="0">
<textPath href="#path1" startOffset="50" >shelling out $20,000</textPath>
</text>

<text rotate="0" >
<textPath href="#path4" startOffset="100">forking out $20,000</textPath>
</text>



  <path id="heart"
    fill="#ff0000"
    stroke="red"
    d="M10,30 A20,20 0 0 1 50,30A20,20,0 0 1 90,30Q90,60 50,90 Q10,60 10,30" transform="translate(150,150)" />



</svg>


Simple Logo

shelling out $20,000 forking out $20,000
반응형

'svg' 카테고리의 다른 글

svg clipPath snu logo example  (0) 2023.09.03
svg clipPath basic examples  (0) 2023.09.03
svg animation using inkscape  (0) 2023.09.02
svg clipPath animation  (0) 2023.09.02
svg textPath animation  (0) 2023.09.01