<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
반응형
'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 |