Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>American Flag SVG JS</title>
- <style>
- body {background-color:black;}
- p{
- color:blue;
- font-family: 'Times New Roman', Times, Serif;
- font-size: 14px;
- font-weight:700;
- letter-spacing:1px;
- text-align:justify;
- width:300px;
- height:auto;
- margin:10px calc(50% - 150px);
- background-color:white;
- border:2px solid red;
- padding:5px;
- border-radius:3px;
- }
- h1{
- color:white;
- font-family: 'Arial', Helvetica, Sans-Serif;
- font-size: 20px;
- font-weight:700;
- letter-spacing:1px;
- text-align:center;
- width:300px;
- height:auto;
- background-color:blue;
- border:2px solid red;
- border-radius:2px;
- margin:0 calc(50% - 150px);
- margin-top:10px;
- }
- #area51,
- #area50 {
- width:296px;
- height:60px;
- margin:0 calc(50% - 150px);
- border:2px solid blue;
- border-radius:3px;
- color:red;
- }
- button {
- width:60px;
- height:20px;
- margin:10px calc(50% - 30px);
- background-color:blue;
- color:white;
- border:1px solid red;
- border-radius:2px;
- font-family: 'Arial', Helvetica, Sans-Serif;
- font-size:14px;
- font-weight:700;
- letter-spacing:2px;
- }
- button:hover {
- color:yellow;
- }
- button:active {
- background-color:red;
- border:1px solid blue;
- color:white;
- }
- address {
- position:relative;
- margin:0;
- text-align:center;
- color:#EEEEEE;
- letter-spacing:2px;
- }
- </style>
- <script>
- function betsyRoss(){
- document.write('<span style="display:block;margin:0 auto;height:65x;width:125px;"><svg viewBox="0 0 125 65"><defs>');
- document.write('<pattern id="oldGlory" width="125" height="65" patternUnits="userSpaceOnUse"><g>');
- document.write('<polyline stroke-width="1" stroke="#CCCCCC" fill="#FFFFFF" points="0,0 125,0 125,65 0,65 0,0"><\/polyline>');
- document.write('<polyline fill="#000052" points="0,0 52.5,0 52.5,35 0,35 0,0"><\/polyline>');
- for(y = 0;y < 70;y = y + 10){
- if(y > 39){var startPoint = 0;}
- else{var startPoint = 52.5;}
- document.write('<polyline fill="#9C0000" points="'+startPoint+','+y+' 125,'+y+' 125,'+(y+5)+' '+startPoint+','+(y+5)+'"><\/polyline>');
- }
- for(y = 0; y < 34;y = y + 7){
- for(x = 0; x < 51;x = x + 8.5){
- document.write('<polyline fill="white" points="'+(x+2.5)+','+(y+3)+' '+(x+7.5)+','+(y+3)+' '+(x+3.5)+','+(y+6)+' '+(x+5)+','+(y+1)+' '+(x+6.5)+','+(y+6)+' '+(x+2.5)+','+(y+3)+'"><\/polyline>');
- if ((y < 27) && (x < 42.5)){
- document.write('<polyline fill="white" points="'+(x+6.5)+','+(y+6.5)+' '+(x+11.5)+','+(y+6.5)+' '+(x+7.5)+','+(y+9.5)+' '+(x+9)+','+(y+4.5)+' '+(x+10.5)+','+(y+9.5)+' '+(x+6.5)+','+(y+6.5)+'"><\/polyline>');
- }
- }
- }
- document.write('<\/g><\/pattern><\/defs>');
- document.write('<rect x="0" y="0" width="100%" height="100%" fill="url(#oldGlory)" \/>');
- document.write('<\/svg><\/span>');
- }
- function copyCode(ID){
- var copyText = document.getElementById(ID);
- copyText.select();
- document.execCommand("copy");
- }
- </script>
- </head>
- <body>
- <p>American flag consisting of white stars (50 since July 4, 1960) on a blue canton with a field of 13 alternating stripes, 7 red and 6 white. The 50 stars stand for the 50 states of the Union, and the 13 stripes stand for the original 13 states. The flag's width-to-length ratio is 10 to 19.</p>
- <span style="display:block;margin:0 auto;height:65x;width:125px;" >
- <svg viewBox="0 0 125 65">
- <defs>
- <pattern id="oldGlory" width="125" height="65" patternUnits="userSpaceOnUse">
- <g>
- <polyline stroke-width="1" stroke="#CCCCCC" fill="#FFFFFF" points="0,0 125,0 125,65 0,65 0,0"></polyline>
- <polyline fill="#000052" points="0,0 52.5,0 52.5,35 0,35 0,0"></polyline>
- <polyline fill="#9C0000" points="52.5,0 125,0 125,5 52.5,5"></polyline>
- <polyline fill="#9C0000" points="52.5,10 125,10 125,15 52.5,15"></polyline>
- <polyline fill="#9C0000" points="52.5,20 125,20 125,25 52.5,25"></polyline>
- <polyline fill="#9C0000" points="52.5,30 125,30 125,35 52.5,35"></polyline>
- <polyline fill="#9C0000" points="0,40 125,40 125,45 0,45"></polyline>
- <polyline fill="#9C0000" points="0,50 125,50 125,55 0,55"></polyline>
- <polyline fill="#9C0000" points="0,60 125,60 125,65 0,65"></polyline>
- <polyline fill="white" points="2.5,3 7.5,3 3.5,6 5,1 6.5,6 2.5,3"></polyline>
- <polyline fill="white" points="11,3 16,3 12,6 13.5,1 15,6 11,3"></polyline>
- <polyline fill="white" points="19.5,3 24.5,3 20.5,6 22,1 23.5,6 19.5,3"></polyline>
- <polyline fill="white" points="28,3 33,3 29,6 30.5,1 32,6 28,3"></polyline>
- <polyline fill="white" points="36.5,3 41.5,3 37.5,6 39,1 40.5,6 36.5,3"></polyline>
- <polyline fill="white" points="45,3 50,3 46,6 47.5,1 49,6 45,3"></polyline>
- <polyline fill="white" points="6.5,6.5 11.5,6.5 7.5,9.5 9,4.5 10.5,9.5 6.5,6.5"></polyline>
- <polyline fill="white" points="15,6.5 20,6.5 16,9.5 17.5,4.5 19,9.5 15,6.5"></polyline>
- <polyline fill="white" points="23.5,6.5 28.5,6.5 24.5,9.5 26,4.5 27.5,9.5 23.5,6.5"></polyline>
- <polyline fill="white" points="32,6.5 37,6.5 33,9.5 34.5,4.5 36,9.5 32,6.5"></polyline>
- <polyline fill="white" points="40.5,6.5 45.5,6.5 41.5,9.5 43,4.5 44.5,9.5 40.5,6.5"></polyline>
- <polyline fill="white" points="2.5,10 7.5,10 3.5,13 5,8 6.5,13 2.5,10"></polyline>
- <polyline fill="white" points="21,10 16,10 12,13 13.5,8 15,13 11,10"></polyline>
- <polyline fill="white" points="19.5,10 24.5,10 20.5,13 22,8 23.5,13 19.5,10"></polyline>
- <polyline fill="white" points="28,10 33,10 29,13 30.5,8 32,13 28,10"></polyline>
- <polyline fill="white" points="36.5,10 41.5,10 37.5,13 39,8 40.5,13 36.5,10"></polyline>
- <polyline fill="white" points="45,10 50,10 46,13 47.5,8 49,13 45,10"></polyline>
- <polyline fill="white" points="6.5,13.5 11.5,13.5 7.5,16.5 9,11.5 10.5,16.5 6.5,13.5"></polyline>
- <polyline fill="white" points="15,13.5 20,13.5 16,16.5 17.5,11.5 19,16.5 15,13.5"></polyline>
- <polyline fill="white" points="23.5,13.5 28.5,13.5 24.5,16.5 26,11.5 27.5,16.5 23.5,13.5"></polyline>
- <polyline fill="white" points="32,13.5 37,13.5 33,16.5 34.5,11.5 36,16.5 32,13.5"></polyline>
- <polyline fill="white" points="40.5,13.5 45.5,13.5 41.5,16.5 43,11.5 44.5,16.5 40.5,13.5"></polyline>
- <polyline fill="white" points="2.5,17 7.5,17 3.5,20 5,15 6.5,20 2.5,17"></polyline>
- <polyline fill="white" points="21,17 16,17 12,20 13.5,15 15,20 11,17"></polyline>
- <polyline fill="white" points="19.5,17 24.5,17 20.5,20 22,15 23.5,20 19.5,17"></polyline>
- <polyline fill="white" points="28,17 33,17 29,20 30.5,15 32,20 28,17"></polyline>
- <polyline fill="white" points="36.5,17 41.5,17 37.5,20 39,15 40.5,20 36.5,17"></polyline>
- <polyline fill="white" points="45,17 50,17 46,20 47.5,15 49,20 45,17"></polyline>
- <polyline fill="white" points="6.5,20.5 11.5,20.5 7.5,23.5 9,18.5 10.5,23.5 6.5,20.5"></polyline>
- <polyline fill="white" points="15,20.5 20,20.5 16,23.5 17.5,18.5 19,23.5 15,20.5"></polyline>
- <polyline fill="white" points="23.5,20.5 28.5,20.5 24.5,23.5 26,18.5 27.5,23.5 23.5,20.5"></polyline>
- <polyline fill="white" points="32,20.5 37,20.5 33,23.5 34.5,18.5 36,23.5 32,20.5"></polyline>
- <polyline fill="white" points="40.5,20.5 45.5,20.5 41.5,23.5 43,18.5 44.5,23.5 40.5,20.5"></polyline>
- <polyline fill="white" points="2.5,24 7.5,24 3.5,27 5,22 6.5,27 2.5,24"></polyline>
- <polyline fill="white" points="21,24 16,24 12,27 13.5,22 15,27 11,24"></polyline>
- <polyline fill="white" points="19.5,24 24.5,24 20.5,27 22,22 23.5,27 19.5,24"></polyline>
- <polyline fill="white" points="28,24 33,24 29,27 30.5,22 32,27 28,24"></polyline>
- <polyline fill="white" points="36.5,24 41.5,24 37.5,27 39,22 40.5,27 36.5,24"></polyline>
- <polyline fill="white" points="45,24 50,24 46,27 47.5,22 49,27 45,24"></polyline>
- <polyline fill="white" points="6.5,27.5 11.5,27.5 7.5,30.5 9,25.5 10.5,30.5 6.5,27.5"></polyline>
- <polyline fill="white" points="15,27.5 20,27.5 16,30.5 17.5,25.5 19,30.5 15,27.5"></polyline>
- <polyline fill="white" points="23.5,27.5 28.5,27.5 24.5,30.5 26,25.5 27.5,30.5 23.5,27.5"></polyline>
- <polyline fill="white" points="32,27.5 37,27.5 33,30.5 34.5,25.5 36,30.5 32,27.5"></polyline>
- <polyline fill="white" points="40.5,27.5 45.5,27.5 41.5,30.5 43,25.5 44.5,30.5 40.5,27.5"></polyline>
- <polyline fill="white" points="2.5,31 7.5,31 3.5,34 5,29 6.5,34 2.5,31"></polyline>
- <polyline fill="white" points="21,31 16,31 12,34 13.5,29 15,34 11,31"></polyline>
- <polyline fill="white" points="19.5,31 24.5,31 20.5,34 22,29 23.5,34 19.5,31"></polyline>
- <polyline fill="white" points="28,31 33,31 29,34 30.5,29 32,34 28,31"></polyline>
- <polyline fill="white" points="36.5,31 41.5,31 37.5,34 39,29 40.5,34 36.5,31"></polyline>
- <polyline fill="white" points="45,31 50,31 46,34 47.5,29 49,34 45,31"></polyline>
- </g>
- </pattern>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" fill="url(#oldGlory)" />
- </svg>
- </span>
- <h1>HTML SVG CODE</h1>
- <textarea id="area51">
- <span style="display:block;margin:0 auto;height:65x;width:125px;">
- <svg viewBox="0 0 125 65">
- <defs>
- <pattern id="oldGlory" width="125" height="65" patternUnits="userSpaceOnUse">
- <g>
- <polyline stroke-width="1" stroke="#CCCCCC" fill="#FFFFFF" points="0,0 125,0 125,65 0,65 0,0"></polyline>
- <polyline fill="#000052" points="0,0 52.5,0 52.5,35 0,35 0,0"></polyline>
- <polyline fill="#9C0000" points="52.5,0 125,0 125,5 52.5,5"></polyline>
- <polyline fill="#9C0000" points="52.5,10 125,10 125,15 52.5,15"></polyline>
- <polyline fill="#9C0000" points="52.5,20 125,20 125,25 52.5,25"></polyline>
- <polyline fill="#9C0000" points="52.5,30 125,30 125,35 52.5,35"></polyline>
- <polyline fill="#9C0000" points="0,40 125,40 125,45 0,45"></polyline>
- <polyline fill="#9C0000" points="0,50 125,50 125,55 0,55"></polyline>
- <polyline fill="#9C0000" points="0,60 125,60 125,65 0,65"></polyline>
- <polyline fill="white" points="2.5,3 7.5,3 3.5,6 5,1 6.5,6 2.5,3"></polyline>
- <polyline fill="white" points="11,3 16,3 12,6 13.5,1 15,6 11,3"></polyline>
- <polyline fill="white" points="19.5,3 24.5,3 20.5,6 22,1 23.5,6 19.5,3"></polyline>
- <polyline fill="white" points="28,3 33,3 29,6 30.5,1 32,6 28,3"></polyline>
- <polyline fill="white" points="36.5,3 41.5,3 37.5,6 39,1 40.5,6 36.5,3"></polyline>
- <polyline fill="white" points="45,3 50,3 46,6 47.5,1 49,6 45,3"></polyline>
- <polyline fill="white" points="6.5,6.5 11.5,6.5 7.5,9.5 9,4.5 10.5,9.5 6.5,6.5"></polyline>
- <polyline fill="white" points="15,6.5 20,6.5 16,9.5 17.5,4.5 19,9.5 15,6.5"></polyline>
- <polyline fill="white" points="23.5,6.5 28.5,6.5 24.5,9.5 26,4.5 27.5,9.5 23.5,6.5"></polyline>
- <polyline fill="white" points="32,6.5 37,6.5 33,9.5 34.5,4.5 36,9.5 32,6.5"></polyline>
- <polyline fill="white" points="40.5,6.5 45.5,6.5 41.5,9.5 43,4.5 44.5,9.5 40.5,6.5"></polyline>
- <polyline fill="white" points="2.5,10 7.5,10 3.5,13 5,8 6.5,13 2.5,10"></polyline>
- <polyline fill="white" points="21,10 16,10 12,13 13.5,8 15,13 11,10"></polyline>
- <polyline fill="white" points="19.5,10 24.5,10 20.5,13 22,8 23.5,13 19.5,10"></polyline>
- <polyline fill="white" points="28,10 33,10 29,13 30.5,8 32,13 28,10"></polyline>
- <polyline fill="white" points="36.5,10 41.5,10 37.5,13 39,8 40.5,13 36.5,10"></polyline>
- <polyline fill="white" points="45,10 50,10 46,13 47.5,8 49,13 45,10"></polyline>
- <polyline fill="white" points="6.5,13.5 11.5,13.5 7.5,16.5 9,11.5 10.5,16.5 6.5,13.5"></polyline>
- <polyline fill="white" points="15,13.5 20,13.5 16,16.5 17.5,11.5 19,16.5 15,13.5"></polyline>
- <polyline fill="white" points="23.5,13.5 28.5,13.5 24.5,16.5 26,11.5 27.5,16.5 23.5,13.5"></polyline>
- <polyline fill="white" points="32,13.5 37,13.5 33,16.5 34.5,11.5 36,16.5 32,13.5"></polyline>
- <polyline fill="white" points="40.5,13.5 45.5,13.5 41.5,16.5 43,11.5 44.5,16.5 40.5,13.5"></polyline>
- <polyline fill="white" points="2.5,17 7.5,17 3.5,20 5,15 6.5,20 2.5,17"></polyline>
- <polyline fill="white" points="21,17 16,17 12,20 13.5,15 15,20 11,17"></polyline>
- <polyline fill="white" points="19.5,17 24.5,17 20.5,20 22,15 23.5,20 19.5,17"></polyline>
- <polyline fill="white" points="28,17 33,17 29,20 30.5,15 32,20 28,17"></polyline>
- <polyline fill="white" points="36.5,17 41.5,17 37.5,20 39,15 40.5,20 36.5,17"></polyline>
- <polyline fill="white" points="45,17 50,17 46,20 47.5,15 49,20 45,17"></polyline>
- <polyline fill="white" points="6.5,20.5 11.5,20.5 7.5,23.5 9,18.5 10.5,23.5 6.5,20.5"></polyline>
- <polyline fill="white" points="15,20.5 20,20.5 16,23.5 17.5,18.5 19,23.5 15,20.5"></polyline>
- <polyline fill="white" points="23.5,20.5 28.5,20.5 24.5,23.5 26,18.5 27.5,23.5 23.5,20.5"></polyline>
- <polyline fill="white" points="32,20.5 37,20.5 33,23.5 34.5,18.5 36,23.5 32,20.5"></polyline>
- <polyline fill="white" points="40.5,20.5 45.5,20.5 41.5,23.5 43,18.5 44.5,23.5 40.5,20.5"></polyline>
- <polyline fill="white" points="2.5,24 7.5,24 3.5,27 5,22 6.5,27 2.5,24"></polyline>
- <polyline fill="white" points="21,24 16,24 12,27 13.5,22 15,27 11,24"></polyline>
- <polyline fill="white" points="19.5,24 24.5,24 20.5,27 22,22 23.5,27 19.5,24"></polyline>
- <polyline fill="white" points="28,24 33,24 29,27 30.5,22 32,27 28,24"></polyline>
- <polyline fill="white" points="36.5,24 41.5,24 37.5,27 39,22 40.5,27 36.5,24"></polyline>
- <polyline fill="white" points="45,24 50,24 46,27 47.5,22 49,27 45,24"></polyline>
- <polyline fill="white" points="6.5,27.5 11.5,27.5 7.5,30.5 9,25.5 10.5,30.5 6.5,27.5"></polyline>
- <polyline fill="white" points="15,27.5 20,27.5 16,30.5 17.5,25.5 19,30.5 15,27.5"></polyline>
- <polyline fill="white" points="23.5,27.5 28.5,27.5 24.5,30.5 26,25.5 27.5,30.5 23.5,27.5"></polyline>
- <polyline fill="white" points="32,27.5 37,27.5 33,30.5 34.5,25.5 36,30.5 32,27.5"></polyline>
- <polyline fill="white" points="40.5,27.5 45.5,27.5 41.5,30.5 43,25.5 44.5,30.5 40.5,27.5"></polyline>
- <polyline fill="white" points="2.5,31 7.5,31 3.5,34 5,29 6.5,34 2.5,31"></polyline>
- <polyline fill="white" points="21,31 16,31 12,34 13.5,29 15,34 11,31"></polyline>
- <polyline fill="white" points="19.5,31 24.5,31 20.5,34 22,29 23.5,34 19.5,31"></polyline>
- <polyline fill="white" points="28,31 33,31 29,34 30.5,29 32,34 28,31"></polyline>
- <polyline fill="white" points="36.5,31 41.5,31 37.5,34 39,29 40.5,34 36.5,31"></polyline>
- <polyline fill="white" points="45,31 50,31 46,34 47.5,29 49,34 45,31"></polyline>
- </g>
- </pattern>
- </defs>
- <rect x="0" y="0" width="100%" height="100%" fill="url(#oldGlory)" />
- </svg>
- </span>
- </textarea>
- <button onclick="copyCode('area51')">copy</button>
- <script>
- betsyRoss();
- </script>
- <h1>JS Function betsyRoss()</h1>
- <textarea id="area50">
- function betsyRoss(){
- document.write('<span style="display:block;margin:0 auto;height:65x;width:125px;"><svg viewBox="0 0 125 65"><defs>');
- document.write('<pattern id="oldGlory" width="125" height="65" patternUnits="userSpaceOnUse"><g>');
- document.write('<polyline stroke-width="1" stroke="#CCCCCC" fill="#FFFFFF" points="0,0 125,0 125,65 0,65 0,0"><\/polyline>');
- document.write('<polyline fill="#000052" points="0,0 52.5,0 52.5,35 0,35 0,0"><\/polyline>');
- for(y = 0;y < 70;y = y + 10){
- if(y > 39){var startPoint = 0;}
- else{var startPoint = 52.5;}
- document.write('<polyline fill="#9C0000" points="'+startPoint+','+y+' 125,'+y+' 125,'+(y+5)+' '+startPoint+','+(y+5)+'"><\/polyline>');
- }
- for(y = 0; y < 34;y = y + 7){
- for(x = 0; x < 51;x = x + 8.5){
- document.write('<polyline fill="white" points="'+(x+2.5)+','+(y+3)+' '+(x+7.5)+','+(y+3)+' '+(x+3.5)+','+(y+6)+' '+(x+5)+','+(y+1)+' '+(x+6.5)+','+(y+6)+' '+(x+2.5)+','+(y+3)+'"><\/polyline>');
- if ((y < 27) && (x < 42.5)){
- document.write('<polyline fill="white" points="'+(x+6.5)+','+(y+6.5)+' '+(x+11.5)+','+(y+6.5)+' '+(x+7.5)+','+(y+9.5)+' '+(x+9)+','+(y+4.5)+' '+(x+10.5)+','+(y+9.5)+' '+(x+6.5)+','+(y+6.5)+'"><\/polyline>');
- }
- }
- }
- document.write('<\/g><\/pattern><\/defs>');
- document.write('<rect x="0" y="0" width="100%" height="100%" fill="url(#oldGlory)" \/>');
- document.write('<\/svg><\/span>');
- }
- </textarea>
- <button onclick="copyCode('area50')">copy</button>
- <address>Lionel Mertens ~ 2019</address>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment