CodePen Embed - SVG Animated Image with linearGradient

<body>
<div id="logo">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="384.616px" height="36.652px" viewBox="0 0 384.616 36.652" enable-background="new 0 0 384.616 36.652"
	 xml:space="preserve">
<path fill="url(#skyGradient)" d="M26.922,34.046c0,0.159-0.06,0.3-0.18,0.42c-0.12,0.12-0.26,0.18-0.42,0.18c-0.32,0-0.52-0.133-0.6-0.4L14.083,4.886
	l-1.32,3.4c0.106,0.213,0.333,0.747,0.68,1.6c0.346,0.854,0.773,1.9,1.28,3.14c0.506,1.24,1.053,2.614,1.64,4.12
	c0.586,1.507,1.187,3.034,1.8,4.58c0.613,1.547,1.206,3.054,1.78,4.521c0.573,1.467,1.08,2.773,1.52,3.92s0.793,2.073,1.06,2.779
	c0.266,0.707,0.4,1.074,0.4,1.101c0,0.293-0.134,0.479-0.4,0.56c-0.054,0-0.094,0.007-0.12,0.021c-0.027,0.014-0.067,0.02-0.12,0.02
	c-0.267,0-0.454-0.133-0.56-0.4l-9.6-24.24l-9.32,24.24c-0.107,0.268-0.307,0.4-0.6,0.4c-0.054,0-0.087-0.006-0.1-0.02
	c-0.014-0.014-0.047-0.021-0.1-0.021c-0.267-0.08-0.4-0.28-0.4-0.6c0-0.026,0.16-0.467,0.48-1.32c0.32-0.854,0.74-1.96,1.26-3.32
	c0.52-1.359,1.12-2.92,1.8-4.68c0.68-1.76,1.373-3.566,2.08-5.42c0.707-1.853,1.414-3.687,2.12-5.5s1.346-3.473,1.92-4.98
	c0.573-1.506,1.06-2.773,1.46-3.8c0.4-1.026,0.653-1.686,0.76-1.98c0.106-0.24,0.306-0.36,0.6-0.36c0.293,0,0.48,0.12,0.56,0.36
	c0.106,0.294,0.366,0.954,0.78,1.98c0.413,1.027,0.913,2.294,1.5,3.8c0.586,1.507,1.246,3.167,1.98,4.98
	c0.733,1.813,1.466,3.647,2.2,5.5c0.733,1.854,1.453,3.66,2.16,5.42s1.327,3.326,1.86,4.7c0.533,1.374,0.966,2.486,1.3,3.34
	C26.755,33.579,26.922,34.02,26.922,34.046z"/>
<path fill="url(#skyGradient)" d="M69.282,34.025c0,0.414-0.214,0.62-0.64,0.62H49.678c-0.397,0-0.596-0.2-0.596-0.6V3.445c0-0.16,0.062-0.3,0.186-0.42
	c0.124-0.12,0.269-0.18,0.435-0.18c0.165,0,0.31,0.06,0.434,0.18c0.124,0.12,0.187,0.259,0.187,0.419v29.96h2.64V3.285
	c0-0.16,0.064-0.306,0.194-0.439c0.129-0.133,0.271-0.2,0.426-0.2c0.413,0,0.62,0.213,0.62,0.639v30.121h14.44
	C69.068,33.405,69.282,33.612,69.282,34.025z"/>
<path fill="url(#skyGradient)" d="M97.922,18.646c0,2.214-0.42,4.294-1.26,6.24c-0.84,1.946-1.98,3.64-3.42,5.079c-1.44,1.44-3.134,2.581-5.08,3.421
	c-1.947,0.84-4.027,1.26-6.24,1.26c-2.214,0-4.293-0.42-6.24-1.26c-1.947-0.84-3.64-1.98-5.08-3.421
	c-1.44-1.439-2.58-3.133-3.42-5.079c-0.84-1.946-1.26-4.026-1.26-6.24c0-2.213,0.42-4.293,1.26-6.24c0.84-1.946,1.98-3.64,3.42-5.08
	s3.133-2.58,5.08-3.42c1.946-0.84,4.026-1.26,6.24-1.26c2.213,0,4.293,0.42,6.24,1.26c1.946,0.84,3.64,1.98,5.08,3.42
	c1.44,1.44,2.58,3.134,3.42,5.08C97.502,14.353,97.922,16.433,97.922,18.646z M96.682,18.646c0-2.026-0.387-3.933-1.16-5.72
	c-0.774-1.786-1.834-3.353-3.18-4.7c-1.347-1.346-2.914-2.406-4.7-3.18c-1.787-0.773-3.694-1.16-5.72-1.16
	c-2.027,0-3.934,0.387-5.72,1.16c-1.787,0.774-3.354,1.834-4.7,3.18c-1.347,1.347-2.407,2.914-3.18,4.7
	c-0.773,1.787-1.16,3.694-1.16,5.72s0.386,3.934,1.16,5.72c0.773,1.787,1.833,3.354,3.18,4.7c1.346,1.347,2.913,2.407,4.7,3.18
	c1.786,0.774,3.693,1.16,5.72,1.16c2.026,0,3.933-0.386,5.72-1.16c1.786-0.772,3.353-1.833,4.7-3.18
	c1.346-1.347,2.406-2.913,3.18-4.7C96.295,22.579,96.682,20.672,96.682,18.646z"/>
<path fill="url(#skyGradient)" d="M126.442,3.246c0,0.054-0.167,0.507-0.5,1.36c-0.334,0.854-0.767,1.967-1.3,3.34c-0.534,1.374-1.147,2.934-1.84,4.68
	c-0.694,1.747-1.414,3.547-2.16,5.4c-0.747,1.854-1.48,3.688-2.2,5.5c-0.72,1.814-1.38,3.467-1.98,4.96
	c-0.6,1.494-1.1,2.754-1.5,3.78c-0.4,1.026-0.653,1.687-0.76,1.979c-0.107,0.268-0.294,0.4-0.56,0.4
	c-0.08-0.053-0.18-0.106-0.3-0.16c-0.12-0.053-0.207-0.133-0.26-0.24c-0.107-0.266-0.36-0.92-0.76-1.96
	c-0.4-1.039-0.887-2.306-1.46-3.8c-0.574-1.493-1.214-3.146-1.92-4.96c-0.707-1.813-1.42-3.646-2.14-5.5
	c-0.72-1.853-1.414-3.66-2.08-5.42c-0.667-1.76-1.26-3.32-1.78-4.68c-0.52-1.36-0.94-2.466-1.26-3.32
	c-0.32-0.853-0.48-1.293-0.48-1.32c0-0.187,0.06-0.34,0.18-0.46c0.12-0.12,0.26-0.18,0.42-0.18c0.32,0,0.52,0.134,0.6,0.4
	l9.28,24.16l9.56-24.16c0.08-0.266,0.28-0.4,0.6-0.4c0.16,0,0.3,0.06,0.42,0.18c0.12,0.12,0.18,0.26,0.18,0.42
	c0,0.054-0.134,0.427-0.4,1.12s-0.62,1.606-1.06,2.74c-0.44,1.134-0.94,2.427-1.5,3.88c-0.56,1.454-1.146,2.947-1.76,4.48
	c-0.614,1.534-1.214,3.047-1.8,4.541c-0.587,1.493-1.127,2.859-1.62,4.1c-0.494,1.24-0.914,2.287-1.26,3.141
	c-0.347,0.854-0.574,1.399-0.68,1.64l1.28,3.399l11.6-29.24c0.08-0.266,0.28-0.4,0.6-0.4c0.16,0,0.3,0.06,0.42,0.18
	C126.382,2.945,126.442,3.085,126.442,3.246z"/>
<path fill="url(#skyGradient)" d="M154.761,33.966c0,0.16-0.054,0.313-0.16,0.46c-0.107,0.146-0.254,0.22-0.44,0.22h-19.619c-0.193,0-0.352-0.066-0.476-0.2
	c-0.124-0.133-0.186-0.293-0.186-0.479V3.246c0-0.187,0.068-0.333,0.206-0.44c0.138-0.106,0.29-0.16,0.455-0.16h19.619
	c0.16,0,0.3,0.063,0.42,0.186c0.12,0.124,0.18,0.269,0.18,0.434c0,0.166-0.06,0.311-0.18,0.434c-0.12,0.124-0.26,0.186-0.42,0.186
	h-19.04v12.36h14.84c0.16,0,0.3,0.063,0.42,0.186c0.12,0.124,0.18,0.269,0.18,0.434c0,0.166-0.06,0.311-0.18,0.434
	c-0.12,0.124-0.26,0.186-0.42,0.186h-14.76l-0.04,2.761h14.96c0.426,0,0.64,0.206,0.64,0.619c0,0.155-0.067,0.298-0.2,0.427
	c-0.134,0.129-0.28,0.193-0.44,0.193h-15v11.8h19.04c0.16,0,0.3,0.074,0.42,0.221S154.761,33.806,154.761,33.966z"/>
<path fill="url(#skyGradient)" d="M193.921,34.046c0,0.159-0.067,0.3-0.2,0.42c-0.134,0.12-0.28,0.18-0.44,0.18c-0.214,0-0.374-0.08-0.48-0.24l-16.04-22.52
	v22.12c0,0.159-0.065,0.307-0.194,0.439c-0.129,0.134-0.271,0.2-0.426,0.2c-0.414,0-0.62-0.213-0.62-0.64V9.886
	c0-0.133,0.063-0.267,0.192-0.4c0.128-0.133,0.257-0.2,0.386-0.2c0.18,0,0.347,0.094,0.501,0.28c0.187,0.267,0.573,0.807,1.16,1.62
	c0.586,0.813,1.306,1.807,2.16,2.98c0.853,1.174,1.786,2.474,2.8,3.9c1.013,1.427,2.04,2.86,3.08,4.3
	c1.04,1.44,2.046,2.848,3.02,4.221c0.973,1.373,1.84,2.6,2.6,3.68c0.76,1.08,1.366,1.96,1.82,2.64
	C193.694,33.586,193.921,33.966,193.921,34.046z M198.801,34.006c0,0.427-0.214,0.64-0.64,0.64c-0.213,0-0.374-0.08-0.48-0.24
	l-22-30.6c-0.054-0.053-0.08-0.173-0.08-0.36c0-0.426,0.193-0.64,0.578-0.64c0.154,0,0.308,0.094,0.462,0.28l20.92,29.041V3.246
	c0-0.16,0.06-0.3,0.18-0.42c0.12-0.12,0.26-0.18,0.42-0.18c0.16,0,0.3,0.06,0.42,0.18c0.12,0.12,0.18,0.26,0.18,0.42L198.801,34.006
	z"/>
<path fill="url(#skyGradient)" d="M238.081,18.646c0,2.214-0.42,4.294-1.26,6.24s-1.98,3.64-3.42,5.079c-1.44,1.44-3.134,2.581-5.08,3.421
	c-1.947,0.84-4.027,1.26-6.24,1.26c-2.214,0-4.294-0.42-6.24-1.26s-3.64-1.98-5.08-3.421c-1.439-1.439-2.58-3.133-3.42-5.079
	s-1.26-4.026-1.26-6.24c0-2.213,0.42-4.293,1.26-6.24c0.84-1.946,1.98-3.64,3.42-5.08c1.44-1.44,3.134-2.58,5.08-3.42
	c1.946-0.84,4.026-1.26,6.24-1.26c2.213,0,4.293,0.42,6.24,1.26c1.946,0.84,3.64,1.98,5.08,3.42c1.439,1.44,2.58,3.134,3.42,5.08
	C237.661,14.353,238.081,16.433,238.081,18.646z M236.84,18.646c0-2.026-0.387-3.933-1.16-5.72c-0.773-1.786-1.833-3.353-3.18-4.7
	c-1.347-1.346-2.914-2.406-4.7-3.18c-1.786-0.773-3.693-1.16-5.72-1.16s-3.934,0.387-5.72,1.16c-1.787,0.774-3.354,1.834-4.7,3.18
	c-1.347,1.347-2.407,2.914-3.18,4.7c-0.774,1.787-1.16,3.694-1.16,5.72s0.386,3.934,1.16,5.72c0.772,1.787,1.833,3.354,3.18,4.7
	s2.913,2.407,4.7,3.18c1.786,0.774,3.693,1.16,5.72,1.16s3.934-0.386,5.72-1.16c1.786-0.772,3.354-1.833,4.7-3.18
	s2.406-2.913,3.18-4.7C236.454,22.579,236.84,20.672,236.84,18.646z"/>
<path fill="url(#skyGradient)" d="M260.96,3.266c0,0.166-0.06,0.311-0.18,0.434c-0.12,0.124-0.26,0.186-0.42,0.186h-19.68c-0.16,0-0.301-0.062-0.42-0.186
	c-0.12-0.124-0.181-0.269-0.181-0.434c0-0.165,0.061-0.31,0.181-0.434c0.119-0.124,0.26-0.186,0.42-0.186h19.68
	c0.16,0,0.3,0.063,0.42,0.186C260.901,2.956,260.96,3.101,260.96,3.266z M261.121,7.125c0,0.16-0.06,0.307-0.18,0.44
	c-0.12,0.134-0.26,0.2-0.42,0.2h-9.28v26.28c0,0.159-0.065,0.3-0.193,0.42c-0.13,0.12-0.271,0.18-0.427,0.18
	s-0.297-0.053-0.426-0.16c-0.13-0.106-0.194-0.253-0.194-0.439V7.766h-9.319c-0.16,0-0.301-0.066-0.42-0.2
	c-0.12-0.133-0.181-0.28-0.181-0.44s0.054-0.313,0.16-0.46c0.106-0.146,0.253-0.22,0.44-0.22h19.84c0.186,0,0.333,0.074,0.439,0.22
	C261.067,6.813,261.121,6.965,261.121,7.125z"/>
<path fill="url(#skyGradient)" d="M303.401,34.025c0,0.414-0.214,0.62-0.641,0.62h-18.964c-0.397,0-0.596-0.2-0.596-0.6V3.445c0-0.16,0.062-0.3,0.186-0.42
	s0.269-0.18,0.435-0.18c0.165,0,0.31,0.06,0.434,0.18s0.187,0.259,0.187,0.419v29.96h2.64V3.285c0-0.16,0.064-0.306,0.194-0.439
	c0.128-0.133,0.271-0.2,0.426-0.2c0.413,0,0.62,0.213,0.62,0.639v30.121h14.439C303.187,33.405,303.401,33.612,303.401,34.025z"/>
<path fill="url(#skyGradient)" d="M332.041,18.646c0,2.214-0.42,4.294-1.26,6.24s-1.98,3.64-3.42,5.079c-1.44,1.44-3.134,2.581-5.08,3.421
	c-1.947,0.84-4.027,1.26-6.24,1.26c-2.214,0-4.294-0.42-6.24-1.26s-3.64-1.98-5.08-3.421c-1.439-1.439-2.58-3.133-3.42-5.079
	s-1.26-4.026-1.26-6.24c0-2.213,0.42-4.293,1.26-6.24c0.84-1.946,1.98-3.64,3.42-5.08c1.44-1.44,3.134-2.58,5.08-3.42
	c1.946-0.84,4.026-1.26,6.24-1.26c2.213,0,4.293,0.42,6.24,1.26c1.946,0.84,3.64,1.98,5.08,3.42c1.439,1.44,2.58,3.134,3.42,5.08
	C331.621,14.353,332.041,16.433,332.041,18.646z M330.8,18.646c0-2.026-0.387-3.933-1.16-5.72c-0.773-1.786-1.833-3.353-3.18-4.7
	c-1.347-1.346-2.914-2.406-4.7-3.18c-1.786-0.773-3.693-1.16-5.72-1.16s-3.934,0.387-5.72,1.16c-1.787,0.774-3.354,1.834-4.7,3.18
	c-1.347,1.347-2.407,2.914-3.18,4.7c-0.774,1.787-1.16,3.694-1.16,5.72s0.386,3.934,1.16,5.72c0.772,1.787,1.833,3.354,3.18,4.7
	s2.913,2.407,4.7,3.18c1.786,0.774,3.693,1.16,5.72,1.16s3.934-0.386,5.72-1.16c1.786-0.772,3.354-1.833,4.7-3.18
	s2.406-2.913,3.18-4.7C330.414,22.579,330.8,20.672,330.8,18.646z"/>
<path fill="url(#skyGradient)" d="M358.04,26.034c0,1.442-0.313,2.704-0.938,3.785c-0.626,1.081-1.451,1.977-2.476,2.684c-1.025,0.708-2.17,1.242-3.435,1.602
	c-1.264,0.361-2.535,0.541-3.813,0.541c-2.263,0-4.406-0.44-6.429-1.32s-3.833-2.079-5.431-3.6c-0.16-0.16-0.24-0.306-0.24-0.44
	c0-0.16,0.066-0.313,0.2-0.459c0.133-0.146,0.293-0.221,0.479-0.221c0.134,0,0.267,0.066,0.4,0.2c1.653,1.387,3.366,2.5,5.14,3.34
	s3.767,1.26,5.98,1.26c1.12,0,2.233-0.153,3.34-0.46c1.106-0.306,2.106-0.772,3-1.4c0.894-0.625,1.613-1.406,2.16-2.34
	c0.546-0.933,0.82-2.025,0.82-3.279c0-1.014-0.24-1.887-0.721-2.62c-0.479-0.733-1.106-1.36-1.88-1.88
	c-0.773-0.521-1.66-0.953-2.66-1.301c-1-0.346-2.007-0.646-3.02-0.899c-1.014-0.253-2.007-0.474-2.98-0.66
	c-0.974-0.186-1.819-0.373-2.54-0.56c-0.88-0.24-1.727-0.566-2.54-0.98c-0.813-0.413-1.526-0.926-2.14-1.54
	c-0.613-0.613-1.1-1.326-1.46-2.14s-0.54-1.727-0.54-2.74c0-1.36,0.313-2.54,0.94-3.54c0.626-1,1.439-1.826,2.439-2.48
	c1-0.653,2.106-1.146,3.32-1.48c1.213-0.333,2.406-0.5,3.58-0.5c0.746,0,1.593,0.078,2.54,0.232c0.946,0.155,1.893,0.382,2.84,0.68
	c0.946,0.299,1.833,0.661,2.66,1.087c0.826,0.427,1.52,0.907,2.08,1.44c0.08,0.08,0.14,0.147,0.18,0.2
	c0.04,0.054,0.06,0.147,0.06,0.28c0,0.16-0.066,0.307-0.199,0.44c-0.134,0.134-0.28,0.2-0.44,0.2c-0.054,0-0.153-0.04-0.3-0.12
	c-0.147-0.08-0.307-0.18-0.48-0.3s-0.333-0.227-0.479-0.32c-0.147-0.093-0.26-0.166-0.34-0.22c-1.2-0.72-2.48-1.293-3.841-1.72
	c-1.359-0.426-2.76-0.64-4.199-0.64c-1.014,0-2.054,0.126-3.12,0.38c-1.067,0.254-2.047,0.648-2.94,1.182
	c-0.894,0.534-1.627,1.221-2.2,2.063c-0.573,0.841-0.859,1.849-0.859,3.023c0,1.282,0.292,2.33,0.878,3.145s1.357,1.482,2.315,2.002
	s2.05,0.941,3.273,1.261c1.225,0.321,2.481,0.627,3.773,0.921c1.29,0.293,2.548,0.614,3.772,0.961
	c1.224,0.348,2.314,0.82,3.272,1.422s1.73,1.361,2.315,2.283C357.747,23.411,358.04,24.593,358.04,26.034z"/>
<path fill="url(#skyGradient)" d="M382.72,3.266c0,0.166-0.06,0.311-0.18,0.434c-0.12,0.124-0.26,0.186-0.42,0.186h-19.68c-0.16,0-0.301-0.062-0.42-0.186
	c-0.12-0.124-0.181-0.269-0.181-0.434c0-0.165,0.061-0.31,0.181-0.434c0.119-0.124,0.26-0.186,0.42-0.186h19.68
	c0.16,0,0.3,0.063,0.42,0.186C382.661,2.956,382.72,3.101,382.72,3.266z M382.88,7.125c0,0.16-0.06,0.307-0.18,0.44
	c-0.12,0.134-0.26,0.2-0.42,0.2H373v26.28c0,0.159-0.065,0.3-0.193,0.42c-0.13,0.12-0.271,0.18-0.427,0.18s-0.297-0.053-0.426-0.16
	c-0.13-0.106-0.194-0.253-0.194-0.439V7.766h-9.319c-0.16,0-0.301-0.066-0.42-0.2c-0.12-0.133-0.181-0.28-0.181-0.44
	s0.054-0.313,0.16-0.46c0.106-0.146,0.253-0.22,0.44-0.22h19.84c0.186,0,0.333,0.074,0.439,0.22
	C382.827,6.813,382.88,6.965,382.88,7.125z"/>
<defs>
        <linearGradient id="skyGradient" x1="100%" y1="100%">
          <stop offset="0%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="14s" repeatCount="indefinite" />
          </stop>
          <stop offset="100%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;orange;purple;purple;black;purple;purple;blue;lightblue" dur="14s" repeatCount="indefinite" />
            <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="14s" repeatCount="indefinite" />
          </stop>
        </linearGradient>
</defs>
</svg>
</div>
</body>

#logo {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 10%;
  vertical-align: middle;
  overflow: hidden;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

This Pen is owned by Patrick Young on CodePen.

See more by @ISOgenesis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.