Ubuntu正在使用SVG制作广告。下面的示例是常规广告之一，我们可以在广告部分的不同网站中看到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG应用：SVG制作广告 | web176教程网</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic,latin-ext,vietnamese,greek,greek-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
@-webkit-keyframes ubuntu-scene-fade-in{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes ubuntu-scene-fade-out{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes ubuntu-scene-hidden{
0%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes ubuntu-scene-visible{
0%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@keyframes ubuntu-scene-fade-in{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes ubuntu-scene-fade-out{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes ubuntu-scene-hidden{
0%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes ubuntu-scene-visible{
0%{
opacity: 1;
}
100%{
opacity: 1;
}
}
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: 'Roboto', sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */ input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */ padding: 0; /* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
body {
background: #eee;
color: #222;
}
a{
color: #222;
}
a:hover{
color: #C55129;
}
.container {
text-align: center;
}
.video{
border: 1px solid #ccc;
width: 570px;
height: 460px;
margin: 20px auto;
background: #857F96;
position: relative;
overflow: hidden;
}
.background-shading{
width: 100%;
height: 140%;
z-index: 1;
background: #a29bbd; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #a29bbd 0%, #a29bbd 10%, #948ea9 30%, #847c93 59%, #686373 80%, #494650 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a29bbd), color-stop(10%,#a29bbd), color-stop(30%,#948ea9), color-stop(59%,#847c93), color-stop(80%,#686373), color-stop(100%,#494650)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bbd', endColorstr='#494650',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
#ubuntu-symbol{
z-index: 2;
overflow: visible;
}
.composition,
.background-shading,
#ubuntu-symbol,
.question-1,
.question-2,
.ubuntu-url,
.credits,
.counter-container,
#ubuntu-logo{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.composition{
width: 100%;
height: 100%;
z-index: 3;
background-color: #fff;
-webkit-animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
-webkit-animation-delay: 0, 3s, 3.5s, 13.25s;
-webkit-animation-duration: 3s, 0.5s, 10.25s, 0s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
animation-delay: 0s, 3s, 3.5s, 13.25s;
animation-duration: 3s, 0.5s, 10.25s, 0s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.question-1,
.question-2,
.ubuntu-url,
.credits,
.counter-container,
#ubuntu-logo{
opacity: 0;
}
.question-1,
.question-2,
.ubuntu-url,
.credits,
.counter-container{
font-size: 36pt;
color: #C55129;
font-weight: normal;
padding: 0;
margin: 0;
}
.question-1{
-webkit-animation-delay: 0s, 1s, 2.8s;
-webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s, 1.8s, 0.25s;
-webkit-animation-iteration-count: 1;
animation-delay: 0s, 1s, 2.8s;
animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
animation-timing-function: ease-in-out;
animation-duration: 1s, 1.8s, 0.25s;
animation-iteration-count: 1;
}
.question-2{
-webkit-animation-delay: 13.5s;
-webkit-animation-name: ubuntu-scene-visible;
-webkit-animation-duration: 1.75s;
-webkit-animation-iteration-count: 1;
animation-delay: 13.5s;
animation-name: ubuntu-scene-visible;
animation-duration: 1.75s;
animation-iteration-count: 1;
}
#ubuntu-logo{
-webkit-transform: translate(-35%, -50%);
transform: translate(-35%, -50%);
-webkit-animation-delay: 15.5s, 15.5s, 20.25s;
-webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 0s, 4.75s, 0.25s;
-webkit-animation-iteration-count: 1;
animation-delay: 15.5s, 15.5s, 20.25s;
animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
animation-timing-function: ease-in-out;
animation-duration: 0s, 4.75s, 0.25s;
animation-iteration-count: 1;
}
.ubuntu-url{
-webkit-transform: translate(-55%, 70%);
transform: translate(-55%, 70%);
font-size: 27.25pt;
-webkit-animation-delay: 17s, 17.25s, 20.25s;
-webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 0.25s, 3s, 0.25s;
-webkit-animation-iteration-count: 1;
animation-delay: 17s, 17.25s, 20.25s;
animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
animation-timing-function: ease-in-out;
animation-duration: 0.25s, 3s, 0.25s;
animation-iteration-count: 1;
}
.credits span{
font-size: 37.5pt;
}
.credits{
-webkit-animation-delay: 20.5s, 21s, 27.5s;
-webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
-webkit-animation-duration: 0.5s, 6.5s, 1s;
-webkit-animation-iteration-count: 1;
animation-delay: 20.5s, 21s, 27.5s;
animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
animation-duration: 0.5s, 6.5s, 1s;
animation-iteration-count: 1;
}
.counter-container{
-webkit-animation-delay: 3.7s, 3.05s, 15.05s;
-webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 0.05s, 12s, 0s;
-webkit-animation-iteration-count: 1;
animation-delay: 3.7s, 3.05s, 15.05s;
animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
animation-timing-function: ease-in-out;
animation-duration: 0.05s, 12s, 0s;
animation-iteration-count: 1;
top: 85%;
font-size: 18pt;
z-index: 2;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="video">
<div class="background-shading"></div>
<div class="composition">
<h2 class="question-1">How fast does your PC boot?</h2>
<h2 class="question-2">Ready to work?</h2>
<h2 class="credits"><span>Created by Ubuntu</span> <br></h2>
<svg id="ubuntu-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" width="758px" height="171px" viewBox="-0.424 -0.244 758 171" preserveAspectRatio = "xMidYMid meet">
<g transform="translate(50,0) scale(0.6)">
<circle fill="#DD4814" cx="712.027" cy="45.326" r="45.326"/>
<path fill="#FFFFFF" d="M681.207,39.273c-3.344,0-6.053,2.709-6.053,6.053c0,3.342,2.709,6.051,6.053,6.051
c3.342,0,6.051-2.709,6.051-6.051C687.257,41.982,684.548,39.273,681.207,39.273z M724.414,66.777
c-2.895,1.672-3.887,5.371-2.215,8.264c1.67,2.895,5.369,3.887,8.264,2.215c2.895-1.67,3.887-5.369,2.215-8.264
C731.007,66.1,727.306,65.107,724.414,66.777z M694.351,45.326c0-5.98,2.971-11.264,7.516-14.463l-4.424-7.41
c-5.295,3.539-9.234,8.947-10.871,15.281c1.91,1.559,3.133,3.932,3.133,6.592c0,2.658-1.223,5.031-3.133,6.59
c1.635,6.336,5.574,11.744,10.871,15.283l4.424-7.412C697.322,56.59,694.351,51.307,694.351,45.326z M712.027,27.648
c9.234,0,16.811,7.08,17.605,16.109l8.623-0.127c-0.424-6.666-3.336-12.65-7.811-17.051c-2.301,0.869-4.959,0.736-7.256-0.588
c-2.301-1.328-3.744-3.568-4.139-6c-2.236-0.617-4.59-0.955-7.023-0.955c-4.184,0-8.139,0.982-11.65,2.721l4.205,7.535
C706.843,28.24,709.367,27.648,712.027,27.648z M712.027,63.002c-2.66,0-5.184-0.592-7.445-1.645l-4.205,7.535
c3.512,1.74,7.467,2.723,11.65,2.723c2.434,0,4.787-0.338,7.023-0.957c0.395-2.432,1.838-4.67,4.139-6
c2.299-1.326,4.955-1.457,7.256-0.588c4.475-4.4,7.387-10.385,7.811-17.051l-8.625-0.127
C728.837,55.924,721.261,63.002,712.027,63.002z M724.412,23.871c2.895,1.672,6.594,0.682,8.264-2.213
c1.672-2.895,0.682-6.594-2.213-8.266c-2.895-1.67-6.594-0.678-8.266,2.217C720.527,18.502,721.519,22.201,724.412,23.871z"/>
<path d="M90.651,164.257c-4.606,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.296,1.942-26.225,1.942
c-8.633,0-15.901-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
C0.789,132.853,0,125.914,0,118.285V55.262h20.073v58.706c0,13.672,2.158,23.456,6.476,29.354
c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.839-0.465,3.561-0.755V55.262h20.073V164.257z"/>
<path d="M139.644,60.225c2.445-1.581,6.151-3.237,11.115-4.963c4.964-1.728,10.684-2.59,17.159-2.59
c8.057,0,15.216,1.438,21.476,4.315c6.259,2.88,11.547,6.907,15.863,12.088c4.317,5.18,7.588,11.368,9.821,18.562
c2.229,7.196,3.346,15.107,3.346,23.74c0,9.066-1.333,17.235-3.993,24.5c-2.664,7.266-6.441,13.417-11.332,18.452
c-4.894,5.039-10.792,8.923-17.698,11.656c-6.907,2.731-14.677,4.1-23.311,4.1c-9.355,0-17.627-0.646-24.821-1.942
c-7.196-1.295-13.095-2.589-17.698-3.885V3.459l20.073-3.452V60.225z M139.644,150.013c2.013,0.576,4.856,1.115,8.526,1.617
c3.669,0.506,8.235,0.757,13.705,0.757c10.792,0,19.425-3.562,25.9-10.684c6.475-7.124,9.713-17.231,9.713-30.327
c0-5.751-0.577-11.148-1.727-16.187c-1.153-5.035-3.021-9.388-5.611-13.057c-2.59-3.67-5.936-6.547-10.037-8.635
c-4.101-2.084-9.032-3.129-14.785-3.129c-5.47,0-10.505,0.938-15.108,2.806c-4.607,1.872-8.131,3.815-10.576,5.827V150.013z"/>
<path d="M330.44,164.257c-4.607,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.224,1.942
c-8.634,0-15.901-1.261-21.8-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
c-1.585-6.26-2.375-13.199-2.375-20.828V55.262h20.073v58.706c0,13.672,2.158,23.456,6.475,29.354
c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.388-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.073V164.257z"/>
<path d="M359.359,58.499c4.604-1.151,10.717-2.375,18.347-3.671c7.625-1.294,16.402-1.941,26.33-1.941
c8.922,0,16.33,1.261,22.232,3.776c5.898,2.52,10.609,6.043,14.137,10.576c3.523,4.533,6.006,9.967,7.447,16.296
c1.436,6.333,2.158,13.312,2.158,20.937v63.023h-20.074v-58.708c0-6.905-0.469-12.803-1.402-17.697
c-0.938-4.89-2.48-8.849-4.641-11.87c-2.158-3.023-5.037-5.216-8.633-6.584c-3.6-1.367-8.061-2.051-13.381-2.051
c-2.16,0-4.393,0.074-6.691,0.216c-2.304,0.145-4.499,0.325-6.583,0.541c-2.089,0.215-3.96,0.469-5.611,0.755
c-1.656,0.29-2.844,0.506-3.562,0.646v94.751h-20.073V58.499z"/>
<path d="M496.413,55.262h42.52v16.835h-42.52v51.799c0,5.611,0.43,10.253,1.295,13.921c0.863,3.671,2.158,6.549,3.885,8.634
c1.727,2.088,3.885,3.562,6.475,4.425c2.59,0.863,5.611,1.296,9.064,1.296c6.186,0,11.08-0.682,14.678-2.051
c3.594-1.366,6.043-2.337,7.338-2.913l4.316,16.403c-2.016,1.008-5.578,2.304-10.684,3.884c-5.109,1.582-10.898,2.374-17.375,2.374
c-7.627,0-13.92-0.97-18.885-2.913s-8.957-4.856-11.979-8.741c-3.021-3.886-5.146-8.668-6.367-14.354
c-1.225-5.682-1.836-12.264-1.836-19.748V23.965l20.074-3.453V55.262z"/>
<path d="M648.143,164.257c-4.607,1.153-10.686,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.225,1.942
c-8.633,0-15.9-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.246-10.685c-3.598-4.604-6.188-10.037-7.77-16.296
c-1.586-6.26-2.375-13.199-2.375-20.828V55.262h20.074v58.706c0,13.672,2.158,23.456,6.475,29.354
c4.316,5.902,11.58,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.299-0.141,4.459-0.323,6.475-0.539
c2.014-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.074V164.257z"/>
</g>
</svg>
</div>
<h4 class="counter-container">00:<span id="counter">00</span></h4>
<svg id="ubuntu-symbol" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350px" height="350px" viewBox="-0.866 -0.866 285 285" preserveAspectRatio = "xMidYMid meet">
<defs>
<filter id="dropshadow" x="-100%" y="-100%" width="280%" height="280%">
<!-- stdDeviation is how much to blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="20">
<!--Shadow animation-->
<animate
attributeType="XML"
attributeName="stdDeviation"
calcMode="spline"
additive="sum"
values ="0 ; 20; 0"
keyTimes="0 ; 0.5 ; 1"
keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
begin="3.25s"
dur="10s" />
</feGaussianBlur>
</filter>
<filter id="gaussianblur" x="-100%" y="-100%" width="280%" height="280%">
<!-- stdDeviation is how much to blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="0">
<!--Blur animation-->
<animate
attributeType="XML"
attributeName="stdDeviation"
additive="sum"
calcMode="spline"
values ="0 ; 30; 0"
keyTimes="0 ; 0.5 ; 1"
keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
begin="3.25s"
dur="10s" />
</feGaussianBlur>
</filter>
</defs>
<g id="ubuntu-symbol-group">
<!--Rotation animation-->
<animateTransform
attributeName="transform"
attributeType="XML"
calcMode="spline"
begin="3.25s"
type="rotate"
values ="0 142 142 ; 14400 142 142"
keyTimes="0 ; 1"
keySplines="0.4 0 0.4 1"
dur="10s" />
<!--Translation animation-->
<animateTransform
attributeName="transform"
attributeType="XML"
calcMode="spline"
additive="sum"
begin="3.25s"
type="translate"
values ="0 0 ; 50 50 ; 0 0"
keyTimes="0 ; 0.5 ; 1"
keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
dur="10s" />
<!--Scaling animation-->
<animateTransform
attributeName="transform"
attributeType="XML"
additive="sum"
calcMode="spline"
values ="1 ; 0.65; 1"
keyTimes="0 ; 0.5 ; 1"
keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
begin="3.25s"
type="scale"
dur="10s" />
<path id="ubuntu-symbol-circle-shadow" filter="url(#dropshadow)" fill="#0F1116" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
<path id="ubuntu-symbol-circle" filter="url(#gaussianblur)" fill="#DCC6E5" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
<path id="ubuntu-symbol-circle-elements-inside" transform="translate(3,3) scale(0.98)" filter="url(#gaussianblur)" fill="#E1BECF" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
<path id="ubuntu-symbol-circle-elements" filter="url(#gaussianblur)" fill="#13161F" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
</g>
</svg>
</div>
<p><button >