Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Gradient following path stroke</title>
- <style>
- svg {
- outline: 1px solid #ababab;
- }
- .line {
- fill: none;
- stroke: url(#stroke-gradient);
- stroke-width: 3;
- }
- </style>
- </head>
- <body>
- <svg width="700" height="300">
- <defs>
- <linearGradient id="stroke-gradient">
- <stop offset="0%" stop-color="#ED3585"/>
- <stop offset="100%" stop-color="#6B35C8" />
- </linearGradient>
- </defs>
- <path class="line" transform="translate(0, 100)" d="M11,13.827814569536418L20,6.145695364238416L29,0L38,7.682119205298001L47,0L56,6.145695364238416L65,10.754966887417222L74,10.754966887417222L83,6.145695364238416L92,10.754966887417222L101,15.364238410596027L110,12.291390728476832L119,4.609271523178806L128,7.682119205298001L137,12.291390728476832L146,10.754966887417222L155,13.827814569536418L164,12.291390728476832L173,9.218543046357611L182,1.5364238410596105L191,9.218543046357611L200,15.364238410596027L209,21.509933774834444L218,23.046357615894028L227,30.728476821192054L236,38.410596026490055L245,32.26490066225166L254,27.65562913907286L263,29.192052980132445L272,27.65562913907286L281,29.192052980132445L290,30.728476821192054L299,38.410596026490055L308,43.01986754966886L317,39.94701986754967L326,41.48344370860928L335,46.092715231788084L344,50.70198675496689L353,53.774834437086085L362,59.9205298013245L371,64.52980132450331L380,62.99337748344372L389,55.311258278145694L398,53.774834437086085L407,52.2384105960265L416,56.8476821192053L425,55.311258278145694L434,49.16556291390728L443,46.092715231788084L452,53.774834437086085L461,59.9205298013245L470,67.60264900662253L479,70.67549668874172L488,66.06622516556291L497,64.52980132450331L506,67.60264900662253L515,62.99337748344372L524,69.13907284768212L533,76.82119205298014L542,84.50331125827815L551,92.18543046357617L560,84.50331125827815L569,90.64900662251655L578,90.64900662251655L587,86.03973509933775L596,86.03973509933775L605,81.43046357615894L614,86.03973509933775L623,79.89403973509934L632,87.57615894039736L641,86.03973509933775L650,87.57615894039736L659,84.50331125827815L668,92.18543046357617L677,93.72185430463576L686,87.57615894039736L695,82.96688741721856L704,79.89403973509934L713,84.50331125827815L722,87.57615894039736L731,90.64900662251655L740,90.64900662251655L749,92.18543046357617L758,84.50331125827815L767,90.64900662251655L776,87.57615894039736L785,87.57615894039736L794,87.57615894039736L803,90.64900662251655L812,93.72185430463576L821,101.40397350993378L830,99.86754966887416" stroke-dasharray="930.8463745117188 930.8463745117188" stroke-dashoffset="0"></path>
- </svg>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement