1
0
Fork 0

wip: Fixed measurements docs

This commit is contained in:
joostdecock 2024-10-05 18:14:15 +02:00
parent 7c0ba68827
commit 62830cd7ed
129 changed files with 3582 additions and 47 deletions

39
i18n/measurements.yaml Normal file
View file

@ -0,0 +1,39 @@
measurements: Measurements
ankle: Ankle circumference
biceps: Biceps circumference
bustFront: Bust front
bustPointToUnderbust: Bust point to underbust
bustSpan: Bust span
chest: Chest circumference
crossSeam: Cross seam
crossSeamFront: Cross seam front
head: Head circumference
heel: Heel circumference
highBustFront: High bust front
highBust: High bust
hips: Hips circumference
hpsToBust: HPS to bust
hpsToWaistBack: HPS to waist back
hpsToWaistFront: HPS to waist front
inseam: Inseam
knee: Knee circumference
neck: Neck circumference
seat: Seat circumference
seatBack: Seat back
crotchDepth: Crotch depth
shoulderSlope: Shoulder slope
shoulderToElbow: Shoulder to elbow
shoulderToShoulder: Shoulder to shoulder
shoulderToWrist: Shoulder to wrist
underbust: Underbust
upperLeg: Upper leg circumference
waist: Waist circumference
waistBack: Waist back
waistToArmpit: Waist to armpit
waistToFloor: Waist to floor
waistToHips: Waist to hips
waistToKnee: Waist to knee
waistToSeat: Waist to seat
waistToUnderbust: Waist to underbust
waistToUpperLeg: Waist to upper leg
wrist: Wrist circumference

View file

@ -5,4 +5,5 @@ title: Ankle circumference
The **ankle circumference** measurement goes around your ankle. The **ankle circumference** measurement goes around your ankle.
To measure your ankle circumference, run the tape measure around your leg, just above your ankle. To measure your ankle circumference, run the tape measure around your leg, just above your ankle.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Biceps circumference
The **biceps circumference** measurement goes around the fullest part of your upper arm. The **biceps circumference** measurement goes around the fullest part of your upper arm.
To measure your **biceps circumference**, run the tape measure around the fullest part of your upper arm. To measure your **biceps circumference**, run the tape measure around the fullest part of your upper arm.
<MeasieImage />
<MeasurementImage />

View file

@ -6,4 +6,5 @@ The **bust front** is the front part of your chest circumference.
To measure your bust front, run the tape measure horizontally across the fullest part of your chest, To measure your bust front, run the tape measure horizontally across the fullest part of your chest,
starting at the side (seam) on one side, across your breasts to the side (seam) on the other side. starting at the side (seam) on one side, across your breasts to the side (seam) on the other side.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Bust point to underbust
The **bust point to underbust** measurement is the distance from your bust point/nipple to your underbust. The **bust point to underbust** measurement is the distance from your bust point/nipple to your underbust.
It's the distance an ant would have to walk to go from your bust point/nipple straight down to where your breast meets your torso. It's the distance an ant would have to walk to go from your bust point/nipple straight down to where your breast meets your torso.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Bust span
The **bust span** is the horizontal distance between the two apex points of your bust. The **bust span** is the horizontal distance between the two apex points of your bust.
To measure your bust span, run the tape measure horizontally in a straight line from the tip of your one breast to the tip of the other. To measure your bust span, run the tape measure horizontally in a straight line from the tip of your one breast to the tip of the other.
<MeasieImage />
<MeasurementImage />

View file

@ -6,4 +6,5 @@ The **chest circumference** measurement wraps around the fullest part of your ch
To measure your chest circumference, wrap the tape measure around your chest at the fullest part. To measure your chest circumference, wrap the tape measure around your chest at the fullest part.
Make sure to keep the tape measure horizontal (parallel to the floor). Make sure to keep the tape measure horizontal (parallel to the floor).
<MeasieImage />
<MeasurementImage />

View file

@ -7,4 +7,5 @@ The **cross seam** is measured from the waist line at the front through your leg
To measure your **cross seam** tie a string around your waist. Then, measure down from the To measure your **cross seam** tie a string around your waist. Then, measure down from the
center front of your waist going through your legs back up to the back until you meet the string center front of your waist going through your legs back up to the back until you meet the string
at your waist. at your waist.
<MeasieImage />
<MeasurementImage />

View file

@ -10,4 +10,4 @@ center front of your waist until the spot that is:
- Where the fork of a tight-fitting pair of trousers would sit - Where the fork of a tight-fitting pair of trousers would sit
- At the base of your scrotum - At the base of your scrotum
- Somewhere towards the front of your perineum - Somewhere towards the front of your perineum
<MeasieImage /> <MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Crotch depth
The **crotch depth** measurement is the height your waist rises from the surface you are sitting on. The **crotch depth** measurement is the height your waist rises from the surface you are sitting on.
To measure your crotch depth, sit straight on a flat chair or table, and measure from waist line down to the chair/table. To measure your crotch depth, sit straight on a flat chair or table, and measure from waist line down to the chair/table.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Head circumference
The **head circumference** measurement wraps around the fullest part of your head. The **head circumference** measurement wraps around the fullest part of your head.
To measure your head circumference, wrap the tape measure around your head at the height of your forehead. To measure your head circumference, wrap the tape measure around your head at the height of your forehead.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Heel circumference
The **heel circumference** measurement is the narrowest measurement a trouser leg can be so you can still get in to it. The **heel circumference** measurement is the narrowest measurement a trouser leg can be so you can still get in to it.
To measure your heel circumference, stretch your foot forward, and run the tape measure around your foot at the widest part of your heel. To measure your heel circumference, stretch your foot forward, and run the tape measure around your foot at the widest part of your heel.
<MeasieImage />
<MeasurementImage />

View file

@ -4,9 +4,10 @@ title: High bust
The **high bust** measurement is your chest circumference measured just under your arms, above the fullest part of your bust. The **high bust** measurement is your chest circumference measured just under your arms, above the fullest part of your bust.
The point of the high bust measurement is to get an idea of the chest circumference without taking breasts into account. The point of the high bust measurement is to get an idea of the chest circumference without taking breasts into account.
As such, this measurement is most commonly used to fit people with breasts, but it's perfectly fine measurement for people without too. As such, this measurement is most commonly used to fit people with breasts, but it's perfectly fine measurement for people without too.
To measure your high bust, wrap the tape measure around your chest just under your arms. To measure your high bust, wrap the tape measure around your chest just under your arms.
You might not be able to keep it horizontal (parallel to the floor), but that's ok. You might not be able to keep it horizontal (parallel to the floor), but that's ok.
<MeasieImage />
<MeasurementImage />

View file

@ -8,4 +8,5 @@ your chest circumference measured just under your arms, above the fullest part o
To measure your high bust front, wrap the tape measure around your chest just under your arms To measure your high bust front, wrap the tape measure around your chest just under your arms
and measure from the side (seam) across your breasts to the other side (seam). and measure from the side (seam) across your breasts to the other side (seam).
You might not be able to keep it horizontal (parallel to the floor), but that's ok. You might not be able to keep it horizontal (parallel to the floor), but that's ok.
<MeasieImage />
<MeasurementImage />

View file

@ -6,4 +6,5 @@ The **hips circumference** is measured at the top of your hip bones.
To measure your **hips circumference** put a tape measure around your body at the height To measure your **hips circumference** put a tape measure around your body at the height
of your hip bone. of your hip bone.
<MeasieImage />
<MeasurementImage />

View file

@ -4,7 +4,6 @@ title: HPS to bust
:::note :::note
###### HPS: high point shoulder ###### HPS: high point shoulder
The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements. The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements.
@ -21,7 +20,6 @@ The point of this measurement is to locate the fullest part of your bust vertica
:::tip :::tip
##### Think about which hand you're using ##### Think about which hand you're using
If you measure yourself, you might try to hold your measuring tape up to your shoulder with the hand on If you measure yourself, you might try to hold your measuring tape up to your shoulder with the hand on
@ -35,4 +33,5 @@ Simply switch your hands around, and you get a more accurate measurement.
For best results, get a second person to take your measurements (if possible). For best results, get a second person to take your measurements (if possible).
::: :::
<MeasieImage />
<MeasurementImage />

View file

@ -4,7 +4,6 @@ title: HPS to waist back
:::note :::note
###### HPS: high point shoulder ###### HPS: high point shoulder
The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements. The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements.
@ -16,4 +15,5 @@ The **high point shoulder (HPS) to waist back** measurement runs from your HPS d
To measure your HPS to waist back, first [localize your HPS point](/docs/sewing/hps/). To measure your HPS to waist back, first [localize your HPS point](/docs/sewing/hps/).
Then measure straight down to your waist line. Then measure straight down to your waist line.
<MeasieImage />
<MeasurementImage />

View file

@ -4,7 +4,6 @@ title: HPS to waist front
:::note :::note
###### HPS: high point shoulder ###### HPS: high point shoulder
The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements. The _high point shoulder_ or _HPS_ point is used as the base for several vertical measurements.
@ -16,4 +15,5 @@ The **high point shoulder (HPS) to waist front** measurement runs from your HPS
To measure your HPS to waist front, first [localize your HPS point](/docs/sewing/hps/). To measure your HPS to waist front, first [localize your HPS point](/docs/sewing/hps/).
Then measure straight down to your waist line. Then measure straight down to your waist line.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Inseam
The **inseam** is the measurement from your crotch down to the floor. The **inseam** is the measurement from your crotch down to the floor.
To measure your **inseam**, measure down vertically from the point your legs join (at the crotch) down to the floor. To measure your **inseam**, measure down vertically from the point your legs join (at the crotch) down to the floor.
<MeasieImage />
<MeasurementImage />

View file

@ -6,4 +6,5 @@ The **knee circumference** is the measurement around your knee.
To measure your **knee circumference**, wrap the tape measure around your knee. To measure your **knee circumference**, wrap the tape measure around your knee.
Make sure to keep the tape measure horizontal to the floor as you measure the circumference of your knee. Make sure to keep the tape measure horizontal to the floor as you measure the circumference of your knee.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Neck circumference
The **neck circumference** is the measurement around your neck, at the level you would wear your shirt collar, or tie. The **neck circumference** is the measurement around your neck, at the level you would wear your shirt collar, or tie.
To measure your **neck circumference**, wrap the tape measure around your neck where your shirt collar would sit. To measure your **neck circumference**, wrap the tape measure around your neck where your shirt collar would sit.
<MeasieImage />
<MeasurementImage />

View file

@ -7,4 +7,5 @@ The **seat circumference** is the measurement around the fullest part of your bu
To measure your **seat circumference**, To measure your **seat circumference**,
run the tape measure around your bum at the fullest part. run the tape measure around your bum at the fullest part.
Make sure to keep the tape measure horizontal while doing so. In other words, parallel to the floor. Make sure to keep the tape measure horizontal while doing so. In other words, parallel to the floor.
<MeasieImage />
<MeasurementImage />

View file

@ -8,4 +8,5 @@ To measure your **seat back**,
run the tape measure around your bum at the fullest part, and check the length of the back part. run the tape measure around your bum at the fullest part, and check the length of the back part.
Make sure to keep the tape measure horizontal while doing so. In other words, parallel to the floor. Make sure to keep the tape measure horizontal while doing so. In other words, parallel to the floor.
<MeasieImage />
<MeasurementImage />

View file

@ -13,7 +13,6 @@ The number of degrees you had to rotate is your shoulder slope.
:::note :::note
Almost all people have a slightly different shoulder slope on both sides. Almost all people have a slightly different shoulder slope on both sides.
That's because your dominant arm is more pronounced. That's because your dominant arm is more pronounced.
@ -22,4 +21,5 @@ It won't show up for casual garments, and for formal wear, it's better to add
asymmetric shoulder padding, rather than create an asymmetric pattern. asymmetric shoulder padding, rather than create an asymmetric pattern.
::: :::
<MeasieImage />
<MeasurementImage />

View file

@ -10,4 +10,5 @@ top of the shoulder meets the side of the arm.
It is also where the top of the shoulder seam sits and the sleeve begins It is also where the top of the shoulder seam sits and the sleeve begins
on a well-fitting dress shirt. on a well-fitting dress shirt.
Follow your arm down to your elbow. Follow your arm down to your elbow.
<MeasieImage />
<MeasurementImage />

View file

@ -10,4 +10,5 @@ top of the shoulder meets the side of the arm.
It is also where the top of the shoulder seam sits and the sleeve begins It is also where the top of the shoulder seam sits and the sleeve begins
on a well-fitting dress shirt. on a well-fitting dress shirt.
Then, measure from there across your back to the same point at the other side. Then, measure from there across your back to the same point at the other side.
<MeasieImage />
<MeasurementImage />

View file

@ -10,4 +10,5 @@ top of the shoulder meets the side of the arm.
It is also where the top of the shoulder seam sits and the sleeve begins It is also where the top of the shoulder seam sits and the sleeve begins
on a well-fitting dress shirt. on a well-fitting dress shirt.
Let your arm hang naturally in a slight bend, and measure along your slightly bent arm up to your wrist. Let your arm hang naturally in a slight bend, and measure along your slightly bent arm up to your wrist.
<MeasieImage />
<MeasurementImage />

View file

@ -7,4 +7,5 @@ The **underbust** measurement is the circumference of your chest without taking
To measure your **underbust**, wrap the tape measure around your chest just below your breasts, where your bra band sits. To measure your **underbust**, wrap the tape measure around your chest just below your breasts, where your bra band sits.
If you dont have breasts, this measurement does not apply to you. Just use your chest circumference. If you dont have breasts, this measurement does not apply to you. Just use your chest circumference.
<MeasieImage />
<MeasurementImage />

View file

@ -9,10 +9,10 @@ Make sure to keep the tape measure horizontal to the floor as you measure the ci
:::tip :::tip
##### Be mindful of the vertical location of this measurement ##### Be mindful of the vertical location of this measurement
This measurements is also used as **a vertical reference** to determine the vertical space in which to draft the seat/crotch of trousers. As such, the vertical location of this measurement is important. This measurements is also used as **a vertical reference** to determine the vertical space in which to draft the seat/crotch of trousers. As such, the vertical location of this measurement is important.
::: :::
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Waist circumference
The **waist circumference** measurement is the circumference of your waist below your ribcage. The **waist circumference** measurement is the circumference of your waist below your ribcage.
To measure your **waist circumference**, wrap the tape measure around the narrowest part of your waist, making sure to keep it horizontal. To measure your **waist circumference**, wrap the tape measure around the narrowest part of your waist, making sure to keep it horizontal.
<MeasieImage />
<MeasurementImage />

View file

@ -6,4 +6,5 @@ The **waist back** measurement is the back part of your waist circumference.
To measure your **waist back**, wrap the tape measure around the narrowest part of your waist, making sure to keep it horizontal. To measure your **waist back**, wrap the tape measure around the narrowest part of your waist, making sure to keep it horizontal.
Then, measure the length from one side over your back to the other. Then, measure the length from one side over your back to the other.
<MeasieImage />
<MeasurementImage />

View file

@ -15,5 +15,4 @@ Or, if you're not certain where the lymph nodes under your arm are, you can foll
- Slide your hand upwards as far as you can without having to push anything out of the way. - Slide your hand upwards as far as you can without having to push anything out of the way.
- Your index finger will now sit in the armpit, which is a bit too high. But your middle finger is a good spot to mark as the start of your armpit. - Your index finger will now sit in the armpit, which is a bit too high. But your middle finger is a good spot to mark as the start of your armpit.
<MeasurementImage />
<MeasieImage />

View file

@ -8,4 +8,5 @@ To measure your waist to floor measurement,
locate the height of your waist, and measure how high it is from the floor. locate the height of your waist, and measure how high it is from the floor.
It is often easiest to measure at the side of your body. It is often easiest to measure at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -3,4 +3,5 @@ title: Waist to hips
--- ---
The **waist to hips** measurement is measured from your waist down to the top of your hip bone. Measure it at the side of your body. The **waist to hips** measurement is measured from your waist down to the top of your hip bone. Measure it at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Waist to knee
The **waist to knee** is the measurement from your waist down towards your knee, measured on the side of your body. The **waist to knee** is the measurement from your waist down towards your knee, measured on the side of your body.
To measure your **waist to knee**, locate the height of both your waist and your knee, and measure the vertical distance between them. Make sure to measure at the side of your body. To measure your **waist to knee**, locate the height of both your waist and your knee, and measure the vertical distance between them. Make sure to measure at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Waist to seat
The **waist to seat** is the measurement from your waist down towards the fullest part of your bum, measured on the side of your body. The **waist to seat** is the measurement from your waist down towards the fullest part of your bum, measured on the side of your body.
To measure your **waist to seat**, locate the height of both your waist and seat circumference, and measure the vertical distance between them. Make sure to measure at the side of your body. To measure your **waist to seat**, locate the height of both your waist and seat circumference, and measure the vertical distance between them. Make sure to measure at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Waist to underbust
The **waist to underbust** is the measurement from your waist up towards your underbust link (where your bra band sits). The **waist to underbust** is the measurement from your waist up towards your underbust link (where your bra band sits).
To measure your **waist to underbust**, locate the height of both your waist and underbust, and measure the vertical distance between them. Make sure to measure at the side of your body. To measure your **waist to underbust**, locate the height of both your waist and underbust, and measure the vertical distance between them. Make sure to measure at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -3,4 +3,5 @@ title: Waist to upper leg
--- ---
The **waist to upper leg** is measured from your waist down to where your upper leg circumference measurement is. Measure it at the side of your body. The **waist to upper leg** is measured from your waist down to where your upper leg circumference measurement is. Measure it at the side of your body.
<MeasieImage />
<MeasurementImage />

View file

@ -5,4 +5,5 @@ title: Wrist circumference
The **wrist circumference** measurement is the circumference of your wrist. The **wrist circumference** measurement is the circumference of your wrist.
To measure your **wrist circumference**, run the tape measure around your wrist, where your arm joins your hand. To measure your **wrist circumference**, run the tape measure around your wrist, where your arm joins your hand.
<MeasieImage />
<MeasurementImage />

View file

@ -79,6 +79,19 @@ const config = {
) )
} }
// i18n folder
fsConfig.resolve.alias[`@i18n`] = path.resolve(__dirname, `../../i18n`)
// Yaml loader
fsConfig.module = {
rules: [
{
test: /\.ya?ml$/,
use: 'yaml-loader',
},
],
}
return fsConfig return fsConfig
}, },
}), }),

View file

@ -27,7 +27,8 @@
"devDependencies": { "devDependencies": {
"@babel/plugin-syntax-import-attributes": "^7.25.6", "@babel/plugin-syntax-import-attributes": "^7.25.6",
"@docusaurus/module-type-aliases": "3.5.2", "@docusaurus/module-type-aliases": "3.5.2",
"@docusaurus/types": "3.5.2" "@docusaurus/types": "3.5.2",
"yaml-loader": "^0.8.1"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [

View file

@ -18,6 +18,7 @@ import TabItem from '@theme/TabItem'
import { DesignInfo } from './design-info.mjs' import { DesignInfo } from './design-info.mjs'
import { Example } from './example.mjs' import { Example } from './example.mjs'
import { Legend } from './legend.mjs' import { Legend } from './legend.mjs'
import { MeasurementImage } from './measurement-image.mjs'
import { ReadMore } from './readmore.js' import { ReadMore } from './readmore.js'
const MDXComponents = { const MDXComponents = {
@ -45,6 +46,7 @@ const MDXComponents = {
DesignInfo, DesignInfo,
Example, Example,
Legend, Legend,
MeasurementImage,
ReadMore, ReadMore,
} }

View file

@ -0,0 +1,68 @@
import React from 'react'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import { images as sarahImages } from './sarah/index.mjs'
import { images as timImages } from './tim/index.mjs'
import { useLocation } from '@docusaurus/router'
import measurements from '../../../../../i18n/measurements.yaml'
// Measurements shown seated
const seated = ['crotchdepth']
// Re-use this style object
const style = {
backgroundSize: 'cover',
width: '100%',
display: 'block',
aspectRatio: '4/3',
}
// Map lowercase measurement name to translation key
const caseMap = {}
for (const m of Object.keys(measurements)) caseMap[m.toLowerCase()] = m
/*
* This component shows an image that helps to know how to make measurements
* It shows a JPG background, with an SVG overlay
*
* Sarah and Tim are the models.
* They are just names to tell them apart.
*/
export const MeasurementImage = (props) => {
const location = useLocation()
// Figure out what measurement to use
const m = props.m
? props.m.toLowerCase()
: location.pathname
.split('/')
.filter((dir) => dir)
.pop()
if (!m || !measurements[caseMap[m]])
return <p>Unable to match the input {m} to MeasurementImage to a measurement name</p>
const pose = seated.includes(m) ? 'seated' : 'standing'
return (
<Tabs>
<TabItem value="sarah" label="Sarah">
<img
height={sarahImages[m].height}
width={sarahImages[m].width}
src={sarahImages[m]}
alt={measurements[caseMap[m]]}
style={{ ...style, backgroundImage: `url(/img/sarah-${pose}.jpg)` }}
/>
</TabItem>
<TabItem value="tim" label="Tim">
<img
height={timImages[m].height}
width={timImages[m].width}
src={timImages[m]}
alt={measurements[caseMap[m]]}
style={{ ...style, backgroundImage: `url(/img/tim-${pose}.jpg)` }}
/>
</TabItem>
</Tabs>
)
}

View file

@ -0,0 +1,41 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 206 0" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1550 450)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" />
<use x="206" y="0" xlink:href="#end" />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 45 5 m -835 -15 l 49 -8 m -648 20 l 58 -4" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<use x="1655" y="1305" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="1655" y="1305" xlink:href="#path" class="tape"/>
<use x="1655" y="1305" xlink:href="#path" class="color"/>
<use x="1655" y="1305" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,39 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 63 2 m -1007 -70 l 59 25 m -576 25 l 68 0" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1750 480)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 92 0 l 92 0 m 425 -2 c 30 -7 60 -17 80 -17 l 129 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 180 0 c 0 20 2 35 -17 61 m 529 -76 c 0 15 0 38 -5 52" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 669 -30 l 139 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 22 0 m 70 0 l 92 0 m 415 -7 c 40 -12 60 -17 80 -17 l 139 0 m 463 30 l 205 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 705 105 l 0 220 m 700 -200 l 0 215" style="fill: none; stroke-linejoin: round;"/>
<path d="M 610 105 l 195 0 m 480 20 l 200 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 705 105 l 0 220" style="fill: none; stroke-linejoin: round;"/>
<path d="M 610 105 l 195 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 1150 -100 l 0 200" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(244 733)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<path id="hipline" class="line" d="M 1030 -100 l 160 0 ">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 122 0 m -810 -40 l 117 0 m -759 48 l 140 -30" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1595 210)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l -45 -45" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1405, 1355)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 0 0 l 22 -5 m 70 -12 c 10 0 40 -39 40 -39 m 465 40 c 12 0 12 -4 12 -4c 20 -42 70 -57 110 -57 l 79 0 m 483 90 l 205 0" style="fill: none; stroke-linejoin: round;"/>
<path d="M 780 -90 l 25 27 l 5 0 l 0 -30 z" style="fill: #905438; stroke: none;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 92 -17 c 10 0 40 -39 40 -39 m 475 40 c 12 0 12 -4 12 -4c 20 -42 70 -57 110 -57 l 79 0" style="fill: none; stroke-linejoin: round;"/>
<path d="M 780 -90 l 25 27 l 5 0 l 0 -30 z" style="fill: #905438; stroke: none;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c 120 -10 180 -10 225 -10 m -926 -10 c 80 35 170 30 226 12" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1549 660)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,52 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -25 70 -25 120 -25 146" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(852 622)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(114)" />
<use x="146" y="25" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="hipline" class="line" d="M 1553 645 c 100 -10 150 -10 215 -5 M 857 625 c 70 35 140 40 214 21">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="upperlegline" class="line" d="M 827 766 c 40 10 80 15 125 18 m 720 26 l 127 0" >
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 45 -135 c 40 0 120 90 135 125 m 470 -143 c 50 70 50 100 50 125" style="fill: none; stroke-linejoin: round;"/>
<path d="M 670 -30 l 145 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 45 -135 c -60 30 -40 110 -15 264 m 1300 -264 l 0 266" style="fill: none; stroke-linejoin: round;"/>
<path d="M 28 130 l 12 0 m 60 0 l 145 0 m 1050 0 l 190 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 45 -135 c 40 0 100 80 130 95 c 30 30 10 65 10 170 m 440 -273 c 50 70 50 100 50 245" style="fill: none; stroke-linejoin: round;"/>
<path d="M 28 130 l 12 0 m 60 0 l 145 0 m 350 -30 l 190 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,84 @@
// __SDEFILE__ - This file is a dependency for the stand-alone environment
import acrossback from './acrossback.svg'
import ankle from './ankle.svg'
import biceps from './biceps.svg'
import bustfront from './bustfront.svg'
import bustpointtounderbust from './bustpointtounderbust.svg'
import bustspan from './bustspan.svg'
import chest from './chest.svg'
import crossseam from './crossseam.svg'
import crossseamfront from './crossseamfront.svg'
import crotchdepth from './crotchdepth.svg'
import head from './head.svg'
import heel from './heel.svg'
import highbust from './highbust.svg'
import highbustfront from './highbustfront.svg'
import hpstobust from './hpstobust.svg'
import hpstowaistback from './hpstowaistback.svg'
import hpstowaistfront from './hpstowaistfront.svg'
import hips from './hips.svg'
import hipstoupperleg from './hipstoupperleg.svg'
import inseam from './inseam.svg'
import knee from './knee.svg'
import waist from './waist.svg'
import waistback from './waistback.svg'
import waisttoarmpit from './waisttoarmpit.svg'
import waisttofloor from './waisttofloor.svg'
import waisttohips from './waisttohips.svg'
import waisttoknee from './waisttoknee.svg'
import waisttoseat from './waisttoseat.svg'
import waisttounderbust from './waisttounderbust.svg'
import waisttoupperleg from './waisttoupperleg.svg'
import neck from './neck.svg'
import seat from './seat.svg'
import seatback from './seatback.svg'
import shoulderslope from './shoulderslope.svg'
import shouldertoelbow from './shouldertoelbow.svg'
import shouldertoshoulder from './shouldertoshoulder.svg'
import shouldertowrist from './shouldertowrist.svg'
import underbust from './underbust.svg'
import upperleg from './upperleg.svg'
import wrist from './wrist.svg'
export const images = {
acrossback,
ankle,
biceps,
bustfront,
bustpointtounderbust,
bustspan,
chest,
crossseam,
crossseamfront,
crotchdepth,
head,
heel,
highbust,
highbustfront,
hpstobust,
hpstowaistback,
hpstowaistfront,
hips,
hipstoupperleg,
inseam,
knee,
waist,
waistback,
waisttoarmpit,
waisttofloor,
waisttohips,
waisttoknee,
waisttoseat,
waisttounderbust,
waisttoupperleg,
neck,
seat,
seatback,
shoulderslope,
shouldertoelbow,
shouldertoshoulder,
shouldertowrist,
underbust,
upperleg,
wrist,
}

View file

@ -0,0 +1,50 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 0 590" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #fff; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #fff; stroke-width: 3px; fill: none; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(966 786)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(90)" />
<use x="590" y="0" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="floorline" class="line" d="M 800 1376 l 54 0 m 70 0 l 103 0 m 112 0 l 50 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 83 0 m -904 -10 l 85 0 m -643 10 l 103 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<use x="1665" y="1025" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="1665" y="1025" xlink:href="#path" class="tape"/>
<use x="1665" y="1025" xlink:href="#path" class="color"/>
<use x="1665" y="1025" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c 20 3 60 1 76 1 m -763 -10 c 30 1 50 1 64 0 m -688 10 l 66 18" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1617 304)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 179 0 m 399 -5 l 265 0 m 441 10 l 277 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(244 733)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 344 720 l 11 40 l 35 -5 l -10 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 105 0 M 1284 10 l 277 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(244 733)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 344 720 l 11 40 l 35 -5 l -10 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,19 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.line {stroke: #000; stroke-width: 3px; stroke-linecap: round;}
.arrow {stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: round;}
text {font-family: "Roboto condensed"; font-size: 42px;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<path class="line" d="M 1360 320 l 250 0 l -250 45" />
<path class="line" d="M 1380 320 c -5 10 -5 30 0 42" />
<path class="arrow" d="M 1380 320 l -8 -20 l 16 0 l -8 20" />
<path class="arrow" d="M 1380 365 l -8 20 l 16 0 l -8 -20" />
<text class="text" x="1340" y="359"></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1,53 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -40 10 -20 100 -70 238" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1520 340)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(166)" />
<use x="248" y="15" xlink:href="#end" transform="rotate(104)" />
</g>
<!-- Helplines -->
<g>
<path id="shoulderline" class="line" d="M 1516 325 l 25 100">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="elbowline" class="line" d="M 1435 575 l 85 20">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1,50 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c 90 -25 200 -15 252 15" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1524 360)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(-14)"/>
<use x="246" y="-55" xlink:href="#end" transform="rotate(16)"/>
</g>
<!-- Helplines -->
<g>
<path id="shoulderline" class="line" d="M 1515 325 l 25 100 m 245 -90 l -25 100">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1,53 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -40 10 -20 100 -70 238 l -25 175" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1520 346)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(166)" />
<use x="415" y="95" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="shoulderline" class="line" d="M 1515 325 l 25 100">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="wristline" class="line" d="M 1405 760 l 85 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 12 0 m 57 0 l 82 0 m 437 -9 c 40 -12 90 -17 100 -17 l 89 0 m 490 10 l 195 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(287 513)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 128 0 m 713 20 l 133 0 m -1517 5 l 91 0" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(826 800)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(0,0)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(102)" />
<use x="78" y="" xlink:href="#end" transform="rotate(102)" />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,34 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 1560 575 l 193 0 M 302 585 l 5 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(0,0)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(102)" />
<use x="78" y="" xlink:href="#end" transform="rotate(102)" />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,53 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 0 112" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #ccc; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #ccc; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.gray {stroke: #666; }
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(380 470)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(90)" />
<use x="115" y="0" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="underbustline" class="line gray" d="M 290 513 l 8 0 m 57 0 l 80 0 m 443 -9 c 40 -12 90 -14 94 -14 l 89 0 m 496 10 l 187 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,56 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 L 0 835" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.white {stroke: #fff;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(975 560)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(90)" />
<use x="835" y="0" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="floor" class="line" d="M 925 1395 l 100 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 347 730 l 25 40 l 22 -5 l -11 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,52 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l -25 77" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(882 549)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(107)" />
<use x="81" y="2" xlink:href="#end" transform="rotate(107)" />
</g>
<!-- Helplines -->
<g>
<path id="hipline" class="line" d="M 1553 645 c 100 -10 150 -10 215 -5 M 857 625 c 70 35 140 40 214 21">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1,56 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c 15 170 58 200 30 459" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.white {stroke: #fff;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1065 558)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(90)" />
<use x="459" y="-30" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="kneeline" class="line" d="M 290 1033 l 92 0 m 631 -15 l 75 0 m 582 10 l 74 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 347 730 l 25 40 l 22 -5 l -11 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -0,0 +1,56 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -15 70 -58 120 -58 179" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.white {stroke: #fff;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(875 548)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(102)" />
<use x="180" y="58" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="seatline" class="line white" d="M 224 733 l 196 0 m 403 -5 l 341 0 m 368 10 l 271 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 347 730 l 25 40 l 22 -5 l -11 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -0,0 +1,53 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 0 70" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #ccc; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #ccc; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.gray {stroke: #666; }
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(380 513)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(90)" />
<use x="72" y="0" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="underbustline" class="line gray" d="M 290 513 l 8 0 m 57 0 l 80 0 m 443 -9 c 40 -12 90 -14 94 -14 l 89 0 m 496 10 l 187 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 1560 575 l 193 0 M 885 550 c 70 15 140 15 170 10 M 365 585 l 73 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,56 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -15 70 -58 120 -58 249" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 70 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 70 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.white {stroke: #fff;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(875 548)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(102)" />
<use x="180" y="58" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="seatline" class="line white" d="M 627 793 l 341 0">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="waistline" class="line" d="M 885 550 c 70 15 140 15 170 10">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<g>
<path style="fill: #985b3e; stroke: none;" d="M 347 730 l 25 40 l 22 -5 l -11 -35 " />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 38 -10 m 288 -131 l 17 26 m 1127 134 l 35 -5" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(345 735)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,41 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 256 0" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<use x="1480" y="450" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="1480" y="450" xlink:href="#path" class="tape"/>
<use x="1480" y="450" xlink:href="#path" class="color"/>
<use x="1480" y="450" xlink:href="#path" class="cm"/>
<use x="1480" y="450" xlink:href="#start" />
<use x="1736" y="450" xlink:href="#end" />
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c 20 2 20 2 42 0 m -742 -65 l 44 -8 m -748 40 l 54 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<use x="1640" y="1325" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="1640" y="1325" xlink:href="#path" class="tape"/>
<use x="1640" y="1325" xlink:href="#path" class="color"/>
<use x="1640" y="1325" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,39 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 69 26 m -397 0 l 69 -18" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g>
<use x="1418" y="454" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="1418" y="454" xlink:href="#path" class="tape"/>
<use x="1418" y="454" xlink:href="#path" class="color"/>
<use x="1418" y="454" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 67 0 m 453 22 l 220 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(347 450)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 150 0 l 0 40 m 490 -20 l 0 30" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 638 15 l 150 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,31 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 67 0 m 453 22 l 220 0 m 395 0 l 253 0" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(347 450)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 718 125 l 0 231 m 623 -200 l 0 215" style="fill: none; stroke-linejoin: round;"/>
<path d="M 620 125 l 195 0 m 420 30 l 220 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,35 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 718 125 l 0 231" style="fill: none; stroke-linejoin: round;"/>
<path d="M 620 125 l 195 0" class="line"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #fff; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(267 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,39 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 30 -35 l 0 191" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./seated.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1450 700)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- Helplines -->
<g>
<path id="hipline" class="line" d="M 1350 670 l 160 0 ">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 118 0 m -765 -26 l 112 0 m -759 28 l 143 -38" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1550 190)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,32 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 65 -25" style="fill: none; stroke-linejoin: round;"/>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1065, 1322)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,33 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 0 0 l 10 0 m 90 -10 c 10 0 40 -10 65 -25 m 455 40 c 20 -20 170 -50 220 -10 m 405 40 l 240 0" style="fill: none; stroke-linejoin: round;"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(244 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,33 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<g id="path">
<path d="M 100 -10 c 10 0 40 -10 65 -25 m 455 40 c 20 -20 170 -50 220 -10" style="fill: none; stroke-linejoin: round;"/>
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(244 456)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,40 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 225 0 m -854 4 c 80 15 170 10 226 -2" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1492 675)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,53 @@
<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 c -8 40 -14 90 -12 134" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
.white {stroke: #fff;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(862 675)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
<use x="0" y="0" xlink:href="#start" transform="rotate(102)" />
<use x="134" y="13" xlink:href="#end" transform="rotate(90)" />
</g>
<!-- Helplines -->
<g>
<path id="hipline" class="line" d="M 1492 675 l 225 0 M 865 677 c 80 15 170 10 223 -2 M 262 662 l 22 4 m 82 8 l 48 7">
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
<path id="upperlegline" class="line white" d="M 260 850 l 123 10 m 475 -50 c 40 15 80 15 120 10 m 632 26 l 120 0" >
<animate attributeType="CSS" attributeName="stroke-dashoffset" from="0" to="13" dur="1s" repeatDur="indefinite" />
</path>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

Some files were not shown because too many files have changed in this diff Show more