Skip to content

Instantly share code, notes, and snippets.

@Closer2U
Last active February 28, 2021 18:10
Show Gist options
  • Save Closer2U/ab7751aacfb8888c2c1f866d173831e0 to your computer and use it in GitHub Desktop.
Save Closer2U/ab7751aacfb8888c2c1f866d173831e0 to your computer and use it in GitHub Desktop.
Nice SVGs and CSS stuff I came across online
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; z-index: 1; position: relative; shape-rendering: auto;" width="205" height="913" preserveAspectRatio="xMidYMid" viewBox="0 0 205 913">
<linearGradient id="lg-0.5113402812731433" x1="0" x2="1" y1="0" y2="0">
<stop stop-color="#619fff" offset="0"/>
<stop stop-color="#52ffff" offset="1"/>
</linearGradient>
<g transform="translate(0 456) rotate(-90) translate(-456 0)">
<path d="M 0 0 L 0 77.3937 Q 91.3 128.991 182.6 88.7727 T 365.2 81.7978 T 547.8 88.8622 T 730.4 66.5057 T 913 77.2829 L 913 0 Z" fill="url(#lg-0.5113402812731433)" opacity="0.4">
<animate attributeName="d" dur="10s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 92.93545634995378Q 91.3 121.21211190283503 182.6 97.18441599598754T 365.2 76.4231435997836T 547.8 78.4644736479539T 730.4 85.50676924153116T 913 88.5283738853484L 913 0 Z;M0 0L 0 76.00077962994655Q 91.3 138.3716842687046 182.6 94.98799838740314T 365.2 84.58485248105362T 547.8 84.13091741590937T 730.4 76.86850273953505T 913 89.8718101149367L 913 0 Z;M0 0L 0 75.49880571213276Q 91.3 129.9388905448744 182.6 87.74711732645397T 365.2 82.45314089264363T 547.8 90.12990621786258T 730.4 64.1889660095976T 913 75.9117823814416L 913 0 Z;M0 0L 0 92.93545634995378Q 91.3 121.21211190283503 182.6 97.18441599598754T 365.2 76.4231435997836T 547.8 78.4644736479539T 730.4 85.50676924153116T 913 88.5283738853484L 913 0 Z"/>
</path><path d="M 0 0 L 0 78.6351 Q 91.3 95.0657 182.6 78.9116 T 365.2 88.9603 T 547.8 72.0763 T 730.4 71.3689 T 913 67.3534 L 913 0 Z" fill="url(#lg-0.5113402812731433)" opacity="0.4">
<animate attributeName="d" dur="10s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-3.3333333333333335s" values="M0 0L 0 78.67200881679034Q 91.3 89.03087428616789 182.6 76.53561556337023T 365.2 87.81806789632013T 547.8 70.36877752824284T 730.4 71.43253112159348T 913 66.59736758897118L 913 0 Z;M0 0L 0 78.33572377725316Q 91.3 144.0556871155451 182.6 98.19972981180476T 365.2 98.23232967198072T 547.8 85.93803630899677T 730.4 70.85277969829711T 913 73.49094021582414L 913 0 Z;M0 0L 0 77.53370086631467Q 91.3 109.81545999122291 182.6 88.4302928924076T 365.2 89.2296466364012T 547.8 83.80682609893158T 730.4 74.33242178133457T 913 92.24708880121881L 913 0 Z;M0 0L 0 78.67200881679034Q 91.3 89.03087428616789 182.6 76.53561556337023T 365.2 87.81806789632013T 547.8 70.36877752824284T 730.4 71.43253112159348T 913 66.59736758897118L 913 0 Z"/>
</path><path d="M 0 0 L 0 91.7108 Q 91.3 120.451 182.6 94.9531 T 365.2 77.6024 T 547.8 69.6452 T 730.4 92.5345 T 913 68.7078 L 913 0 Z" fill="url(#lg-0.5113402812731433)" opacity="0.4">
<animate attributeName="d" dur="10s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-6.666666666666667s" values="M0 0L 0 85.63263113900263Q 91.3 131.56418531593297 182.6 92.49499944044867T 365.2 74.32082296529411T 547.8 94.52840127277281T 730.4 93.2977418824246T 913 92.4191728420825L 913 0 Z;M0 0L 0 92.58716211348869Q 91.3 118.16522889071831 182.6 95.27059709519285T 365.2 76.94744821652058T 547.8 67.69885270567202T 730.4 93.95587475643781T 913 66.45612048619772L 913 0 Z;M0 0L 0 84.64475559322007Q 91.3 138.8786562594694 182.6 92.39296316727393T 365.2 82.88334121708857T 547.8 85.33782250018254T 730.4 81.0748251992467T 913 86.86187857931742L 913 0 Z;M0 0L 0 85.63263113900263Q 91.3 131.56418531593297 182.6 92.49499944044867T 365.2 74.32082296529411T 547.8 94.52840127277281T 730.4 93.2977418824246T 913 92.4191728420825L 913 0 Z"/>
</path>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment