본문 바로가기
svg

svg path d attribute command example 2

by peach1227 2023. 9. 9.
<style>
:root {--dy:-10px;}
path:nth-of-type(1) {transform:translate(0,calc(var(--dy)*1))}
path:nth-of-type(2) {transform:translate(0,calc(var(--dy)*2))}
path:nth-of-type(3) {transform:translate(0,calc(var(--dy)*3))}
path:nth-of-type(4) {transform:translate(0,calc(var(--dy)*4))}
path:nth-of-type(5) {transform:translate(0,calc(var(--dy)*5))}
path:nth-of-type(6) {transform:translate(0,calc(var(--dy)*6))}
path:nth-of-type(7) {transform:translate(0,calc(var(--dy)*7))}
path:nth-of-type(8) {transform:translate(0,calc(var(--dy)*8))}
</style>

<svg viewBox="0 0 200 200">
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
<path d="M0,100 Q5,90 10,100 T20,100 T30,100 T40,100 T50,100 T60,100 T70,100
T80,100 T90,100 T100,100 T110,100 T120,100 T130,100 T140,100 T150,100 T160,100 T170,100 T180,100 T190,100"/>
</svg>

반응형

'svg' 카테고리의 다른 글

svg path C A commands fish  (0) 2023.09.10
svg path d attribute C S commands  (0) 2023.09.10
svg path d attribute command example  (0) 2023.09.09
svg clipPath snu logo example  (0) 2023.09.03
svg clipPath basic examples  (0) 2023.09.03