Skip to content

Instantly share code, notes, and snippets.

View hopearmstrong's full-sized avatar

Hope Armstrong hopearmstrong

5 followers · 0 following
View GitHub Profile
@hopearmstrong
hopearmstrong / Embed the SVG code inline in the HTML.html
Last active April 2, 2019 04:55
Embed the SVG code inline in the HTML
<html>
<head>
<!-- Any CSS added here (internally or externally) can target the shapes in the SVG -->
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<g>
<rect id="vertical-rectangle" width="48" height="4" x="1" y="23" transform="rotate(90 25 24)"/>
<rect id="horizontal-rectangle" width="48" height="4" y="21"/>
</g>
@hopearmstrong
hopearmstrong / Include the CSS in the SVG within a <style> tag.html
Last active April 2, 2019 04:55
Include the CSS in the SVG within a <style> tag
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<!-- Note the <style> tag is included within the SVG -->
<style type="text/css" >
<![CDATA[
rect {
fill: #333;
}
]]>
</style>
<g>
@hopearmstrong
hopearmstrong / Include the CSS in the SVG with an external link.html
Last active April 3, 2019 05:14
Include the CSS in the SVG with an external link
@hopearmstrong
hopearmstrong / Use inline CSS styles in the SVG.html
Last active April 2, 2019 04:55
Use inline CSS styles in the SVG
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<g>
<!-- Notice the fill added to the rectangles below -->
<rect id="vertical-rectangle" width="48" height="4" x="1" y="23" transform="rotate(90 25 24)" style="fill: #0a2ca4;"/>
<rect id="horizontal-rectangle" width="48" height="4" y="21" style="fill: #4a8af4;"/>
</g>
</svg>
@hopearmstrong
hopearmstrong / Transition property.csv
Created April 2, 2019 05:00
Transition property
Value Description
transition The shorthand property for setting all four at once
transition-delay A delay (in seconds) for the transition effect
transition-duration Number of seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function The speed curve of the transition effect
@hopearmstrong
hopearmstrong / Animated donut on hover.sass
Created April 2, 2019 05:16
Animated donut on hover
#donut
&-icing
fill: #FA9CB6
transition: fill 3s ease-out
&:hover
cursor: pointer
#donut-icing
fill: #4a8af4
@hopearmstrong
hopearmstrong / Animation property.csv
Last active April 8, 2019 08:55
Animation property
We can make this file beautiful and searchable if this error is corrected: It looks like row 8 should actually have 2 columns, instead of 1. in line 7.
Value,Description
animation-name,This is the name of the keyframe you want to bind to the selector. Keep an eye on this one when you read the keyframes section below.
animation-duration,The length of animation in seconds or milliseconds. Note: Always specify the animation-duration property. Otherwise the duration is 0 and will never be played.
animation-timing-function,"The speed curve of the animation. Eg: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit"
animation-delay,"Defined in seconds (s) or milliseconds (ms), it’s the length of a delay before the animation will start. Note: If given a negative value, it will start playing as if it had been playing for a given amount of time."
animation-iteration-count,The number of times an animation should be played. Eg: any numerical number
animation-direction,"Play the animation in reverse or alternate cycles. Eg: normal, reverse, alternate, alternate-reverse, initial, inherit"
animati
@hopearmstrong
hopearmstrong / Keyframe percentage selectors.sass
Last active April 2, 2019 05:27
Keyframe percentage selectors
@keyframes name-goes-here
0%
width: 100px
25%
width: 120px
50%, 75%
width: 130px
100%
width: 110px
@hopearmstrong
hopearmstrong / Keyframes to and from.sass
Created April 2, 2019 05:26
Keyframes to and from
@keyframes name-goes-here
from
width: 100px
to
width: 120px
@hopearmstrong
hopearmstrong / Rotating loading icon.html
Created April 2, 2019 05:32
Rotating loading icon
<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>