body {} h1 {margin-bottom: 0;} h2 {margin: 0; padding: 0 0 16px 0;} h2 {border-bottom : 1px solid #FFF0;} hr {margin: 96px 0 48px 0; border-radius: 3px} p {letter-spacing: 0.05em; font-size: 16px;} @media (prefers-color-scheme: light) { body {background-color: whitesmoke; color: black;} p {color: #666;} .headergrid > div p {color: #888;} .headergrid > div p strong {color: #555;} .headergrid > div h6 {color: #888;} details summary {border-bottom: 1px solid #bbb;} details summary:hover {background-color: #ffffff;} details summary > div:last-child {background: linear-gradient(90deg, #ddd, #ddd);} table thead {border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;} table thead tr {background-color: whitesmoke; border-top: 1px solid #bbb; } table thead tr:nth-child(even) {background-color: whitesmoke; } table thead tr th {border: none; background-color: none; color: #999; border-right: 1px solid #bbb;} table tbody tr {background-color: #D8D8D8; border: none;} table tbody tr:nth-child(even) {background-color: #E4E4E4;} table tbody tr td {border: none; border-bottom: 1px solid #bbb;} span.shortcut {background-color: #f3f3f3; color:#333;} span.elmt {color: white; background-color: crimson;} span.attr {color: white; background-color: dodgerblue;} span.xmpl {color: white; background-color: limegreen;} .contentgrid > div {background: linear-gradient(45deg, #ffffffff, #ffffffff); box-shadow: 0 0 24px #0001; } .contentgrid > div p {} .contentgrid > div p span {color: #444; border-bottom: 4px solid #444;} } @media (prefers-color-scheme: dark) { body {background-color: #1A1A1A; color: #CCC;} p {color: #777;} .headergrid > div p {color: #555;} .headergrid > div h6 {color: #666;} details summary {border-bottom: 1px solid #333;} details summary:hover {background-color: #111111;} details summary > div:last-child {background: linear-gradient(90deg, #2a2a2a, #2a2a2a);} table thead {border-top: 1px solid #333; border-bottom: 1px solid #333;} table thead tr {background-color: #1A1A1A; } table thead tr:nth-child(even) {background-color: #1A1A1A; border-top: 1px solid #333; } table thead tr th {border: none; background-color: none; color: #666; border-right: 1px solid #333;} table tbody tr {background-color: #232323; border: none;} table tbody tr:nth-child(even) {background-color: #202020;} table tbody tr td {border: none; border-bottom: 1px solid #2A2A2A;} span.shortcut {background-color: #111; color:#7a9;} span.elmt {color: crimson; background-color: #211;} span.attr {color: dodgerblue; background-color: #112;} span.xmpl {color: limegreen; background-color: #121;} .contentgrid > div {background: linear-gradient(45deg, #252525, #353535) } .contentgrid > div p {} .contentgrid > div p span {color: #bbb; border-bottom: 4px solid #bbb;} } details {margin-bottom: 0px;} details summary { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; padding: 12px 0; cursor: pointer; outline: 0px solid limegreen; } details summary:hover {} details summary > div {} details summary > div:first-child {width: 75%;} details summary > div:last-child {width: 25%; border-radius: 8px; padding: 4px;} details summary > div svg {display: block; width: 100%;} table {font-size: 12px; border-collapse: collapse; width: 100%; margin: 0;} table tr {} table tr:nth-child(even) {} table thead {} table thead tr:nth-child(even) {} table tr th, table tr td {box-sizing: border-box;} table tr th {padding: 8px 4px 2px 4px; text-align: left; font-weight: 400; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em;} table tr td {padding: 8px 0; } table.detable tr th:nth-child(1) {width: 15%; padding: 8px 0 2px 0;} table.detable tr th:nth-child(2) {width: 40px;} table.detable tr th:nth-child(3) {width: 20% } table.detable tr th:nth-child(4) {width: 120px } table.detable tr th:nth-child(5) {width: auto; padding: 8px 0 2px 12px;} table.detable tr th:last-child {border:none;} table.detable tr td:nth-child(1) {width: 15%; color: #777; font-family: monospace; font-size: 9px; padding: 0 0 0 16px; } table.detable tr td:nth-child(2) {width: 40px; font-family: monospace; font-size: 9px; padding: 0 14px 0 0; text-align: right;} table.detable tr td:nth-child(3) {width: 20%; opacity: 0.7; letter-spacing: 0.1em; } table.detable tr td:nth-child(4) {width: 120px; font-family: monospace; font-size: 11px; padding: 0;} table.detable tr td:nth-child(5) {width: auto; opacity: 0.7; letter-spacing: 0.05em; padding: 0 0 0 12px;} span.shortcut {display: block; padding: 5px 2px 4px 4px; position: relative;} span.shortcut:before {position: absolute; content: '+'; right: 24px; } span.shortcut:after {position: absolute; content: '⇥'; font-size: 19px; margin: -6px 8px 0 0; right: 0;} span.elmt, span.attr, span.xmpl {display: block; text-align: center; padding: 2px 0 2px 0; border-radius: 3px;} span.elmt {letter-spacing: 0.1em; } span.attr {letter-spacing: -0.1em; } span.xmpl {letter-spacing: -0.1em;} .headergrid {display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(4, 1fr);} .headergrid > div {aspect-ratio: 1/1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;} .headergrid > div:before, .headergrid > div:after {position: absolute; content: '';} .headergrid > div:before {bottom:-1px; right:-1px; width: 8px; height: 8px; border-bottom: 1px solid #80808066; border-right: 1px solid #80808066;} .headergrid > div:after {bottom:-9px; right:-9px; width: 8px; height: 8px; border-top: 1px solid #80808066; border-left: 1px solid #80808066;} .headergrid > div:first-child {justify-content: flex-start; align-items: flex-start;} .headergrid > div svg {position: absolute; z-index: -1;} .headergrid > div p {padding: 16px 32px 16px 0; margin: 0; font-weight: 400; letter-spacing: 0.025em; line-height: 1.5em; } .headergrid > div h6 {position: absolute; bottom: -8px; right: 16px; padding: 0; margin: 0; letter-spacing: 0.1em; font-weight: 200; font-size: 11px;} .contentgrid {display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px;} .contentgrid > div {position: relative; padding: 72px 16px 16px 16px; border-radius: 24px;} .contentgrid > div svg {display: block; width: 44px; position: absolute; right: 24px; top: 24px; fill: none; stroke: url('#coldhot'); stroke-width: 1;} .contentgrid > div img {display: block; width: 44px; position: absolute; right: 24px; top: 24px;} .contentgrid > div p {} .contentgrid > div p span { display: inline-block; padding: 0 0 8px 0; margin-bottom: 12px;} .contentgrid > div p span sup {opacity: 0.4;} .contentgrid > div p small {display: block; font-size: 0.8rem; } .contentgrid > div p small em {font-style: normal; } .xmplgrid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px 0 0 0;} .xmplgrid img { width: 100%; display: block; background-color: #fff; border-radius: 5px; } @media only screen and (min-width: 480px) { .headergrid {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr);} .contentgrid {grid-template-columns: repeat(2, 1fr);} } @media only screen and (min-width: 640px) { .headergrid {grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);} .contentgrid {grid-template-columns: repeat(3, 1fr);} } @media only screen and (min-width: 1080px) { .headergrid {grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);} .contentgrid {grid-template-columns: repeat(4, 1fr);} .contentgrid > div {padding: 48px 16px 16px 16px;} } @media only screen and (min-width: 1440px) { .headergrid {grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr);} .headergrid > div:first-child {grid-column: 1 / 3; aspect-ratio: 2/1;} .contentgrid {grid-template-columns: repeat(5, 1fr);} .contentgrid > div:first-child {grid-column: 1 / 3;} }

SVG Lines

A set of svg clips for your favorite editor, enabling you to play with Scalable Vector Graphics

Structure Shapes Styling Transform Advanced Animate Examples

Content

89 clips40 elements, 42 attributes, 7 examples, organized in 7 folders.

Structure 16 clipsSvg header for file or inline html, structural elements.

Shapes 12 clipsPrimitives shapes, text, images.

Styling 12 clipsColoring, stroking, dashing, dotting.

Transform 5 clipsTranslation, rotation, scale, skew.

Advanced 23 clipsDeeper styling with gradient, pattern, mask.

Animate 14 clipsAnimate attribute, transformation, or motion.

Examples 7 clipsSamples ans starting lines.

Details

Folders
	Type	Title	Trigger	Description

Structure

1.1	</>	svg file 1	vg-file1	Svg file with prepositioned elements (style + defs)
1.2	</>	svg file 2	vg-file2	Svg file with required attributes
1.3	</>	svg file 3	vg-file3	Svg file with grid (inline use)
1.4	</>	svg 512x512	vg-512	–
1.5	</>	svg 128x128	vg-128	–
1.6	</>	svg 64x64	vg-64	–
1.7	</>	svg 32x32	vg-32	–
1.8	</>	svg 24x24	vg-24	–
1.9	</>	view	vg-view	–
1.10	</>	defs	vg-defs	–
1.11	</>	group	vg-grou	Group element with transform attribute
1.12	</>	symbol	vg-symb	–
1.13	</>	use symbol	vg-ussy	–
1.14	</>	use element	vg-usel	–
1.15	</>	description	vg-desc	+ Accessibility
1.16	</>	title	vg-titl	+ Accessibility

Shapes

2.1	</>	circle	vg-circ	–
2.2	</>	ellipse	vg-elli	–
2.3	</>	rect	vg-rect	–
2.4	</>	round rect	vg-recr	–
2.5	</>	polygon	vg-poly	–
2.6	</>	line	vg-line	–
2.7	</>	polyline	vg-poli	–
2.8	</>	path	vg-path	–
2.9	</>	text	vg-text	–
2.10	</>	text path	vg-txtp	–
2.11	</>	tspan	vg-tspn	–
2.12	</>	image	vg-imag	–

Styling

3.1	attr	fill	vg-fill	–
3.2	attr	fill-rule	vg-filr	–
3.3	attr	fill-opacity	vg-fopa	–
3.4	attr	stroke	vg-strk	–
3.5	attr	stroke-width	vg-swid	–
3.6	attr	stroke-opacity	vg-sopa	–
3.7	attr	stroke-linecap	vg-slic	–
3.8	attr	stroke-linejoin	vg-slij	–
3.9	attr	stroke-miterlimit	vg-mitl	–
3.10	attr	stroke-dasharray	vg-sdar	–
3.11	attr	stroke-dashoffset	vg-sdof	–
3.12	attr	pathLength	vg-plng	–

Transform

4.1	attr	translate	vg-tran	–
4.2	attr	rotate	vg-trot	–
4.3	attr	scale	vg-tsca	–
4.4	attr	skewX	vg-tskx	–
4.5	attr	skewY	vg-tsky	–

Advanced

5.1	</>	linear gradient	vg-ling	Gradient
5.2	</>	radial gradient	vg-radg	Gradient
5.3	</>	stop	vg-stop	Gradient
5.4	attr	gradient units	vg-guni	Gradient
5.5	attr	gradient transform	vg-gtra	Gradient
5.6	attr	fill with gradient	vg-fgra	Gradient
5.7	attr	stroke with gradient	vg-sgra	Gradient
5.8	</>	pattern	vg-patt	Pattern
5.9	attr	patternUnits	vg-puni	Pattern
5.10	attr	patternContentUnits	vg-pcon	Pattern
5.11	attr	patternTransform	vg-ptra	Pattern
5.12	attr	fill with pattern	vg-fpat	Pattern
5.13	attr	stroke with pattern	vg-spat	Pattern
5.14	</>	mask definition	vg-mask	Mask
5.15	attr	mask a shape	vg-fmsk	Mask
5.16	</>	clip	vg-clip	Clip
5.17	attr	clip-path a shape	vg-fcli	Clip
5.18	attr	clip-rule	vg-crul	Clip
5.19	attr	clipPathUnits	vg-cpun	Clip
5.20	</>	marker	vg-mark	Marker
5.21	attr	marker-start	vg-mstt	Marker
5.22	attr	marker-mid	vg-mmid	Marker
5.23	attr	marker-end	vg-mend	Marker

Animate

6.1	</>	animate attribute	vg-aatr	–
6.2	</>	animate transform	vg-atra	–
6.3	</>	animate motion	vg-amot	–
6.4	</>	motion path	vg-amop	–
6.5	</>	set	vg-aset	–
6.6	attr	from / to - svg anim	vg-afto	2 attributes for 2 stepped animation
6.7	attr	values - svg anim	vg-aval	–
6.8	attr	begin - svg anim	vg-abeg	–
6.9	attr	keyPoints - svg anim	vg-akpo	–
6.10	attr	keyTimes - svg anim	vg-akti	–
6.11	attr	keySplines - svg anim	vg-aksp	–
6.12	attr	calcMode - svg anim	vg-acal	–
6.13	attr	accumulate - svg anim	vg-acum	–
6.14	attr	additive - svg anim	vg-adit	–

Examples

7.1	svg	example 0 - Grids	vg-x0	_
7.2	svg	example 1 - Shapes	vg-x1	–
7.3	svg	example 2 - Paths	vg-x2	–
7.4	svg	example 3 - Styling	vg-x3	–
7.5	svg	example 4 - Advanced	vg-x4	–
7.6	svg	example 5 - Transform	vg-x5	–
7.7	svg	example 6 - Animate	vg-x6	–

About

The search for svg in nova extensions yielded no results, so I organized my svg clips somewhat after learning about the possibility of making my own extensions.

The organization of the folders corresponds to the structure of the course I share with my students.

Future ?

→  Missing elements & attributes. 

→  Svg filters. 

→  Improving what's needed…

Version 1.0

Initial release