Hope Armstrong hopearmstrong
hopearmstrong
/ Beating Heart Animation on Hover.sass
Created
April 2, 2019 06:37
Beating Heart Animation on Hover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #smiley-love | |
| #smiley | |
| &-blush | |
| display: none | |
| a | |
| display: inline-block | |
| &:hover | |
| #smiley | |
| transform: scale(1.1) | |
| transform-origin: center |
hopearmstrong
/ Line drawing SVG - pt. 3.sass
Last active
April 2, 2019 06:33
Line drawing SVG - pt. 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #line | |
| stroke-dasharray: 497 | |
| stroke-dashoffset: 497 | |
| animation: draw 1400ms ease-in-out 4ms forwards | |
| @keyframes draw | |
| from | |
| stroke-dashoffset: 1000 | |
| to | |
| stroke-dashoffset: 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #line | |
| stroke-dasharray: 497 | |
| stroke-dashoffset: 497 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #line | |
| stroke-dasharray: 497 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #loading-bar | |
| &-left | |
| animation: loading-bar-morph 1s linear .1s infinite | |
| transform-origin: center | |
| &-middle | |
| animation: loading-bar-morph 1s linear .2s infinite | |
| transform-origin: center | |
| &-right | |
| animation: loading-bar-morph 1s linear .4s infinite | |
| transform-origin: center |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg id="loading-bar" xmlns="http://www.w3.org/2000/svg" width="36" height="22" viewBox="0 0 36 22"> | |
| <g> | |
| <rect id="loading-bar-left" width="8" height="22"/> | |
| <rect id="loading-bar-middle" width="8" height="22" x="14"/> | |
| <rect id="loading-bar-right" width="8" height="22" x="28"/> | |
| </g> | |
| </svg> |
hopearmstrong
/ Rotating loading icon with gradient.html
Last active
April 2, 2019 05:36
Rotating loading icon with gradient
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg id="loading-spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> | |
| <defs> | |
| <!-- Notice the gradient defined here and applied to the path below --> | |
| <linearGradient id="spinner-gradient-a" x1="49.892%" x2="55.03%" y1="58.241%" y2="89.889%"> | |
| <stop offset="0%"/> | |
| <stop offset="22.44%" stop-opacity=".59"/> | |
| <stop offset="100%" stop-opacity="0"/> | |
| </linearGradient> | |
| </defs> | |
| <g fill="none" transform="translate(-8 -8)"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #loading | |
| animation: loading-spinner 1s linear infinite | |
| @keyframes loading-spinner | |
| from | |
| transform: rotate(0deg) | |
| to | |
| transform: rotate(360deg) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg id="loading-spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> | |
| <g fill="none"> | |
| <path id="track" fill="#C6CCD2" d="M24,48 C10.745166,48 0,37.254834 0,24 C0,10.745166 10.745166,0 24,0 C37.254834,0 48,10.745166 48,24 C48,37.254834 37.254834,48 24,48 Z M24,44 C35.045695,44 44,35.045695 44,24 C44,12.954305 35.045695,4 24,4 C12.954305,4 4,12.954305 4,24 C4,35.045695 12.954305,44 24,44 Z"/> | |
| <path id="section" fill="#3F4850" d="M24,0 C37.254834,0 48,10.745166 48,24 L44,24 C44,12.954305 35.045695,4 24,4 L24,0 Z"/> | |
| </g> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes name-goes-here | |
| from | |
| width: 100px | |
| to | |
| width: 120px |
NewerOlder