Skip to content

Instantly share code, notes, and snippets.

@rsomani95
Last active August 1, 2019 06:42
Show Gist options
  • Save rsomani95/748ef6c2aca89d9dc9c79db8e61547d1 to your computer and use it in GitHub Desktop.
Save rsomani95/748ef6c2aca89d9dc9c79db8e61547d1 to your computer and use it in GitHub Desktop.
SVG Film Strip that's perfect for a custom scroll bar
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 23.56"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="0 23.49 0.07 0 15 0.07 14.93 23.49 0 23.49"/><path d="M14.86.14V23.42H.14V.14H14.86M15,0H0V23.56H15V0Z"/><polygon class="cls-1" points="12.84 1.28 12.91 0.14 14.61 0.2 14.54 1.28 12.84 1.28"/><path d="M14.47.27v.94H13V.27h1.49M14.6.14H12.84V1.35H14.6V.14Z"/><polygon class="cls-1" points="12.84 2.85 12.91 1.71 14.61 1.78 14.54 2.85 12.84 2.85"/><path d="M14.47,1.84v.94H13V1.84h1.49m.13-.13H12.84V2.92H14.6V1.71Z"/><polygon class="cls-1" points="12.84 4.42 12.91 3.28 14.61 3.35 14.54 4.42 12.84 4.42"/><path d="M14.47,3.42v.94H13V3.42h1.49m.13-.14H12.84V4.49H14.6V3.28Z"/><polygon class="cls-1" points="12.84 6 12.91 4.85 14.61 4.92 14.54 6 12.84 6"/><path d="M14.47,5v.94H13V5h1.49m.13-.14H12.84V6.06H14.6V4.85Z"/><polygon class="cls-1" points="12.84 7.57 12.91 6.42 14.61 6.49 14.54 7.57 12.84 7.57"/><path d="M14.47,6.56V7.5H13V6.56h1.49m.13-.14H12.84V7.64H14.6V6.42Z"/><polygon class="cls-1" points="12.84 9.14 12.91 7.99 14.61 8.06 14.54 9.14 12.84 9.14"/><path d="M14.47,8.13v.94H13V8.13h1.49M14.6,8H12.84V9.21H14.6V8Z"/><polygon class="cls-1" points="12.84 10.71 12.91 9.56 14.61 9.63 14.54 10.71 12.84 10.71"/><path d="M14.47,9.7v.94H13V9.7h1.49m.13-.14H12.84v1.22H14.6V9.56Z"/><polygon class="cls-1" points="12.84 12.28 12.91 11.14 14.61 11.2 14.54 12.28 12.84 12.28"/><path d="M14.47,11.27v.94H13v-.94h1.49m.13-.13H12.84v1.21H14.6V11.14Z"/><polygon class="cls-1" points="12.84 13.85 12.91 12.71 14.61 12.78 14.54 13.85 12.84 13.85"/><path d="M14.47,12.84v.94H13v-.94h1.49m.13-.13H12.84v1.21H14.6V12.71Z"/><polygon class="cls-1" points="12.84 15.42 12.91 14.28 14.61 14.35 14.54 15.42 12.84 15.42"/><path d="M14.47,14.42v.93H13v-.93h1.49m.13-.14H12.84v1.21H14.6V14.28Z"/><polygon class="cls-1" points="12.84 17 12.91 15.85 14.61 15.92 14.54 17 12.84 17"/><path d="M14.47,16v.94H13V16h1.49m.13-.14H12.84v1.21H14.6V15.85Z"/><polygon class="cls-1" points="12.84 18.57 12.91 17.42 14.61 17.49 14.54 18.57 12.84 18.57"/><path d="M14.47,17.56v.94H13v-.94h1.49m.13-.14H12.84v1.21H14.6V17.42Z"/><polygon class="cls-1" points="12.84 20.14 12.91 18.99 14.61 19.06 14.54 20.14 12.84 20.14"/><path d="M14.47,19.13v.94H13v-.94h1.49M14.6,19H12.84v1.22H14.6V19Z"/><polygon class="cls-1" points="12.84 21.71 12.91 20.56 14.61 20.63 14.54 21.71 12.84 21.71"/><path d="M14.47,20.7v.94H13V20.7h1.49m.13-.14H12.84v1.22H14.6V20.56Z"/><polygon class="cls-1" points="12.84 23.28 12.91 22.14 14.61 22.2 14.54 23.28 12.84 23.28"/><path d="M14.47,22.27v.94H13v-.94h1.49m.13-.13H12.84v1.21H14.6V22.14Z"/><polygon class="cls-1" points="0.4 1.28 0.46 0.14 2.16 0.2 2.09 1.28 0.4 1.28"/><path d="M2,.27v.94H.53V.27H2M2.16.14H.4V1.35H2.16V.14Z"/><polygon class="cls-1" points="0.4 2.85 0.46 1.71 2.16 1.78 2.09 2.85 0.4 2.85"/><path d="M2,1.84v.94H.53V1.84H2m.14-.13H.4V2.92H2.16V1.71Z"/><polygon class="cls-1" points="0.4 4.42 0.46 3.28 2.16 3.35 2.09 4.42 0.4 4.42"/><path d="M2,3.42v.94H.53V3.42H2m.14-.14H.4V4.49H2.16V3.28Z"/><polygon class="cls-1" points="0.4 6 0.46 4.85 2.16 4.92 2.09 6 0.4 6"/><path d="M2,5v.94H.53V5H2m.14-.14H.4V6.06H2.16V4.85Z"/><polygon class="cls-1" points="0.4 7.57 0.46 6.42 2.16 6.49 2.09 7.57 0.4 7.57"/><path d="M2,6.56V7.5H.53V6.56H2m.14-.14H.4V7.64H2.16V6.42Z"/><polygon class="cls-1" points="0.4 9.14 0.46 7.99 2.16 8.06 2.09 9.14 0.4 9.14"/><path d="M2,8.13v.94H.53V8.13H2M2.16,8H.4V9.21H2.16V8Z"/><polygon class="cls-1" points="0.4 10.71 0.46 9.56 2.16 9.63 2.09 10.71 0.4 10.71"/><path d="M2,9.7v.94H.53V9.7H2m.14-.14H.4v1.22H2.16V9.56Z"/><polygon class="cls-1" points="0.4 12.28 0.46 11.14 2.16 11.2 2.09 12.28 0.4 12.28"/><path d="M2,11.27v.94H.53v-.94H2m.14-.13H.4v1.21H2.16V11.14Z"/><polygon class="cls-1" points="0.4 13.85 0.46 12.71 2.16 12.78 2.09 13.85 0.4 13.85"/><path d="M2,12.84v.94H.53v-.94H2m.14-.13H.4v1.21H2.16V12.71Z"/><polygon class="cls-1" points="0.4 15.42 0.46 14.28 2.16 14.35 2.09 15.42 0.4 15.42"/><path d="M2,14.42v.93H.53v-.93H2m.14-.14H.4v1.21H2.16V14.28Z"/><polygon class="cls-1" points="0.4 17 0.46 15.85 2.16 15.92 2.09 17 0.4 17"/><path d="M2,16v.94H.53V16H2m.14-.14H.4v1.21H2.16V15.85Z"/><polygon class="cls-1" points="0.4 18.57 0.46 17.42 2.16 17.49 2.09 18.57 0.4 18.57"/><path d="M2,17.56v.94H.53v-.94H2m.14-.14H.4v1.21H2.16V17.42Z"/><polygon class="cls-1" points="0.4 20.14 0.46 18.99 2.16 19.06 2.09 20.14 0.4 20.14"/><path d="M2,19.13v.94H.53v-.94H2M2.16,19H.4v1.22H2.16V19Z"/><polygon class="cls-1" points="0.4 21.71 0.46 20.56 2.16 20.63 2.09 21.71 0.4 21.71"/><path d="M2,20.7v.94H.53V20.7H2m.14-.14H.4v1.22H2.16V20.56Z"/><polygon class="cls-1" points="0.4 23.28 0.46 22.14 2.16 22.2 2.09 23.28 0.4 23.28"/><path d="M2,22.27v.94H.53v-.94H2m.14-.13H.4v1.21H2.16V22.14Z"/><rect class="cls-1" x="2.97" y="0.53" width="8.98" height="6.65" rx="0.3"/><rect class="cls-1" x="2.97" y="8.4" width="8.98" height="6.65" rx="0.3"/><rect class="cls-1" x="2.97" y="16.26" width="8.98" height="6.65" rx="0.3"/></g></g></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment