<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 |